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