Для чого служить віджет
Віджет форми дозволяє вбудувати форму на будь-який вебсайт - без потреби створювати власний код. Ви вставляєте готовий скрипт на свій сайт, а форма автоматично завантажиться і буде збирати дані від відвідувачів.
Як вставити форму на сайт
- Відкрийте форму в панелі Intum
- У розділі Скрипт форми Ви знайдете готовий код для копіювання
- Натисніть на поле з кодом - текст автоматично виділиться
- Скопіюйте код і вставте його в HTML свого сайту, у місці, де форма має відображатися
Як виглядає код
Код складається з двох елементів:
- JavaScript-скрипт - завантажує рушій форм (достатньо один раз на сторінці, навіть якщо у Вас кілька форм)
- Елемент div - контейнер, у якому з’явиться форма. Містить унікальний токен, що ідентифікує Вашу форму
Ви можете вставити багато форм на одній сторінці - кожна з окремим елементом div.
Стандартні значення полів
Ви можете передати стандартні значення до полів форми за допомогою атрибутів data-field-* на елементі div. Завдяки цьому форма автоматично заповнить обрані поля при завантаженні.
Як це працює
- У налаштуваннях поля форми встановіть Код поля (напр.
email,imie,firma) - У коді embed додайте атрибути
data-field-{код}зі значеннями:
<script src="https://widgets.intum.net/widgets/intum-forms-widget.js"></script>
<div data-form="TOKEN"
data-field-email="[email protected]"
data-field-imie="Jan"
data-field-firma="Firma Sp. z o.o.">
</div>
Після завантаження форми поля з кодом email, imie і firma будуть автоматично заповнені вказаними значеннями.
Застосування
- Персоналізація - заповніть дані клієнта, які Ви вже знаєте (напр. з CRM або посилання в листі)
-
Маркетингові кампанії - додайте приховані параметри, що ідентифікують джерело (напр.
data-field-kampania="newsletter_03") - Інтеграції - динамічно встановлюйте значення з JavaScript на сторінці
Динамічне встановлення значень з JavaScript
<script>
// Встановіть значення перед завантаженням віджета
const formDiv = document.querySelector('[data-form="TOKEN"]');
formDiv.dataset.fieldEmail = '[email protected]';
formDiv.dataset.fieldImie = 'Jan';
</script>
Як це працює
Після завантаження сторінки:
- Скрипт шукає на сторінці всі контейнери з формами
- Завантажує вміст форми з сервера (на основі токена)
- Відображає форму з полями, валідацією і кнопкою надсилання
- Після генерації - заповнює поля стандартними значеннями з атрибутів
data-field-* - Після заповнення і надсилання - дані потрапляють у систему, а користувач бачить підтвердження або перенаправляється
Персоналізація вигляду
Форма має стандартні стилі, але Ви можете їх налаштувати:
- CSS-клас - надайте власний клас і стилізуйте форму в CSS свого сайту
- Inline-стилі - впишіть безпосередньо CSS-стилі в налаштуваннях форми
- Клас кнопки - змініть вигляд кнопки надсилання
- Текст кнопки - змініть напис на кнопці (стандартно “Надіслати”)
- Власний JavaScript - додайте додатковий JS-код до форми
Відповідь після надсилання
Після заповнення форми користувач може:
- Побачити повідомлення - HTML-вміст, відображений на місці форми (підтримує шаблони Liquid із даними з форми)
- Бути перенаправленим - на вказаний URL (напр. сторінка з подякою)
Захист
Віджет має вбудований anti-spam захист від ботів і небажаних звернень.
Період активності
Якщо форма має встановлений період активності (дата від-до), віджет автоматично відобразить повідомлення про неактивність форми поза цим періодом.
Багато форм на одній сторінці
Ви можете вбудувати кілька форм на одній сторінці. JavaScript-скрипт Ви вставляєте лише один раз, а для кожної форми додаєте окремий елемент div із відповідним токеном.
Пов’язані
- Форми - загальний опис модуля і типи полів
- Звернення - дані, зібрані формами