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

## 1. Введение

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

<figure><img src="https://1283378397-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LACZmmM2xUWbZxyRr4s%2Fuploads%2FQ7uhhMCKcENVtSI21UUW%2Fimage.png?alt=media&#x26;token=477906c9-528b-409e-b4d3-de49ed4b3716" alt=""><figcaption></figcaption></figure>

Мы хотим, чтобы при нажатии кнопки **Отправить** введенные в форму данные сохранились в Бипиум.&#x20;

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

<figure><img src="https://1283378397-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LACZmmM2xUWbZxyRr4s%2Fuploads%2Fpbv1dDjNEdf34A9NF8qa%2FUntitled.jpg?alt=media&#x26;token=1075041c-e6cc-4281-bec1-17d09a01368c" alt=""><figcaption></figcaption></figure>

* Ваш сайт отправляет введенные пользователем в форме данные в Бипиум.
* Бипиум принимает запрос и запускает сценарий обработки полученных данных.
* На основе полученных данных в Бипиум создается новая запись в соответствующем каталоге.

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

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

Для передачи данных в Бипиум необходимо задать имена переменных для всех полей формы. Для нашего примера зададим следующие имена:

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

<figure><img src="https://1283378397-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LACZmmM2xUWbZxyRr4s%2Fuploads%2FkpuViUs3N8MWpRQyn91K%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202024-10-22%20195247.jpg?alt=media&#x26;token=d0286bd7-95b0-46b5-af60-813a43d06119" alt=""><figcaption><p>пример для поля <strong>Имя</strong></p></figcaption></figure>

### 3.2. Подготовка каталога для данных в Бипиум

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

* **Email** = ***Контакт*** с выбранным значением ***Электронная почта***
* **Телефон&#x20;*****=*** ***Контакт*** с выбранным значением ***Телефон***
* **Имя** = ***Текст***
* **Поле для ввода в одну строку** = ***Текст***
* **Поле для ввода в несколько строк** = ***Текст*** с выбранным значением ***Многострочный текст***
* **Выпадающий список** = ***Выбор значения*** или ***Статус***. Варианты ответа в Тильда - это элементы выбранного поля в Бипиум
* **Вопрос с вариантами ответа** = если **Вид ответа** - ***Один вариант ответа (радиокнопки)***, то ***Выбор значения*** или ***Статус***, если **Вид ответа** - ***Несколько вариантов ответа (галочки)***, то ***Набор галочек*** или ***Статус*** (с настройкой ***Можно выбрать несколько***)

{% hint style="info" %}
Варианты ответа для полей **Выпадающий список** и **Вопрос с вариантами ответа** в Tilda должны быть идентичными элементам соответствующих полей в Бипиум, включая регистр
{% endhint %}

* **Оценочная шкала** = ***Число***
* **Галочка** = ***Переключатель***
* **Дата** = ***Дата***

{% hint style="info" %}
Tilda не передает информацию о выбранном формате для поля типа **Дата**, из-за чего мы не сможем отличить формат **ДД-ММ-ГГГГ** от формата **ММ-ДД-ГГГГ** и поэтому рекомендуем выбирать либо **ДД-ММ-ГГГГ**, либо **ГГГГ-ММ-ДД**
{% endhint %}

* **Время** = ***Текст*** с выбранным значением ***Текст по маске*** и настройкой 11:11
* **Количество** = ***Число***
* **Ссылка** = ***Контакт*** с выбранным значением ***Сайт/ссылка***
* **Скрытое поле** = ***Текст***
* **Калькулятор** = ***Число***

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

<figure><img src="https://1283378397-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LACZmmM2xUWbZxyRr4s%2Fuploads%2FrjagkJLDtD3vkjymXqtc%2Ftest-work.bpium.ru_.png?alt=media&#x26;token=03c3d7a0-7307-445f-bb5c-dbe3aada41ff" alt=""><figcaption></figcaption></figure>

