Прием данных с формы Tilda

1. Введение

КОСКО BPM позволяет принимать и обрабатывать данные из форм сайта на Tilda.
Например, у нас есть сайт созданный на Tilda с формой обратной связи.

Мы хотим, чтобы при нажатии кнопки Отправить, введенные в форму данные сохранились в КОСКО BPM.

2. Принцип работы

• Ваш сайт отправляет введенные пользователем в форме данные в КОСКО BPM

• КОСКО BPM принимает запрос и запускает сценарий обработки полученных данных

• На основе полученных данных в КОСКО BPM создается новая запись в соответствующем каталоге

3. Реализация

3.1. Подготовка полей формы в Tilda

Для того, чтобы передавать данные в КОСКО BPM мы должны задать имена переменных для всех полей, которые есть на нашей форме. Для нашего примера зададим следующие имена:

Имя - name
Эл. почта - email
Телефон - phone
Чем мы можем помочь? - comment

3.2. Подготовка каталога для данных в КОСКО BPM

Для того, чтобы принимать данные из сайта, в КОСКО BPM необходимо подготовить каталог, куда мы будем сохранять отправленные данные. Типы полей в КОСКО BPM и Tilda отличаются, поэтому мы подготовили список соответствия популярных полей Tilda к полям в КОСКО BPM:

• Email = Контакт с выбранным значением Электронная почта

• Телефон = Контакт с выбранным значением Телефон

• Имя = Текст

• Поле для ввода в одну строку = Текст

• Поле для ввода в несколько строк = Текст с выбранным значением Многострочный текст

• Выпадающий список = Выбор значения или Статус. Варианты ответа в Тильда - это элементы выбранного поля в КОСКО BPM

• Вопрос с вариантами ответа = если Вид ответа - Один вариант ответа (радиокнопки), то Выбор значения или Статус, если Вид ответа - Несколько вариантов ответа (галочки), то Набор галочек или Статус (с настройкой Можно выбрать несколько)

Варианты ответа для полей Выпадающий список и Вопрос с вариантами ответа в Tilda должны быть идентичными элементам соответствующих полей в КОСКО BPM, включая регистр

• Оценочная шкала = Число

• Галочка = Переключатель

• Дата = Дата

Tilda не передает информацию о выбранном формате для поля типа Дата, из-за чего мы не сможем отличить формат ДД-ММ-ГГГГ от формата ММ-ДД-ГГГГ и поэтому рекомендуем выбирать либо ДД-ММ-ГГГГ, либо ГГГГ-ММ-ДД

• Время = Текст с выбранным значением Текст по маске и настройкой 11:11

• Количество = Число

• Ссылка = Контакт с выбранным значением Сайт/ссылка

• Скрытое поле = Текст

• Калькулятор = Число

Создадим в КОСКО BPM новый каталог и добавим такие же поля, которые у нас есть на нашем сайте, в соответствии со списком соответствия выше:

В свойствах каждого поля в Служебных заметках укажите имя переменной соответствующего поля, который мы задали в шаге 3.1.
Это позволит соотнести поля из Tilda с полями в КОСКО BPM.

Когда все поля добавлены, сохраните каталог, нажав соответствующую кнопку в правом верхнем углу. Посмотрите ID созданного каталога: он будет указан в адресной строке после /catalog/
Например, если адрес выглядит так: https://tilda-demo.isup.ru/#/section/2/catalog/16/view/0/records значит ID-каталога 16. Запомните этот ID - он понадобится нам в следующем шаге.

3.3. Подготовка инструмента приема данных

В КОСКО BPM есть возможность создания специальных ссылок для приема данных из сторонних сервисов. Этот инструмент называется Внешние запросы. Создать внешний запрос для приема данных можно в каталоге Внешние запросы. По умолчанию этот каталог находится в отделе Управление. Переходим в этот каталог и нажимаем кнопку Добавить:

Заполните поля как на скриншоте выше.
Также у Внешнего запроса должен быть сценарий, который обрабатывает полученные данные. Сценарий указывается в поле Выполнить. Добавим новый сценарий. Для этого нажмите кнопку Добавить в «Сценарии»:

Появится окно создания записи сценария. Скачайте готовый файл сценария по ссылке ниже.

Нажмите кнопку Загрузить и выберите скачанный файл:

Нажмите на загруженный файл. У вас откроется схема сценария. В данной схеме нужно нажать на компонент УКАЖИТЕ ID КАТАЛОГА, указать в нем ID-каталога, который создали в предыдущем шаге и сохранить сам файл сценария:

Теперь сохраним запись сценария:

Также сохраним запись внешнего запроса:

Ссылка для приема данных подготовлена, она формируется следующим образом:
[Домен]/api/webrequest/[URL-идентификатор], где:
[Домен] - это Ваш домен системы КОСКО BPM. Например: https://tilda-demo.isup.ru/
[URL-идентификатор] - это значение, которое мы ввели в записи внешнего запроса в поле URL-идентификатор
Для домена из примера полная ссылка будет следующая:
https://tilda-demo.isup.ru/api/webrequest/getRequest

3.4. Подключение вебхука на Tilda

Перейдем в настройки нашего сайта на Tilda. Нужно перейти в блок Формы и найти раздел Webhook:

Укажем адрес, созданный в предыдущем шаге и добавим этот Webhook:

После создания Webhook'а в Tilda, будет отправлен тестовый запрос на указанный адрес. Проверить, что все действия выше проделаны правильно можно в каталоге Процессы. В данном каталоге должна быть одна запись со статусом Завершен:

В то же время, в нашем созданном каталоге под данные из сайта также должна появиться одна пустая запись без данных:

3.5. Подключение вебхука к форме

Осталось только подключить созданный в Tilda Webhook к нужной нам форме. Для этого переходим к настройке блока с формой на нужной странице и включаем галочку: WEBHOOK: [НАШ АДРЕС]

Сохраняем изменения и публикуем страницу.

4. Тестирование

Перейдем на наш сайт, заполняем форму ввода данных и нажимаем кнопку Отправить

Заходим в КОСКО BPM, открываем созданный нами каталог и проверяем, что создана новая запись с нашими введенными на сайте данными: