Форма в pop-up блоке

Форма в pop-up блоке#

{% hint style=»info» %} Данный раздел инструкции актуален для использования виджета с формами ввода данных, которые встроены в pop-up блок (например, BF502N: Popup: форма с множеством полей). Если вы хотите использовать виджет для форм, встроенных в основную часть страницы сайта, (например, BF203N: Форма с несколькими полями для ввода), перейдите в раздел «Форма на странице» {% endhint %}

На сайте Tilda в редакторе определите pop-up блок с формой, к которой должен быть привязан виджет подтверждения телефона. Форма должна иметь обязательное поле ввода телефона. Позднее нам понадобится ID данного pop-up блока – чтобы узнать его, перейдите в настройки блока:

Промотайте вниз открывшееся боковое меню и найдите Block id. Скопируйте его и сохраните отдельно для дальнейших действий.

Добавьте один блок HTML-код (T123) прямо под вашим pop-up блоком.

В результате вы увидите подобную структуру:

После этого перейдите в редактирование блока HTML-код и добавьте туда следующий код:

<script src="https://cdn.direct.i-dgtl.ru/VerifyWidget.umd.min.js"></script>
<link rel="stylesheet" href="https://cdn.direct.i-dgtl.ru/VerifyWidget.css" />

<script>
    window.VerifyWidget.tildaPrepare('FORM_ID', 'FORM_ID', {
        widgetId: 'WIDGET_ID',
        captchaSiteKey: 'CAPTCHA_SITE_KEY',
        apiKey: 'API_KEY',
    	windowed: true
        }, () => {}, () => {})
</script>

Вместо следующих параметров нужно указать ваши значения:

  • FORM_ID – идентификатор блока формы, в которой находится поле ввода номера телефона. Его нужно указать дважды.

  • WIDGET_ID – идентификатор виджета (из личного кабинета)

  • CAPTCHA_SITE_KEY – sitekey капчи

  • API_KEY – API-ключ для виджета (Tilda), созданный в личном кабинете

В итоге вы получите структуру следующего вида:

Теперь вы можете опубликовать страницу, чтобы применить изменения. С момента публикации пользователи, указывающие номер телефона, будут обязательно его подтверждать перед отправкой формы.