Форма на странице

Форма на странице#

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

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

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

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

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

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

<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', '#auth-widget', {
        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), созданный в личном кабинете

Во втором блоке добавьте следующий код:

<div id="auth-widget"></div>

{% hint style=»danger» %} Если вы планируете вызывать виджет из нескольких форм, то для каждого вызова:

  • во втором блоке вместо auth-widget должен быть прописан уникальный идентификатор (например, auth-widget-1, auth-widget-2 и т.д.)

  • в первом блоке нужно прописать уникальный идентификатор из второго блока

Таким образом, для каждой формы, из которой вызывается виджет, на месте «auth-widget» в обоих HTML-блоках нужно прописывать уникальную строку. {% endhint %}

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

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