Створення вебформи для сайтів

Розміщуйте форми підписки у будь-якому місці свого сайту без зміни його коду.

Нижче — інструкція зі створення вебформи для сайту.

1. Тип форми та поля

1. Перейдіть до вкладки Сайт —> Форми.  

2. На вкладці “Власні форми” натисніть кнопку “Створити форму підписки”.

3. Виберіть тип форми, яку бажаєте створити: Вбудована, Плаваюча або Модальне вікно.
4. Задайте назву форми.
5. Виберіть типи даних, які будуть збиратися з форми: email, номер телефону та/або ім'я.
6. Завершивши внесення налаштувань у цій вкладці, натисніть кнопку “Далі”.

2. Налаштування форми під стилі сайту

На сторінці “Стилі сайту” ви можете налаштувати:

1. Колір основної кнопки, основного заголовка та фону: для цього клікніть елемент, оберіть колорпікером колір або введіть його код, відрегулюйте прозорість і виберіть кольорову модель.
2. Дизайн форми: Класичний, Мінімалізм, М'який, Декоративний або Сучасний. Завершивши внесення налаштувань на цій сторінці, натисніть кнопку “Далі”.

   3. Вибір розміщення полів форми

   На цій сторінці ви можете вибрати один із чотирьох способів розміщення полів форми:

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

2. Вертикальний із картинкою та супровідним текстом:

3. Вертикальний із зображенням збоку та супровідним текстом:

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

Після того, як ви натиснете кнопку “Вибрати” біля одного з варіантів, відкриється сторінка редагування контенту форми.

4. Редагування контенту форми

Тут ви можете відредагувати контент форми в чотирьох її базових станах:

• Форма підписки – стан, який бачить новий користувач.
• Успішна підписка – стан, який бачить користувач, що успішно відправив запит.
• Повторна підписка – стан, який бачить уже підписаний користувач, що повторно відправив запит.
• Помилка – стан, який бачить користувач у разі невдалої спробі відправити запит.

Ліва панель налаштувань

Редактор форм працює за принципом Drag-n-Drop конструктора. Якщо вам потрібно додати якийсь елемент, просто натисніть на нього лівою кнопкою миші й перенесіть у відповідне місце форми.

Можна додати три типи елементів:

• базові компоненти (кнопки, текст, зображення й контейнер);
• поля контакту (емейл, ім’я та телефон);
• згоду на обробку персональних даних.

Ці елементи стануть у нагоді, якщо на старті створення форми ви забули обрати типи даних, які вона збиратиме (за замовчуванням активовано лише збір email-адрес), або коли вам знадобиться ще одна кнопка, зображення тощо.

Права панель налаштувань 

Праворуч на сторінці розміщені дві вкладки з налаштуваннями редагування: "Стиль тексту" й "Адаптивність".

Вкладка "Стиль тексту"

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

Щоб дізнатися назву шрифту, який вам сподобався, зробіть декілька кроків:

Вкладка "Адаптивність"

Тут ви можете вказати ширину екрана, починаючи з якої форма відображатиметься в мобільній версії. За дефолтом стоїть значення менше ніж 576 пікселів. Водночас у режимі попереднього перегляду ви побачите, як усі елементи та текст віджета виглядатимуть на дисплеї шириною 320 пікселів — найменшому з можливих мобільних екранів. 

Якщо необхідно попрацювати з окремими елементами віджета, просто натисніть на потрібний елемент і на вкладці справа оберіть “Контент” → “Мобільні налаштування”.

Детальні налаштування елементів віджета

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

Стиль віджета

Аби задати загальні параметри віджета, натисніть на будь-яку вільну від елементів ділянку. Далі можна: 

• обрати ширину й висоту форми; 
• вирівняти елементи всередині неї; 
• задати внутрішні й зовнішні відступи;
• обрати колір фону й варіанти його заповнення — заливка чи градієнт. 

Можна додати зображення як фон. Як це зробити — дивіться в анімації.

Стиль тексту

Натисніть на будь-який текст, щоб обрати його стиль. Можна задати такі параметри:

• товщина шрифту;
• його розмір;
• колір;
• вирівняти текст по лівому/правому краю або по центру;
• збільшити/зменшити висоту рядка;
• додати тінь до літер.

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

Робота із зображеннями 

