Як налаштувати кастомну форму попапу

За допомогою різних типів елементів ви можете створити попап, щоб збирати необхідні дані контактів та зберігати їх у змінних для подальшої сегментації аудиторії та персоналізації взаємодій.

У статті розглянемо, як створити та налаштувати такий попап.

Створіть новий попап або перейдіть до режиму редагування існуючого. Додайте елементи для збору даних та кнопку для надсилання форми. Ви також можете додати обкладинку та змінити текст.

Читайте детальніше: Як створити розумний попап.

Налаштуйте елемент для введення даних

Додати елемент Поле введення

За допомогою елемента Поле введення ви можете запитувати у користувача різні дані та зберігати їх у змінну.

Щоб ідентифікувати підписника і додати або оновити його дані, зібрані з інших елементів, вам потрібно додати поле введення з запитом email адреси. Ви також можете приховати поле, якщо є можливість передавати значення з вашої системи.

В розділі Елементи (Elements) натисніть + Додати елемент (+ Add element) та виберіть Поле введення (Entry field).

Якщо в попапі вже є поле, натисніть на нього.

Виберіть змінну

Натисніть на вміст поля Змінна (Variable) і виберіть, яку змінну зберігати значення. Ви можете вибрати існуючу змінну або створити нову.

Вкажіть назву поля

В полі Підказка всередині поля (Placeholder text) введіть текст, який допоможе користувачеві зрозуміти, що потрібно ввести. За замовчуванням у полі підставляється назва змінної.

Ви також можете додати додатковий заголовок поля, який відображатиметься над ним. Увімкніть перемикач Відображати заголовок (Display title) та введіть назву.

Налаштуйте передачу значень з браузера

Додатково, для зручності користувачів ви можете автоматично заповнювати поля попапа. Дані в попапах будуть додаватися через Local Storage, Cookies (для збирання з локального сховища в браузері користувача) або API (для збирання з вашої системи) і передаватися після надсилання форми.

В полі Підказка всередині поля (Placeholder text) натисніть {} та виберіть створену в налаштуваннях змінну.

Читайте детальніше: Як передавати користувацькі змінні.

Ви також можете приховати поля, якщо вони попередньо заповнені значенням змінних. Наприклад, якщо користувач вже реєструвався та у вас є необхідні дані, ви можете не вимагати ту ж інформацію повторно.

Налаштуйте подвійне підтвердження

Ви також можете активувати опцію Запитувати підтвердження підписки (Request subscription confirmation) — у такому разі підписник отримає лист підтвердження після заповнення поля із запитом адреси електронної пошти та надсилання форми. Дані SendPulse передаються тільки після підтвердження (метод double opt-in).

Виберіть лист зі списку створених у налаштуваннях інструментів підписки. Щоб додати повідомлення, яке відображатиметься після того, як користувач надішле форму, натисніть Налаштувати оповіщення (Set up the notification).

Встановіть обов'язковість поля

Якщо вам потрібно, щоб дані форми можна було надіслати лише після заповнення поля, позначте Зробити обов'язковим (Make required).

У такого поля біля заголовка з'явиться * – позначення, що поле є обов'язковим для заповнення.

Додайте елементи для вибору даних

Також ви можете збирати дані підписників, пропонуючи свої варіанти значень, а змінну записувати те, що вибрав підписник.

Наступні елементи підходять для збору даних із варіативністю вибору:

Елементи налаштовуються аналогічно елементу Поле введення.

Додатково потрібно буде настроїти поля з варіантами. В полі Варіант введіть значення, яке відображатиметься користувачам, та у полі Значення введіть значення, яке збережеться у змінну.

При додаванні кількох варіантів ви можете залишити поле позначки порожнім або відзначити їх за користувача, нагадуючи вибір. Наприклад, ви можете наперед відзначити поля, обов'язкові для заповнення.

Налаштуйте кнопку

У попапі з елементами, в яких ви запитуєте дані у користувача, обов'язково потрібно додати елемент Кнопка. Натискання на кнопку передає дані заповнених полів у розділ Контакти та, якщо ви налаштуєте відповідні дії, — в Email і CRM сервіси.

Введіть текст кнопки та виберіть дію за кліком на кнопку: Закрити модальне вікно (Close modal window) або Відкрити URL (Open URL). Якщо вибрано другий варіант, у наступному полі вставте посилання.

Ви можете також вибрати колір кнопки. За замовчуванням береться колір із вкладки Стиль попапа.

Додайте інші елементи

Також ви можете урізноманітнити попап та додати до неї інші елементи. Наприклад, щоб збирати підписників на чат-бота, додайте елемент Месенджер, а для додаткового тексту використовуйте елемент Текст.

Читайте детальніше: Як налаштувати елементи.

Налаштуйте порядок елементів

Щоб змінити порядок відображення полів або елементів, наведіть ліворуч на іконку, затисніть її та перетягніть у відповідне місце зверху або знизу.

Після того як закінчили налаштовувати дизайн та елементи форми, натисніть Далі.

Налаштуйте зовнішній вигляд

Ви також маєте можливість налаштувати розмір кожного поля. В полі Розмір (Size) виберіть опції: малий (S), середній (M) і великий (L).

Також стилі можна застосувати до всіх інших параметрів елементів у вкладці Стиль.

Продовжте налаштування

Після того, як налаштовували дизайн попапа, натисніть Далі (Next).

У вкладці Умови відображення (Display conditions) виберіть сценарій показу віджету.

У вкладці Збереження даних (Data saving) виберіть, де зберігати дані підписників в інших сервісах.

Коли налаштуєте попап, натисніть Зберегти та опублікувати (Save and publish) або Зберегти та закрити.

Після створення в секції Попапи ви можете переглянути зовнішній вигляд попапа, відстежувати статистику та відредагувати будь-яке налаштування.

Оновлено: 12.03.2025