Як створити мультиканальну форму підписки
За допомогою конструктора ви можете створити форму підписки та розмістити її на сторінці вашого сайту або блогу, щоб зібрати базу підписників. Поля вводу, чекбокси, радіокнопки, випадні списки, медійні елементи та багато іншого допоможуть зробити вашу форму підписки більш професійною.
Основні переваги блочного редактора:
- потрібний елемент макета можна додати до форми підписки, перетягнувши його за допомогою миші;
- кожен елемент можна гнучко редагувати, змінюючи колір, стиль, розмір та інші параметри;
- вам не потрібно мати спеціальні знання та вміти працювати з HTML-кодом, щоб створити ефективну та помітну форму підписки.
У статті розглянемо, як створити мультиканальну форму підписки за допомогою блочного конструктора форм.
Створіть форму підписки
Перейдіть до розділу Форми підписки (Subscription forms) та натисніть Створити нову форму (Create subscription form).
Виберіть вид форми
Виберіть варіант початкової структури шаблону — вони відрізняються початковим набором елементів та способом розміщення на сторінці.
| Вбудована форма (Embedded) | Використовується для додавання форми підписки в найзручніше фіксоване місце вашого сайту. |
| Попап-вікно (Pop-up) | Дає змогу налаштувати вигулькове вікно, яке покажеться користувачеві за певної умови. |
| Плаваюча (Floating) | Показуватиметься в одному місці під час прокручування сторінки користувачем. |
| Фіксована (Fixed) | Дає змогу закріпити місцезнаходження в хедері, в лівій (правій) колонці або в підвалі сайту. |
Ви також можете вибрати готову форму та перейти до блочного конструктора форми для її редагування. Якщо вам потрібно додати свої скрипти та стилі, виберіть Отримати HTML код без стилів (Get HTML code without styles).
Виберіть адресну книгу
Виберіть адресні книги, в яких будуть зберігатися контакти з даними після відправлення форми. Ви можете вибрати зі списку наявних або створити нові. За необхідності можна вибрати кілька книг.
Далі натисніть До редактора (Go to builder).
Елементи форми підписки
У редакторі ліворуч ви знайдете елементи, які можна додавати. По центру розташовується шаблон форми, який ви редагуватимете.
У верхньому лівому кутку конструктора є іконка швидкого додавання полів. Тут зібрані найпопулярніші елементи, потрібні під час створення форми.
У правій частині екрана розгортається вкладка Елемент (Element) для налаштування кожного з перелічених вище елементів, а також вкладка Дизайн (Design) для налаштування загального дизайну форми підписки. Щоб налаштувати елемент, перетягніть його з панелі ліворуч шаблону форми.
Поле вводу
За допомогою цього елемента можна додати поля у форму підписки. Налаштуйте їх за допомогою таких параметрів:
| Назва поля введення (Input field label) | Введіть назву поля, яка буде показуватися над полем вводу. Необов'язкове поле. |
| Підказка всередині поля (Placeholder) | Додайте назву підказки, що показується як текст світлішого кольору всередині поля. Необовʼязкове поле. |
| Зв'язати зі змінною (Bind to variable) | Виберіть з випадного списку, в яку змінну адресної книги зберігати значення. |
| Змінна контакту в CRM (Contact variable in CRM) | Якщо в опціях форми активовано перемикач Додавати підписників в CRM, виберіть з випадного списку, в яку змінну контакту CRM зберігати значення. |
| Зробити обов'язковим (Set as required) | Під час активації блокуються дії користувача, поки поле не буде заповнене. |
Чекбокс
Цей елемент дає змогу надати користувачеві вибір декількох варіантів зі списку. Наприклад, під час оформлення підписки користувач може зробити кілька позначок про те, що він хоче отримувати від вашої компанії: новини, знижки, конкурси, запрошення на події.
Налаштуйте чекбокс за допомогою таких параметрів:
| Назва чекбокса (Checkbox label) | Введіть текст чекбокса. |
| Зв'язати зі змінною (Bind to variable) | Виберіть з випадного списку, в яку змінну адресної книги зберігати значення. |
| Зробити обов'язковим (Set as required) | Під час активації блокуються дії користувача, поки поле не буде заповнене. |
Якщо чекбокс відмічений, у вибрану змінну передається значення yes, якщо не відзначений — no. Отримана інформація потрапляє до змінної, яку ви прив'язали до цього чекбокса. Не забудьте створити її заздалегідь в адресній книзі.
Радіокнопки
Цей елемент використовується у формі підписки для вибору одного з декількох варіантів. Налаштуйте його за допомогою таких параметрів:
| Назва групи радіокнопок (Label of the radio buttons group) | Введіть текст, що показуватиметься над групою радіокнопок. |
| Зв'язати зі змінною (Bind to variable) | Виберіть з випадного списку, в яку змінну адресної книги зберігати значення. |
| Список опцій (Options list) | Введіть назви опцій та відповідні значення, що передаватимуться до змінної. |
Випадаючий список
Цей елемент використовується у формі підписки для вибору одного з декількох варіантів, представленого у більш компактній формі, ніж радіокнопки. Налаштуйте список за допомогою таких параметрів:
| Назва групи випадаючого списку (Label of the drop-down list) | Введіть текст, що показуватиметься над випадним списком. |
| Зв'язати зі змінною (Bind to variable) | Виберіть з випадного списку, в яку змінну адресної книги зберігати значення. |
| Список опцій (Options list) | Введіть назви опцій та відповідні значення, що передаватимуться до змінної. |
Месенджер
Цей елемент дає змогу додати кнопки підписки на вашу соціальну мережу у форму. Щоб додати нову кнопку для підписки на соцмережу, натисніть Додати кнопку (Add a button), виберіть соцмережу та введіть посилання на вашу сторінку. Задайте розташування кнопок: по центру, праворуч або ліворуч.
Для Facebook Messenger та Telegram ви можете вказати чат-бота, на якого підпишеться клієнт після натискання на кнопку. Виберіть чат-бота в випадному меню і ланцюжок, який запуститься після підписки.
Текст
Це елемент дає змогу додати тексти до форми за допомогою елемента Текст. У вкладці Елемент можна вибрати Шрифт (Font), визначити відстань між рядками тексту за допомогою значення Висота рядка (Line height), а також відформатувати текст:
| Стиль тексту | Виберіть стиль тексту: жирний або курсив. |
| Колір тексту | Виберіть колір тексту. |
| Вставити/редагувати посилання | Додайте посилання до виділеного тексту або введіть текст для показу. Введіть текст, який з’являтиметься під час наведення курсору на посилання. А також виберіть, де розгортатиметься посилання: у поточній чи новій вкладці. |
| Вирівнювання | Виберіть вирівнювання тексту: у центрі, ліворуч, або праворуч. |
| Розмір шрифта | Виберіть розмір тексту. |
| Код | Розгортає вихідний код текстового блоку, який ви можете відредагувати. |
| Зміна орієнтації тексту | Налаштуйте орієнтацію тексту: справа наліво або зліва направо. |
Картинка
Цей елемент дає змогу вставляти картинки за допомогою елемента Картинка (Image). У вкладці Елемент (Element) вкажіть розташування по центру, праворуч або ліворуч.
Роздільник
Елемент Роздільник (Spacer) дає змогу додати трохи вільного простору у форму. У вкладці Елемент (Element) встановіть роздільнику потрібну висоту.
Налаштування дизайну форми підписки
У конструкторі ви можете налаштувати загальний вигляд форми підписки: задати їй фон, округлити кути, вибрати ширину та багато іншого. Налаштуйте стиль блоку (Block style):
| Розташування полів (Field Orientation) | Розташуйте форму підписки вертикально або горизонтально. |
| На всю ширину (Full Width) | Увімкніть цей перемикач, щоб розтягнути тло форми підписки на всю ширину сайту. |
| Ширина форми (Width) | Регулюйте ширину форми від 200 до 960 пікселів. |
| Фон форми (Form background) | Встановіть колір та прозорість фону форми, що підходить вашому сайту. |
| Фонова картинка (Background image) | Увімкніть цей перемикач, щоб встановити фонове зображення форми. Підтримуються зображення з розширенням до 496х600 пікселів, та розміром 102 Кбайт. |
| Контур (Form border) | Встановіть товщину та колір межі форми підписки. |
| Внутрішній відступ (Inner padding) | Налаштуйте відступи від зовнішньої межі елемента до змісту. |
| Заокруглення кутів (Rounded corners) | Налаштуйте або введіть радіус скруглення кутів форми підписки. |
| Шрифт (Font) | Виберіть загальний шрифт для всіх текстових елементів форми підписки. |
| Фон підкладки (Background) | Налаштуйте колір і прозорість фону, який покажеться за вікном вашої форми.
Доступно лише для попап-вікна. |
| Ефект показу (Show effect) | Виберіть анімацію появи форми підписки: Встряска, Збільшення, Зменшення, Затухання, Виїзд зверху/справа/знизу/зліва та Прокрутка.
Доступно лише для попап-вікна. |
У розділі Поля введення та назви (Input fields and labels) налаштуйте загальний вигляд елементів форми підписки.
| Розмір полів (Field Size) | Виберіть загальний розмір полів та елементів: S — малий, M — середній, L — великий. |
| Фон полів (Field background) | Виберіть, якого кольору буде фон полів введення. |
| Межі (Borders) | Встановіть товщину та колір контуру полів форми підписки. |
| Заокруглення кутів (Rounded corners) | Налаштуйте або введіть радіус скруглення кутів полів форми. |
| Положення назв полів (Labels position) | Виберіть розташування назв полів із випадного списку: Зверху поля, Зліва від поля, Всередині поля.
Тут також можна вказати розмір шрифту до назви полів та його колір, відформатувати його жирним та курсивом. |
| Показувати логотип SendPulse (Show SendPulse logo) | Увімкніть цей перемикач, щоб логотип SendPulse показувався на формі підписки. |
| Розташування (Alignment) | Виберіть розташування логотипу SendPulse на формі підписки: ліворуч, у центрі або праворуч. |
Налаштування опцій форми
Натисніть Опції форми (Form options), щоб перейти до додаткових налаштувань форми підписки.
Дані та тип форми
У цьому розділі налаштуйте передачу даних та тип форми підписки:
| Назва форми (Form name) | Введіть назву форми підписки, яка буде показуватися у вашому списку форм |
| Адресна книга (Mailing list) | Виберіть або замініть адресні книги, до яких будуть надходити дані з форми підписки. |
| Додавати підписників в CRM (Add subscribers to CRM) | Увімкніть цей перемикач, щоб автоматично передавати дані підписників до списку контактів у CRM. |
| Назначити тег(и) (Set tag(s)) | Додайте мітки до цієї форми підписки, щоб позначити та легше знаходити її у списку форм. |
| Сайти розміщення (Websites for this form) | Вкажіть точну назву сайта домена, на якому ви розміщуєте форму підписки. Наприклад, якщо ваш сайт розташований на домені www.example.com, вам потрібно вказувати домен із www.
Якщо ви вкажете невірний домен, користувач не зможе підписатися через вашу форму. |
| Відповідає GDPR (This form is GDPR compliant) | Увімкніть цей перемикач, щоб додати змінні для передачі згоди на обробку персональних даних та використовувати їх у формі. |
| Мова повідомлень і помилок (Error and notifications language) | Виберіть мову, якою показуватиметься текст помилок та повідомлень. |
| Тип форми | Виберіть варіант структури шаблону: Вбудована (Embedded), Попап (Pop-up) або Плаваюча (Floating). |
| Умова показу (Display condition) | Виберіть, як буде показуватися форма підписки у вас на сайті. Можна налаштувати час, через який після входу користувача на сайт з'явиться форма.
Опція Приховати на мобільному (Hide on mobile) дає змогу прибрати показ форми підписки користувачам, які зайшли на сайт із мобільного пристрою. |
| Повторний показ (Show again) | Встановіть інтервал показу форми у декілька днів, щоб менше показувати їх тим користувачам, які закрили форму, не підписавшись |
| Показувати на сторінках (Show on pages) | Встановіть форму підписки на всіх сторінках сайту або скасуйте показ на певних сторінках. |
Повідомлення про підписку
Повідомлення про підписку — це повідомлення, яке з'явиться після того, як користувач заповнить форму підписки та натисне кнопку «Підписатися».
Ви можете відредагувати заголовок повідомлення, а текст повідомлення — відредагувати та відформатувати:
| Стиль тексту | Виберіть стилістичні властивості тексту: жирний або курсив. |
| Колір тексту | Виберіть колір тексту. |
| Вставити/редагувати посилання | Додайте посилання до виділеного тексту або введіть текст для показу. Введіть текст, який з’являтиметься під час наведення курсору на посилання.Також виберіть, де розгортатиметься посилання: у поточній чи новій вкладці. |
| Вирівнювання | Виберіть вирівнювання тексту: у центрі, ліворуч, або праворуч. |
| Розмір шрифта | Виберіть розмір тексту. |
| Код | Розгортає вихідний код текстового блоку, який ви можете відредагувати. |
| Зміна орієнтації тексту | Налаштуйте орієнтацію тексту: справа наліво або зліва направо. |
Підтвердження підписки
Якщо увімкнено опцію Відправляти лист підтвердження (Enable double opt-in), після підписки на сайті користувач отримує лист із проханням підтвердити підписку.
Нижче на панелі можна змінити адресу відправника, тему цього листа, а також відредагувати та відформатувати текст листа за допомогою редактора.
Для адреси відправника листа-підтвердження у формі підписки слід зазначати пошту на корпоративному домені. Це важливо для проходження спам-фільтрів та впізнаваності відправника.
Також ви можете налаштувати персоналізацію у листах підтвердження підписки. Для цього в текст листа вставте змінні у вигляді %ім'я% або {{ім'я}}.
Додані до листа підтвердження змінні мають бути створені в адресній книзі та пов'язані з полями форми підписки.
Сторінка підтвердження
Це сторінка, на яку перенаправляється новий підписник після кліку на посилання підтвердження. Виберіть із варіантів: Перенаправити на URL або Показати стандартну сторінку з повідомленням. Якщо ви перенаправляєте підписника на свій сайт, вкажіть посилання.
Ви також можете налаштувати індивідуальну сторінку про успішну підписку. Для цього перейдіть до меню Форми підписки (Subscription forms) > Сторінки підтвердження підписки (Subscription confirmation pages) > Нова сторінка підтвердження.
Аналітика і статистика
У розділі Аналітика і статистика ви можете увімкнути відстеження підписок із сайту в Google Analytics та активувати збір додаткових міток.
Вставка коду форми на сайт
Для розміщення форми підписки на сайті вам може знадобитися її код. Щоб отримати код форми, натисніть кнопку опцій праворуч від Зберегти (Save) та виберіть Зберегти і отримати код (Save and get code).
Щоб відправити форму, ваш сайт повинен містити заголовок Referer, який вказує на джерело запиту.
Код необхідно вставити у вихідний код вашого сайту між тегами <body> . Якщо ваш сайт створено на платформі WordPress, ви можете додати форму підписки за допомогою плагіна для WordPress від SendPulse. Ще один спосіб вставити код форми на сайт — використовувати Google Tag Manager.
Перегляд списку підписників
Ви можете переглянути всіх, хто підписався, у вибраній адресній книзі за датою підписки та змінною з назвою вашої форми. Якщо ви вибрали підписку методом Double opt-in і користувач не підтвердив підписку через пошту, такий користувач не буде доданий до адресної книги і ви не зможете його відстежити.
Валідація підписників через reCaptcha
Captcha захистить вашу адресну книгу від попадання до неї фейкових підписників, розсилки для яких можуть призвести до потрапляння ваших листів у спам. Якщо кількість підписок перевищує 100 на день, спрацьовує reCAPTCHA. Після проходження тесту на розпізнавання, користувача протягом 10 секунд буде перенаправлено на попередню сторінку.
Оновлено: 22.05.2024
або