Натисніть лівою кнопкою миші на зображення, і праворуч з’являться інструменти для роботи з цим елементом. Тут ви можете завантажити свою картинку й підкоригувати її за власним смаком. Обирайте такі параметри:

• розмір зображення (по ширині контейнера, фіксована ширина, по ширині вмісту);
• висота (фіксована, по висоті контейнера, по висоті вмісту);
• позиціонування (заповнення, підгонка, за розміром зображення);
• відступи;
• скруглення кутів.

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

Стиль СТА-кнопки 

З СТА-кнопкою для форми можна зробити чимало. Доступні такі налаштування:

• розмір елемента (ширина й висота);
• редагування стилю тексту кнопки (товщина шрифту, розмір, колір, вирівнювання тощо);
• скруглення кутів;
• фон;
• додавання обведення;
• додавання тіні.

Ще потрібно налаштувати ефект ховера — те, як змінюватиметься кнопка, коли користувач наведе на неї курсор. Можна зробити так, аби змінювався лише колір фону або тексту чи все разом.

Робота з полями контакту

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

А в рядку з номером телефону слід обрати код країни за замовчуванням.

Зверніть увагу, що в наших формах автоматично повідомляється про помилку, якщо користувач введе в поля контакта некоректні дані. 

Верхня панель налаштувань

1. Налаштування багатомовності:

• налаштування зовнішнього вигляду форми здійснюються тільки для основної мови і копіюються звідти до інших мовних версій;
• у мовних версіях можна змінити лише текст;
• форма відображається мовою сайту, яка визначається за значенням атрибута lang у тегу html; якщо ж він відсутній – за мовою браузера.

2. Колір фону використовується для того, щоб побачити, як форма виглядатиме на фоні вебсторінки.
3. Кнопки переходу на мобільну та десктопну версії форми.
4. Попередній перегляд форми та її станів.

Після завершення редагування контенту натисніть “Зберегти” на верхній панелі.

5. Вибір місця розміщення

1. Введіть CSS-селектор елемента, який ви бажаєте зробити місцем розміщення форми.
2. Вкажіть, як розмістити форму відносно знайденого елемента:

• перед елементом;
• після елемента;
• всередині елемента першою;
• всередині елемента останньою;

замінити елемент.

Якщо ви не готові вказати місце розміщення форми, активуйте перемикач "Вказати місце розміщення пізніше".

Натисніть “Готово”. Спочатку форму бачитиме тільки ви, на наступній сторінці ви зможете зробити її загальнодоступною.

6. Перевірка коректності налаштувань

У вкладці "Параметри" ви можете:

• змінити назву форми;
• зробити форму загальнодоступною або залишити видимою тільки для вас;
• переглянути форму на сайті;
• відредагувати зовнішній вигляд та розміщення;
• визначити, додавати до бази всі контакти або тільки унікальні;
• змінити групи, до яких додаються контакти з форми;
• підключити відправлення листа-підтвердження підписки і привітального листа або ланцюжка листів.

За замовчуванням до форми автоматично підставляється лист для підтвердження email, який раніше було створено в акаунті. Якщо в акаунті немає листа-підтвердження, буде автоматично додано базовий шаблон. За потреби можна відредагувати або створити інший лист; головна умова – він має містити кнопку підтвердження email-адреси контакту (тип посилання – “Підтвердження підписки”).

До кнопки буде автоматично прив'язаний тип події SysConactConfirmed, який запускає системний сценарій.

Потім виберіть, куди перенаправляти користувача після того, як він натисне кнопку: на стандартну сторінку переадресації з подякою за підписку або на URL верифікованого домену (сторінка вашого сайту).

Щоб надсилати велком-листи, виберіть або створіть повідомлення, яке користувачі отримуватимуть після підписки. Також ви можете налаштувати привітальний сценарій. 

Перш ніж публікувати форму, не забудьте перевірити, як вона виглядає на вебсторінці. Для цього натисніть кнопку "Переглянути на сторінці", введіть вебадресу сторінки з формою і ще раз натисніть "Переглянути на сторінці": 

Коли всі необхідні налаштування додані, натисніть кнопку "Можуть бачити відвідувачі сайту" і збережіть налаштування. 

7. Статистика

Щоб побачити статистику, перейдіть до вкладки “Сайт” → “Форми” і клікніть назву форми, яка вас цікавить. 

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