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

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

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

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

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

2. Налаштування стилю форми

У вкладці "Стилі сайту" ви можете налаштувати:

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

3. Вибір вигляду форми

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

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

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

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

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

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

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

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

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

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

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

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

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

Праворуч на сторінці розміщені три вкладки з налаштуваннями редагування: "Оформленя", "Контент" і "Загальні".

Вкладка "Оформлення"

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

Стиль тексту

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

Адаптивність

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

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

Вкладка "Контент"

Відредагуйте окремі структурні частини форми.

Форма може складатися з таких рівнів:

• структура
• контейнер (для деяких видів форм)
• елемент
  

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

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

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

На рівні структури і контейнера можна змінювати вигляд полів: від вертикального до горизонтального і навпаки.

Щоб показати батьківський елемент, натисніть на нього або скористайтеся стрілкою на панелі параметрів форми.

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

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

Усі помилки відображаються однією з мов: англійською, російською, українською. Мова тексту визначається за мовою браузера контакту.

Можна встановити зображення як тло структури, контейнерів або елементів (наприклад, кнопок).

Вкладка "Загальні"

У цій вкладці виберіть дію по кліку.

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

1. За допомогою стрілок "Назад" і "Вперед" ви можете скасувати або повторити зміни, внесені до форми.
2. Налаштування багатомовності:
   • налаштування зовнішнього вигляду форми здійснюються тільки для основної мови і копіюються звідти до інших мовних версій;
   • у мовних версіях можна змінити лише текст;
   • форма відображається мовою сайту, яка визначається за значенням атрибута lang у тегу html; якщо ж він відсутній – за мовою браузера.
3. Колір фону використовується для того, щоб побачити, як форма виглядатиме на фоні вебсторінки.
4. Кнопки переходу на мобільну та десктопну версії форми.
5. Попередній перегляд форми та її станів.
6. Закрити без збереження.
7. Зберегти.

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

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

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

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

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

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

Після збереження вигляду форми ви автоматично будете перенаправлені до параметрів. Пізніше ви можете знайти їх у вкладці "Сайт" → "Віджети" → конкретна форма → "Параметри".

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

1. змінити назву форми;
2. відредагувати зовнішній вигляд
3. відредагувати умови відображення;
4. змінити розміщення;
5. встановити дії після підписки:

• визначити групу для збереження контактів;
• увімкнути або вимкнути DOI;
• додати або змінити лист-підтвердження;
• обрати, куди перенаправити користувача після натискання посилання для підтвердження;
• підключити або відключити онбординг.

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

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

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

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

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

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

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

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

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

• перегляди
• підписки
• конверсії

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