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



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

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

<figure><img src="../../.gitbook/assets/image (26).png" alt=""><figcaption></figcaption></figure>

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

<figure><img src="../../.gitbook/assets/image (27).png" alt=""><figcaption></figcaption></figure>

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

<figure><img src="../../.gitbook/assets/image (21).png" alt="" width="563"><figcaption></figcaption></figure>

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

<figure><img src="../../.gitbook/assets/image (28).png" alt=""><figcaption></figcaption></figure>

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

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

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

<figure><img src="../../.gitbook/assets/image (30).png" alt=""><figcaption></figcaption></figure>

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