Прием данных с формы Tilda
Tilda — конструктор сайтов, позволяющий онлайн собирать и публиковать сайты из готовых блоков. Данные из сайта можно отправлять на сторонние источники. Рассмотрим пример отправки данных в Бипиум.
1. Введение
Бипиум позволяет принимать и обрабатывать данные из форм сайта на Tilda. Например, у нас есть сайт созданный на Tilda, с формой обратной связи.
Мы хотим, чтобы при нажатии кнопки Отправить введенные в форму данные сохранились в Бипиум.
2. Принцип работы
Ваш сайт отправляет введенные пользователем в форме данные в Бипиум.
Бипиум принимает запрос и запускает сценарий обработки полученных данных.
На основе полученных данных в Бипиум создается новая запись в соответствующем каталоге.
3. Реализация
3.1. Подготовка полей формы в Tilda
Для передачи данных в Бипиум необходимо задать имена переменных для всех полей формы. Для нашего примера зададим следующие имена:
Имя - name Эл. почта - email Телефон - phone Чем мы можем помочь? - comment
3.2. Подготовка каталога для данных в Бипиум
Для того, чтобы принимать данные из сайта, в Бипиум необходимо подготовить каталог, куда мы будем сохранять отправленные данные. Типы полей в Бипиум и Tilda отличаются, поэтому мы подготовили список соответствия популярных полей Tilda к полям в Бипиум:
Email = Контакт с выбранным значением Электронная почта
Телефон = Контакт с выбранным значением Телефон
Имя = Текст
Поле для ввода в одну строку = Текст
Поле для ввода в несколько строк = Текст с выбранным значением Многострочный текст
Выпадающий список = Выбор значения или Статус. Варианты ответа в Тильда - это элементы выбранного поля в Бипиум
Вопрос с вариантами ответа = если Вид ответа - Один вариант ответа (радиокнопки), то Выбор значения или Статус, если Вид ответа - Несколько вариантов ответа (галочки), то Набор галочек или Статус (с настройкой Можно выбрать несколько)
Варианты ответа для полей Выпадающий список и Вопрос с вариантами ответа в Tilda должны быть идентичными элементам соответствующих полей в Бипиум, включая регистр
Оценочная шкала = Число
Галочка = Переключатель
Дата = Дата
Tilda не передает информацию о выбранном формате для поля типа Дата, из-за чего мы не сможем отличить формат ДД-ММ-ГГГГ от формата ММ-ДД-ГГГГ и поэтому рекомендуем выбирать либо ДД-ММ-ГГГГ, либо ГГГГ-ММ-ДД
Время = Текст с выбранным значением Текст по маске и настройкой 11:11
Количество = Число
Ссылка = Контакт с выбранным значением Сайт/ссылка
Скрытое поле = Текст
Калькулятор = Число
Создадим в Бипиум новый каталог и добавим такие же поля, которые у нас есть на нашем сайте, в соответствии со списком соответствия выше:
В свойствах каждого поля в поле ID-поля укажите имя переменной соответствующего поля, который мы задали в шаге 3.1. Важно сохранять регистры букв, в соответствии с указанием в Tilda. После указания текстового ID он сразу отображается слева от названия поля. Это позволит соотнести поля из Tilda с полями в Бипиум.
Когда все поля добавлены, сохраните каталог, нажав соответствующую кнопку в правом верхнем углу. Посмотрите ID созданного каталога: он указан в адресной строке после /catalog/
Например, если адрес выглядит так: https://tilda-demo.bpium.ru/#/section/2/catalog/16/view/0/records значит ID-каталога 16. Запомните этот ID - он понадобится нам в следующем шаге.
3.3. Подготовка инструмента приема данных
В Бипиум есть возможность создания специальных ссылок для приема данных из сторонних сервисов. Этот инструмент называется Внешние запросы. Создать внешний запрос для приема данных можно в каталоге Внешние запросы. По умолчанию этот каталог находится в отделе Управление. Переходим в этот каталог и нажимаем кнопку Добавить:
Заполните поля как на скриншоте выше. Также у Внешнего запроса должен быть сценарий, который обрабатывает полученные данные. Сценарий указывается в поле Выполнить. Добавим новый сценарий. Для этого нажмите кнопку Добавить в «Сценарии»:
Появится окно создания записи сценария. Скачайте готовый файл сценария по ссылке ниже.
Нажмите кнопку Загрузить и выберите скачанный файл:
Нажмите на загруженный файл. У вас откроется схема сценария. В данной схеме нужно нажать на компонент УКАЖИТЕ ID КАТАЛОГА, указать в нем ID-каталога, который создали в предыдущем шаге и сохранить сам файл сценария:
Теперь сохраним запись сценария:
Также сохраним запись внешнего запроса:
Ссылка для приема данных подготовлена, она формируется следующим образом: [Домен]/api/webrequest/[URL-идентификатор], где: [Домен] - это Ваш домен системы Бипиум. Например: https://tilda-demo.bpium.ru/ [URL-идентификатор] - это значение, которое мы ввели в записи внешнего запроса в поле URL-идентификатор Для домена из примера полная ссылка будет следующая: https://tilda-demo.bpium.ru/api/webrequest/getRequest
3.4. Подключение вебхука на Tilda
Перейдем в настройки нашего сайта на Tilda. Нужно перейти в блок Формы и найти раздел Webhook:
Укажем адрес, созданный в предыдущем шаге и добавим этот Webhook:
После создания Webhook в Tilda будет отправлен тестовый запрос на указанный адрес. Проверить, что все действия выше проделаны правильно можно в каталоге Процессы. В данном каталоге должна быть одна запись со статусом Завершен:
3.5. Подключение вебхука к форме
Осталось только подключить созданный в Tilda Webhook к нужной нам форме. Для этого переходим к настройке блока с формой на нужной странице и включаем галочку: WEBHOOK: [НАШ АДРЕС]
Сохраняем изменения и публикуем страницу.
4. Тестирование
Перейдем на наш сайт, заполняем форму ввода данных и нажимаем кнопку Отправить
Заходим в Бипиум, открываем созданный нами каталог и проверяем, что создана новая запись с нашими, введенными на сайте, данными:
Возможная ошибка
Если после выполнения всех инструкций статьи возникает следующая ситуация:
запрос из Tilda успешно отправляется;
Бипиум принимает запрос;
создаётся новая запись;
но все (или некоторые) поля в записи остаются пустыми (см. скриншот ниже),
Такая проблема говорит о некорректном маппинге данных. Бипиум получил данные, но не смог их подставить. Проверьте соответствие заполненных ID полей. Важно учесть, что лишние пробелы до или после указанного текста в ID поля также нарушают работу маппинга данных.
Last updated