Користувацькі форми дозволяють створювати власні багатокрокові форми та використовувати їх замість вбудованих функцій Lead Collection (Збір лідів) або Human Contact Form (Форма зв'язку з людиною). Ви обираєте поля, повідомлення з подякою та кнопку надсилання, а потім прив'язуєте форму до розділу, де ви хочете її показувати.
Де знайти форми
Перейдіть до Settings > Forms (Налаштування > Форми). На цій сторінці наведено список збережених користувацьких форм. Якщо ви ще не створили жодної, відображатиметься напис "No custom forms yet" разом із кнопкою Create your first form (Створіть свою першу форму).
Створення форми
Натисніть New form (Нова форма) - або Create your first form, якщо список ще порожній, - щоб відкрити конструктор форм.
Збирання форми
У конструкторі на одному екрані зібрано все необхідне для налаштування форми, а праворуч доступний попередній перегляд у реальному часі. У цій статті ми створимо зразок форми "Запит на кейтеринг" для піцерії: крок 1 збирає контактні дані, крок 2 містить запитання про захід.
- Form name (Назва форми) - внутрішня назва, яка допоможе вам згодом ідентифікувати форму у випадаючих списках.
- Thank-you message (Повідомлення з подякою) - текст підтвердження, який відображається після того, як відвідувач надішле форму.
- Submit button (Кнопка надсилання) - налаштуйте текст кнопки, оберіть необов'язкову іконку та її колір.
- Вкладки Build (Конструктор) та Custom CSS (Користувацький CSS) - створюйте поля візуально або перейдіть до Custom CSS, щоб застосувати власні стилі.
Додавання полів
На вкладці Build укажіть необов'язковий заголовок кроку, а потім натисніть кнопку потрібного типу поля, щоб додати його. Ви можете додавати скільки завгодно полів, поєднуючи будь-які з наведених нижче типів в одній формі.
- Name - однорядкове поле для імені відвідувача.
- Email - збирає адресу електронної пошти з перевіркою коректності формату.
- Phone number - збирає номер телефону.
- Date - вибір дати.
- Time - вибір часу.
- File upload - дозволяє відвідувачу прикріпити та завантажити файл (дивіться нижче).
- Short answer - однорядкове поле для довільного тексту.
- Long answer - більше багаторядкове поле для розгорнутих відповідей.
- Checkbox - один прапорець, наприклад для згоди з умовами.
- Dropdown - випадаюче меню, де відвідувач обирає один варіант зі списку.
- Single choice - набір варіантів, де відвідувач обирає лише один пункт.
- Multiple choice - набір варіантів, де відвідувач може обрати кілька пунктів одночасно.
Кожне поле має Label (Мітка - те, що бачить відвідувач) та Name (Ім'я - внутрішній ключ, який використовується в експорті та сповіщеннях). Ви можете позначити поле як Required (Обов'язкове), встановити його Width (Ширина), щоб розмістити поля поруч одне з одним, а також перетягувати поля для зміни їхнього порядку. Поля Dropdown, Single choice та Multiple choice також приймають список варіантів, по одному в кожному рядку.
Додавання кроків
Для довших форм розділіть поля на кілька кроків, замість того щоб показувати їх на одному довгому екрані. Натисніть Add step (Додати крок), щоб додати ще один крок, а потім перетягніть або додайте до нього потрібні поля. Кожен крок являє собою окрему картку з необов'язковим заголовком.
Відвідувачі бачать кожен крок як окремий екран у чаті та переходять між ними за допомогою кнопок Next (Далі) та Previous (Назад), які з'являються автоматично, щойно у формі з'являється більше одного кроку. Якщо форма містить кілька кроків, конструктор також дозволяє налаштувати текст, іконку та колір для кнопок Next та Previous.
Давайте кожному кроку короткий заголовок, орієнтований на дію (наприклад, "Ваші контактні дані", а потім "Деталі запиту"), щоб відвідувачі завжди розуміли, на якому етапі заповнення форми вони перебувають.
Поля завантаження файлів
Поле типу File upload дозволяє відвідувачу прикріпити файл до своєї відповіді. Для кожного поля файлу можна налаштувати:
- Accepted extensions (Дозволені розширення) - список розширень через кому, наприклад
pdf, png, jpg. Дозволятимуться файли лише з цими розширеннями. - Max size (Максимальний розмір) - максимальний розмір файлу в МБ, до 10 МБ.
Файли перевіряються під час надсилання форми: розширення має бути у вашому дозволеному списку, розмір файлу не повинен перевищувати ліміт, а його фактичний уміст має відповідати заявленому типу.
Попередній перегляд у реальному часі
Панель Live preview (Попередній перегляд) праворуч показує форму саме так, як її бачитимуть відвідувачі, оновлюючись у процесі додавання полів, створення кроків і зміни оформлення.
Коли форму буде налаштовано, натисніть Save (Зберегти). Тепер форма з'явиться у вашому списку в розділі Settings > Forms.
Використання користувацької форми
Збережена користувацька форма не відображатиметься відвідувачам сама по собі. Прив'яжіть її до потрібного розділу:
- Settings > Lead Collection - відкрийте випадаючий список Form shown to the visitor (Форма, що відображається відвідувачу) та виберіть вашу користувацьку форму замість вбудованої.
- Settings > Human Contact Form - відкрийте випадаючий список Form shown to the visitor та виберіть вашу користувацьку форму замість вбудованої.
Після цього відвідувач бачитиме вашу користувацьку форму щоразу, коли спрацьовуватиме відповідний розділ.
Як це виглядає для відвідувача
Форма з'являється всередині вікна чату. Ось приклад форми "Запит на кейтеринг", прив'язаної до Lead Collection: відвідувач бачить крок 1 із полями контактних даних і переходить далі за допомогою кнопки Next.
На кроці 2 відображаються поля щодо заходу, зокрема Dropdown, Long answer та поле File upload. Відвідувач може повернутися назад за допомогою кнопки Previous або надіслати форму кнопкою Submit (Надіслати). Після надсилання в чаті показується повідомлення з подякою, налаштоване вами в конструкторі.
Перегляд відповідей на вкладці Leads
Коли відвідувач надсилає користувацьку форму, прив'язану до Lead Collection або Human Contact Form, ця відповідь зберігається як лід. Відкрийте вкладку бота Leads (Ліди), щоб переглянути її.
Поряд зі стандартними полями Name, Email, Phone, Collected date та Entry point, стовпчик Form data (Дані форми) містить усю надану інформацію: назва кожного поля та значення, введене відвідувачем, по одному рядку на поле. Для поля File upload відображається назва завантаженого файлу; лист зі сповіщенням про новий лід та експорт у формат CSV (кнопка Export на вкладці Leads) містять пряме посилання для завантаження самого файлу.
З кожного ліда ви також можете перейти до повного діалогу Conversation (Розмова), щоб побачити контекст спілкування в чаті під час надсилання форми.