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

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

Важливо

Щоб форма працювала, на вашому сайті має бути встановлений скрипт eSputnik. Для отримання скрипту перейдіть у вкладку “Сайт” → “Форми”, натисніть кнопку "Отримати скрипт" і вкажіть домен вашого сайту. Додайте цей скрипт у код сайту перед закриваючим тегом body. Скрипт має бути встановлений на всіх сторінках.

Отримати скрипт

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

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

  1. Перейдіть до вкладки Сайт —> Форми. Сайт —> Форми 
  2. На вкладці “Власні форми” натисніть кнопку “Створити форму підписки”.Створити форму підписки

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

Типи даних, які збиратимуться з форми

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Як працює Drag-n-Drop редактор форм

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

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

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

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

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

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

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

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

Як переключити шрифти

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

Де знайти назву стилю шрифту

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

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

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

Як відкрити редагування мобільної версії форми

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

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

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

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

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

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

Алгоритм додавання зображення для фону

Стиль тексту

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

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

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

Варіанти демонстрації статусу підписки

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

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

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

Інструменти для редагування зображення

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

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

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

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

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

Які ефекти ховера можна додати

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

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

Таку опцію можна активувати для кожного рядка формиА в рядку з номером телефону слід обрати код країни за замовчуванням.

Потрібну країну слід обрати зі списка

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

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

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

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

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

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

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

Місце розміщення

 

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

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

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

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

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

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

Лист-підтвердження підписки

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

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

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

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

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

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

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

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

Статистика за формами

Залишилися питання?
Спеціалісти обов'язково нададуть відповідь та допоможуть вирішити вашу проблему!
Зворотний дзвінок
Залишіть заявку – і наш спеціаліст зв'яжеться з вами в робочий час.
Відправити заявку
Консультація в чаті
Готові до ваших запитань!
Написати в чат
Електронна пошта
Напишіть в службу підтримки eSputnik.
Надіслати email