05
Модуль 3 · Занятие 3
Webhook и приём данных из Tilda
Разбираем, как данные формы покидают Tilda, и доводим тестовую заявку до внешнего приёмника
Программа занятия
Что мы успеем за полтора часа
Часть 1 · Webhook
Что происходит после «Отправить». Кто отправляет запрос и почему это важно для безопасности. Тело POST-запроса. Подключение webhook к тестовому приёмнику и сверка с контрактом.
Результат: webhook подключён, тестовая заявка получена
Часть 2 · База данных
Supabase как внешний backend. Три ключа и их места. Таблицы и RLS. Функция-прослойка: проверка ключа, валидация, запись. Логирование и интеграционный сценарий.
Результат: заявка из формы в таблице Supabase
Путь заявки
Что происходит после «Отправить»
01
Пользователь нажимает «Записаться»
02
Браузер проверяет форму на стороне страницы
03
Браузер → сервер Tilda: данные формы
04
Tilda сохраняет заявку в разделе «Заявки»
05
Сервер Tilda → ваш endpoint: POST (webhook)
06
Ваш endpoint → Tilda: 200 ok
07
Пользователь видит «Заявка принята»
Заявка появляется в «Заявках» раньше, чем приезжает к вам. Если там она есть, а у вас нет — проблема в доставке, а не в форме.
Главное про webhook
Кто отправляет запрос
Что из этого следует
Адрес endpoint и ключ доступа живут в настройках webhook, на стороне Tilda. В код страницы они не попадают — значит, их не увидит посетитель через Cmd+Option+U на Mac, Ctrl+U в Windows.
Чем это отличается от урока 1
На уроке 1 мы выяснили: всё, что есть на странице, публично. Webhook — первый механизм курса, который обходит это ограничение: запрос уходит с сервера, а не со страницы.
Сырой запрос
Так выглядит POST от Tilda
POST /tilda-webhook HTTP/1.1 Content-Type: application/x-www-form-urlencoded name=%D0%90%D0%BD%D0%BD%D0%B0&email=anna%40example.com &phone=%2B7+912+345-67-89&service=...&consent=yes &tranid=1234567%3A8901234&formid=form100500
Это тот же набор имён, который вы задавали в форме на уроке 4. Если там осталось автоимя Name_2 — оно приедет сюда ровно в таком виде.
Разбор тела
Что внутри запроса
| Элемент | Что это | Зачем нужен |
|---|---|---|
| urlencoded | Пары ключ=значение, разделённые &; спецсимволы закодированы: @ → %40, пробел → + | Формат по умолчанию для форм. Прослойка раскодирует его сама |
| tranid | Уникальный номер отправки | По нему отсекаются дубли — разберём в части 2 |
| formid | Какая форма отправила заявку | Когда форм на сайте несколько, а endpoint один |
| test=test | Проверочный запрос при подключении webhook | На него тоже надо отвечать 200, иначе Tilda не сохранит настройку |
Обязательное условие
Только HTTPS
Почему не HTTP
По HTTP данные идут открытым текстом, и их может прочитать любой узел по пути: сеть кафе, провайдер, прокси. В теле запроса — имя, телефон и email живого человека.
Что делать
Ничего специально: Supabase, Vercel и Netlify выдают HTTPS по умолчанию. URL endpoint всегда начинается с https:// — адрес на HTTP Tilda просто не сохранит.
Шаг перед backend
Тестовый приёмник за пять шагов
01
Открыть сервис тестового приёмника (например, webhook.site) и скопировать выданный URL
02
Tilda → Настройки сайта → Формы → Webhook → вставить URL
03
В блоке формы: Контент → Сервисы приёма данных → отметить webhook
04
Опубликовать страницу
05
Отправить заявку — в приёмнике появятся два запроса: test=test и сама заявка
Галочка «Сервисы приёма данных» живёт в самом блоке формы, а не в настройках сайта. Это разные места, и их путают чаще всего.
Важно
Тестовые приёмники публичны
- Отправляйте только выдуманные данные: тестовое имя, свой второй email, телефон вида +7 900 000-00-00
- Не подключайте тестовый приёмник к форме, которой уже пользуются живые люди
- Закончили проверку — сразу замените URL на адрес своей функции
Сверка с контрактом
Что проверить в приехавшем запросе
- Все поля пришли под именами из модели данных — не Name_2, а name
- Значения в ожидаемом формате: дата как дата, телефон как телефон
- Скрытое поле source заполнено — видно, с какой страницы пришла заявка
- Есть tranid и formid
Если пункт не сходится — чинить надо форму, а не прослойку. Переименовать поле в Tilda — минута. Перевод Name_2 в name внутри функции останется в коде навсегда.
Практика · 10 минут
Подключите свой webhook
01
Получить URL тестового приёмника
02
Вставить его в Настройки сайта → Формы → Webhook
03
Отметить сервис в блоке формы и опубликовать страницу
04
Отправить заявку с выдуманными данными и сверить поля с контрактом
Не приходит? Проверяйте по порядку: страница опубликована → сервис отмечен в блоке формы → URL скопирован целиком. Именно в таком порядке это ломается.
Разбор сбоев
Почему заявка не доезжает
| Признак | Причина и решение |
|---|---|
| Tilda не сохраняет webhook | Опечатка в URL, функция не задеплоена или адрес не на HTTPS |
| В «Заявках» есть, в приёмнике нет | Не отмечен сервис в блоке формы: Контент → Сервисы приёма данных |
| Не приходит вообще ничего | Страница не опубликована |
| Поля называются странно | Имена переменных в форме — урок 4 |
| Одна заявка пришла дважды | Повторная доставка или двойной клик. Решение — уникальный tranid, часть 2 |
| Tilda прерывает ожидание | Endpoint делает тяжёлую работу синхронно. Отвечать надо быстро, долгое выносить отдельно |
Контракт ответа
Что должен отвечать endpoint
200
Заявка принята. Короткое тело ok — и на проверочный test=test тоже.
4xx
Запрос плохой: нет обязательного поля, ключ неверный. Повторять бессмысленно.
5xx
Сбой на нашей стороне: база не ответила, функция упала. Такой запрос имеет смысл повторить.
Мини-артефакт урока 5
Webhook подключён, заявка доехала
- Webhook подключён, тестовая заявка видна в приёмнике
- Состав данных сверен с контрактом: имена полей совпадают с моделью
- Ключ и адрес endpoint в коде страницы отсутствуют — проверено через Ctrl+U
Задание: assignments/module-3.md, задание 3.1
