Настраиваемые формы позволяют создавать собственные многошаговые формы и использовать их вместо встроенных Lead Collection (Сбор лидов) или Human Contact Form (Форма связи с человеком). Вы сами выбираете поля, сообщение с благодарностью и кнопку отправки, а затем привязываете форму к нужному разделу.
Где найти формы
Перейдите в Settings > Forms (Настройки > Формы). На этой странице перечислены все сохраненные настраиваемые формы. Если вы еще не создали ни одной, отобразится сообщение "No custom forms yet" с кнопкой Create your first form (Создать первую форму).
Создание формы
Нажмите New form (Новая форма) или Create your first form (Создать первую форму), если список пока пуст, чтобы открыть конструктор форм.
Сборка формы
В конструкторе есть все необходимое для настройки формы на одном экране, а справа доступен интерактивный предпросмотр. В этой статье мы соберем пример формы "Catering request" для пиццерии: на шаге 1 собираются контактные данные, на шаге 2 задаются вопросы о мероприятии.
- Form name (Название формы) - внутреннее имя формы, по которому ее можно будет выбрать в выпадающих списках.
- Thank-you message (Сообщение с благодарностью) - текст подтверждения, который отображается посетителю после отправки формы.
- Submit button (Кнопка отправки) - настройка текста кнопки, выбор необязательной иконки и ее цвета.
- Вкладки Build (Конструктор) и Custom CSS (Свой CSS) - визуальное создание полей или переключение на вкладку Custom CSS для применения собственных стилей.
Добавление полей
На вкладке Build укажите необязательный заголовок шага и нажмите кнопку нужного типа поля, чтобы добавить его. Вы можете добавить любое количество полей, комбинируя любые из перечисленных ниже типов в одной форме.
- Name (Имя) - однострочное поле для имени посетителя.
- Email (Электронная почта) - поле для ввода адреса электронной почты с проверкой формата 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 также задается список вариантов, по одному на строку.
Добавление шагов
Для длинных форм лучше разбить поля по шагам (steps), чем размещать их на одном бесконечном экране. Нажмите 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 (Форма, отображаемая посетителю) и выберите вашу настраиваемую форму вместо встроенной.
После этого посетитель увидит вашу настраиваемую форму во всех случаях, когда срабатывает соответствующий раздел.
Как форма выглядит для посетителя
Форма отображается прямо в окне чата. Вот пример формы "Catering request", привязанной к 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), чтобы увидеть контекст диалога вокруг отправки формы.