В свойствах каждого поля в поле **ID-поля** укажите имя переменной соответствующего поля, который мы задали в шаге 3.1. Важно сохранять регистры букв, в соответствии с указанием в Tilda. После указания текстового ID он сразу отображается слева от названия поля.\
Это позволит соотнести поля из Tilda с полями в Бипиум.&#x20;

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

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

В Бипиум есть возможность создания специальных ссылок для приема данных из сторонних сервисов. Этот инструмент называется [***Внешние запросы***](https://docs.bpium.ru/bpium-setup/systemcatalogs/upravlenie/weblisteners). Создать внешний запрос для приема данных можно в каталоге ***Внешние запросы***. По умолчанию этот каталог находится в отделе ***Управление.*** Переходим в этот каталог и нажимаем кнопку ***Добавить:***

<figure><img src="https://1283378397-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LACZmmM2xUWbZxyRr4s%2Fuploads%2FxdVSoG9NFMO3xFI1hx7C%2Fimage.png?alt=media&#x26;token=78c53a29-13d0-48ce-ab40-7ecd1a62ea3b" alt=""><figcaption></figcaption></figure>

Заполните поля как на скриншоте выше. \
Также у ***Внешнего запроса*** должен быть [сценарий](https://docs.bpium.ru/bpium-setup/processes/scripts), который обрабатывает полученные данные. Сценарий указывается в поле ***Выполнить.*** Добавим новый сценарий. Для этого нажмите кнопку ***Добавить в «Сценарии»:***

<figure><img src="https://1283378397-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LACZmmM2xUWbZxyRr4s%2Fuploads%2F64rUUmrTgWaAs11gVcr5%2Fimage.png?alt=media&#x26;token=1d031012-ddbd-4321-aecf-6428ed8038b0" alt="" width="563"><figcaption></figcaption></figure>

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

{% file src="<https://1283378397-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LACZmmM2xUWbZxyRr4s%2Fuploads%2FheuTfQ9uKL4Hle5Jf21O%2FGetRequest.bpmn?alt=media&token=79ab8974-21c0-4f8b-8313-24810cfb6f1c>" %}

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

<figure><img src="https://1283378397-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LACZmmM2xUWbZxyRr4s%2Fuploads%2F8tSqViCXnlpAO8ZK7bHn%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202024-10-22%20215518.jpg?alt=media&#x26;token=93562db3-3529-4b38-bc77-ff90c35ba496" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1283378397-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LACZmmM2xUWbZxyRr4s%2Fuploads%2F3F4ecEMzyKKLoKpMsyF8%2F%D0%9D%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B8_%D0%9D%D0%B0%D0%B7%D0%BD%D0%B0%D1%87%D0%B5%D0%BD%D0%B8%D0%B5_%D0%BF%D0%B5%D1%80%D0%B5%D0%BC%D0%B5%D0%BD%D0%BD%D1%8B%D1%85_1.jpg?alt=media&#x26;token=be3c7d51-4cb7-4afe-8761-dc6c1278e83b" alt=""><figcaption></figcaption></figure>

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

<div data-full-width="true"><figure><img src="https://1283378397-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LACZmmM2xUWbZxyRr4s%2Fuploads%2F0viA1L2gy2acJGb6rOac%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202024-10-21%20134351.png?alt=media&#x26;token=b397c31e-3146-478c-ae57-0774d4731c3f" alt="" width="563"><figcaption></figcaption></figure></div>

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

<figure><img src="https://1283378397-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LACZmmM2xUWbZxyRr4s%2Fuploads%2Fjn2OdaBl01TQD3NGVy20%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202024-10-21%20134504.png?alt=media&#x26;token=14bd6b58-498f-4cf9-ad22-b417c12efde9" alt="" width="563"><figcaption></figcaption></figure>

Ссылка для приема данных подготовлена, она формируется следующим образом:\
\&#xNAN;**\[Домен]/api/webrequest/\[URL-идентификатор]**, где:\
\&#xNAN;**\[Домен]** - это Ваш домен системы Бипиум. Например: <https://tilda-demo.bpium.ru/\\>
\&#xNAN;**\[URL-идентификатор]** - это значение, которое мы ввели в записи внешнего запроса в поле ***URL-идентификатор***\
Для домена из примера п*олная ссылка будет следующая:*\
*<https://tilda-demo.bpium.ru/api/webrequest/getRequest>*

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

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

<div><figure><img src="https://1283378397-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LACZmmM2xUWbZxyRr4s%2Fuploads%2F8pRRiwjb6O55QS5xVUQg%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202024-10-21%20154339.png?alt=media&#x26;token=1dc6da2f-8f1f-4984-b62f-a5e6ea6fe332" alt="" width="563"><figcaption></figcaption></figure> <figure><img src="https://1283378397-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LACZmmM2xUWbZxyRr4s%2Fuploads%2FSZvQAlzqsMXqCSbGcUpW%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202024-10-21%20154322.png?alt=media&#x26;token=bbec8b6a-3043-4082-9b9f-1d84869c9762" alt="" width="251"><figcaption></figcaption></figure></div>

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

<figure><img src="https://1283378397-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LACZmmM2xUWbZxyRr4s%2Fuploads%2FVBg8Ncq7rzaCZqFhaoHe%2Fimage.png?alt=media&#x26;token=91e5476f-e349-4c5d-ac15-e45301315f31" alt="" width="487"><figcaption></figcaption></figure>

После создания Webhook в Tilda будет отправлен тестовый запрос на указанный адрес. Проверить, что все действия выше проделаны правильно можно в каталоге [***Процессы***](https://docs.bpium.ru/bpium-setup/systemcatalogs/upravlenie/processes)***.*** В данном каталоге должна быть одна запись со статусом ***Завершен***:

<figure><img src="https://1283378397-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LACZmmM2xUWbZxyRr4s%2Fuploads%2F30WIHONGhY5AZCNWnbea%2Ftest-work.bpium.ru_%20(3).png?alt=media&#x26;token=8cab2a9e-978f-4fee-8870-597a3895cda5" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://1283378397-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LACZmmM2xUWbZxyRr4s%2Fuploads%2FlRYQVa4TWCQrMH0wHxGB%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202024-10-22%20221525.jpg?alt=media&#x26;token=e71b384e-ae1e-4cba-be8f-1e61fe05eacd" alt=""><figcaption></figcaption></figure>

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

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

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

<figure><img src="https://1283378397-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LACZmmM2xUWbZxyRr4s%2Fuploads%2FTWWJuQIeLhI3OAenrRR8%2Fimage.png?alt=media&#x26;token=56398caf-170d-4b4c-816e-849f08add97a" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1283378397-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LACZmmM2xUWbZxyRr4s%2Fuploads%2FvBXGtvyWSjYpFgNBCgWf%2Ftest-work.bpium.ru_%20(6).png?alt=media&#x26;token=b7396b9d-9b18-4d25-8d4b-fa97ebd06b70" alt=""><figcaption></figcaption></figure>

### Возможная ошибка

Если после выполнения всех инструкций статьи возникает следующая ситуация:

* запрос из Tilda успешно отправляется;
* Бипиум принимает запрос;
* создаётся новая запись;
* но все (или некоторые) поля в записи остаются пустыми (см. скриншот ниже),

<figure><img src="https://1283378397-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LACZmmM2xUWbZxyRr4s%2Fuploads%2FOmpxaOg52XNJu7TVdbqD%2Ftest-work.jpg?alt=media&#x26;token=568790d0-f3b4-40c8-a4cd-d2169f214fbf" alt=""><figcaption></figcaption></figure>

Такая проблема говорит о некорректном маппинге данных. Бипиум получил данные, но не смог их подставить. Проверьте соответствие заполненных ID полей. Важно учесть, что лишние пробелы до или после указанного текста в ID поля также нарушают работу маппинга данных.