Віджет Форма в конструкторі сайтів
У конструкторі лендингів SendPulse ви можете додати форму підписки, щоб збирати дані відвідувачів сайту та підписувати їх на розсилки або створювати угоди.
Додайте елемент Форма
Додайте віджет Форма (Form) у потрібну частину шаблону.
Праворуч відкриється панель, в якій ви можете налаштувати віджет.
Виберіть, куди зберігати контакти
Ви можете вибрати, куди зберігати нових підписників для подальшої роботи з ними.
Створення угоди та контактів у CRM
Виберіть, які елементи автоматично створювати в розділі CRM під час відправки форми:
| Створювати тільки контакт (Create only contact) | У вкладку Контакти буде додана картка контакту*. |
| Створювати контакт й угоду (Create contact and deal) |
У вкладку Угоди буде додана картка угоди*, а також картка контакту у вкладку Контакти. Налаштуйте, як зберігати угоди:
|
*У картку контакту та угоди додається коментар з інформацією про джерело, місце, пристрій та браузер відвідувача.
Щоб зберігати контакти з певними тегами CRM, активуйте опцію Призначати тег контакту (Assign tag to a contact) та виберіть теги. У списку доступні вже створені теги з усіх воронок та розділів CRM.
Також ви можете налаштувати передачу UTM-міток до контактів в CRM, якщо відвідувач перейшов на сайт за посиланням з міткою та заповнив форму.
Створення контактів у адресній книзі
Увімкніть опцію збереження контактів до адресної книги, щоб надалі надсилати Email розсилки.
Виберіть книгу, до якої додаватимуться нові контакти. Відповідність полів ви можете вибрати в налаштуваннях поля форми.
Додавання підписників в чат-бот
Увімкніть опцію Зберігати контакти в аудиторію чат-бота (Add to chatbot audience). Для налаштування кнопки натисніть на значок олівця. Виберіть канал — WhatsApp, Telegram, Instagram, Viber чи Messenger, та введіть назву кнопки. У полі Підписувати на (SUbscribe to) виберіть, на який підписувати та ланцюжок, який запускати після підписки.
Ви можете додати максимум 4 кнопки різних ботів.
Відповідність полів ви можете вибрати в налаштуваннях поля форми.
Налаштуйте поля форми
Виберіть вигляд форми
Ви можете обрати, як форма відображається на сторінці. У налаштуваннях віджета форми виберіть вигляд у розділі Зовнішній вигляд (View).
Доступні такі варіанти:
| Вбудована форма (Static form) | Усі поля форми відображаються безпосередньо на сторінці в одному блоці. |
| Модальне вікно (Modal form) | Усі поля форми відображаються в модальному вікні.
Відвідувачі натискають кнопку на сторінці, щоб відкрити модальне вікно з формою. |
Якщо вибрати варіант Модальне вікно (Modal form), можна увімкнути перемикач Двоетапна форма (Two-step form). Форму буде розділено на два етапи.
На першому етапі відображається компактний блок з одним полем введення та кнопкою — наприклад, для введення адреси електронної пошти. На другому етапі відкривається модальне вікно з рештою полів форми.
Після увімкнення Двоетапної форми (Two-step form) введіть заголовок модального вікна в полі Заголовок форми (Form title).
Двоетапна форма економить місце та зменшує кількість полів, що відображаються одночасно.
Додавання полей
Додайте нові поля форми або налаштуйте існуючі, натиснувши на іконку олівця.
Зверніть увагу, що поле Email обов'язкове — його не можна видалити.
Виберіть тип поля та вкажіть його назву.
Ви також можете сховати назви полів у стилях полів.
Введіть підказку для поля у плейсхолдері.
В полі введення типу Телефон ви можете додати динамічну маску для номерів. Тоді форма визначатиме за IP-адресою країну, де знаходиться відвідувач, і буде підставляти йому відповідний код. Також відвідувач зможе вибрати інший код з випадного списку.
Перейдіть у налаштування поля та активуйте перемикач Використовувати динамічну маску (Use dynamic mask).
Налаштування співвідношення полів
За замовчуванням всі контакти зберігаються в CRM. Щоб зберігати дані в змінну іншого сервісу, активуйте відповідні налаштування.
Виберіть, в якій змінній зберігати значення поля. Ви можете вибирати вже створені змінні у відповідному сервісі:
- CRM для контакту та угод.
- Email в адресні книги.
- Чат-боти в аудиторію чат-бота.
Якщо у списку немає потрібної змінної, створіть її у відповідній адресній книзі або аудиторії чат-бота. Якщо немає поля в CRM — створіть у налаштуваннях відповідної воронки та контактів.
Значення полів Email та Телефон (Phone) зберігаються у стандартних системних змінних емейла та телефону.
Позначте, чи є поле обов'язковим. Якщо поле обов'язкове, дані користувача не надішлються, доки він не заповнить усі обов'язкові поля.
Налаштуйте стиль полів
Щоб налаштувати поля форми, у розділі Зовнішній вигляд (View) натисніть Стилі полів (Field styles).
Вбудована форма
У режимі перегляду Вбудована форма (Static form) можна налаштувати поля форми за допомогою таких параметрів:
| Назви (Names) | Увімкніть, щоб показувати назви полів над полями введення. |
| Колір назв (Name color) | Оберіть колір назви поля. |
| Розташування (Alignment) | Оберіть вирівнювання поля. |
| Зовнішній вигляд (Appearance) | Оберіть стиль поля: заповнене або з рамкою. |
| Колір тексту в полі (Input field text color) | Оберіть колір тексту, який відвідувачі вводять у полях форми. |
| Колір фону (Background color) | Оберіть колір заливки полів. |
| Скруглення (Rounding) | Задайте радіус заокруглення в пікселях.
Застосовується до полів з рамкою. |
| Колір рамки (Border color) | Оберіть колір рамки поля. |
| Розмір (Size) | Оберіть розмір поля: S, M або L. |
Модальне вікно
Стилі полів у режимі перегляду Модальне вікно (Modal form) містять додаткові налаштування для самого модального вікна.
Доступні такі параметри модального вікна:
| Фон модального вікна (Modal window background) | Оберіть колір фону модального вікна. |
| Скруглення (Rounding) | Задайте радіус заокруглення кутів модального вікна в пікселях. |
| Внутрішній відступ (Inner padding) | Задайте розмір внутрішнього відступу модального вікна в пікселях. |
Налаштуйте поля форми в модальному вікні:
| Колір тексту в формі (Form texts color) | Оберіть колір заголовка форми та інших текстових елементів у модальному вікні. |
| Назви (Names) | Увімкніть, щоб показувати назви полів над полями введення. |
| Колір назв (Name color) | Оберіть колір назви поля. |
| Зовнішній вигляд (Appearance) | Оберіть стиль поля: заповнене або з рамкою. |
| Колір тексту в полі (Input field text color) | Оберіть колір тексту, який відвідувачі вводять у полях форми. |
| Колір фону (Background color) | Оберіть колір заливки полів. |
| Скруглення (Rounding) | Задайте радіус заокруглення в пікселях. |
| Колір рамки (Border color) | Оберіть колір рамки поля. |
| Розмір (Size) | Оберіть розмір поля: S, M або L. |
Якщо перемикач Двоетапна форма (Two-step form) увімкнено, стилі полів розділяються на два розділи: Вбудована форма (Static form) — для полів на сторінці та Модальне вікно (Modal form) — для полів у модальному вікні. Це дає змогу налаштовувати їх незалежно.
Налаштуйте кнопку
У режимі перегляду Вбудована форма (Static form) є одна кнопка форми. У режимі перегляду Модальне вікно (Modal form) є дві кнопки:
| Кнопка форми | Відображається на сторінці та відкриває модальне вікно при натисканні. |
| Кнопка у модальному вікні | Відображається в модальному вікні та надсилає форму при натисканні. |
У полі Кнопка форми (Form button) натисніть іконку олівця поруч із назвою кнопки, щоб налаштувати її. Доступні такі параметри:
| Текст (Text) | Введіть підпис кнопки. |
| Стиль (Style) | Оберіть стиль кнопки: Основний (Primary), Вторинний (Secondary) або Налаштований (Custom).
Оберіть розмір кнопки: S, M або L. |
| Ширина (Width) | Оберіть ширину кнопки: Авто (Auto), На всю ширину контейнера (Full width of the container) або Фіксована (Fixed). |
| Додати іконку (Add icon) | Увімкніть, щоб додати іконку до кнопки. Оберіть положення іконки: перед текстом, після тексту або по центру над текстом. |
| Додатковий ефект (Additional effect) | Увімкніть, щоб додати анімаційний ефект до кнопки.
У полі Умова (Condition) оберіть, коли спрацьовує ефект: По наведенню (Hover) або Завжди (Static). У полі Ефект (Effect) оберіть тип анімації: Bounce, Shake, Decrease або Increase. |
| Тінь (Shadow) | Увімкніть, щоб додати тінь до кнопки. Задайте параметри тіні: Зміщення X (Offset X), Зміщення Y (Offset Y), Розмитість (Blur), Розмір (Spread) у пікселях та Колір (Color). |
Налаштуйте додаткові можливості
Ви можете керувати поведінкою форми після відправки, обробкою даних контактів і рівнем захисту від зловживань. Ці опції допомагають налаштувати взаємодію з відвідувачами сайту, підтримувати актуальність даних у CRM та підвищити безпеку форм. в Для цього перейдіть в Додаткові налаштування форми (Additional form settings).
Нижче розглянемо доступні додаткові можливості та принципи їх використання.
| Дія після підписки (Action after submitinng) |
Використовується для налаштування сторінки після відправки форми. Ви можете показати повідомлення або перенаправити відвідувача на іншу сторінку сайту. Читайте докладніше: Налаштуйте сторінку після відправки форми. |
| Перезаписувати дані контакту в CRM під час повторного надсилання форми (Overwrite CRM contact data after form resubmitting) |
Використовується для наявних контактів у SendPulse CRM — якщо контакт відправить форму, його дані будуть перезаписані. Активуйте перемикач. |
| Дозволяти відвідувачам вводити тільки корпоративні email адреси (Require visitors to enter corporate email addresses only) |
Використовується для обмеження введення email-адрес у формах лише корпоративними доменами. Активуйте перемикач. Після активації адреси з публічних поштових сервісів (наприклад, gmail.com, yahoo.com, hotmail.com, outlook.com) не проходять валідацію та не відправляються. |
| Показувати CAPTCHA (Show CAPTCHA) |
Використовується для захисту сайту і уникнення автоматичного заповнення форм ботами. Виберіть потрібний ліміт: 10, 100 або 1000. За замовчуванням вказаний ліміт 100. Це означає, що CAPTCHA з'явиться, якщо відвідувач надішле 100 форм з однієї IP-адреси протягом 10 хвилин. Читайте докладніше: Як налаштувати CAPTCHA у формі підписки. |
Налаштуйте аналітику
Ви можете налаштувати передачу цілей з форми до подій Google Analytics та Facebook Pixel. Натисніть Налаштувати аналітику (Analytics settings).
Активуйте потрібний перемикач: Передавати ціль у Google Analytics (Transfer the goal to Google Analytics) чи Передавати ціль у піксель Facebook (Transfer the goal to the Facebook pixel).
Для активації передачі даних, в налаштуваннях сайту повинні бути додані коди пікселя Facebook та Google Analytics.
Читайте докладніше: Як підключити Google Analytics до сайту та Як підключити піксель Facebook до сайту.
Якщо ви активували перемикач Передавати ціль у Google Analytics, введіть дані для полів Категорія (Category), Дія (Action), Ярлик (Label) — ці параметри будуть передаватися до аналітики у розділі Події.
Якщо ви перемикач Передавати ціль у піксель Facebook (Transfer the goal to the Facebook pixel). Автоматично буде сформована подія Lead, яку ви зможете побачити в Events Manager вашого бізнес-акаунту Facebook.
Оновлено: 22.12.2025
або