Как создать веб-форму
В главном меню откройте раздел “Формы”. Вы увидите список всех форм. Нажмите кнопку “Создать” на верхней панели, чтобы перейти в редактор.
Все ваши действия можно разделить на три шага:
- Основные настройки формы
- Добавление полей
- Оформление
Давайте создадим опрос удовлетворенности клиентов и на его примере разберем каждый шаг подробно.
Шаг 1. Основные настройки формы
Введите название для внутреннего пользования. При желании кратко опишите задачи, которые решает форма. Установите группы доступа и теги для быстрого поиска.
Если необходимо, измените идентификатор формы. Идентификатор используется в отчётах или при подстановке данных из формы в шаблон письма.
Выберите язык отображения — на этом языке в форме будут отображаться кнопки и всплывающие подсказки. Например, если пользователь введёт невалидный электронный адрес в email-поле, он увидит подсказку на выбранном языке.
Активируйте форму, нажав на переключатель "Опубликована" в правом верхнем углу. Пользователи могут видеть и, соответственно, заполнять только опубликованные формы. В любой момент вы можете скрыть форму для пользователей, еще раз кликнув на переключатель.
- Вы также можете настроить даты начала и окончания публикации формы. Для этого используйте поля "Опубликовать форму на дату" и "Скрыть форму на дату". Такая опция будет полезна, если вы работаете с краткосрочной формой, например, форма для регистрации на вебинар. Когда пользователь попытается заполнить форму, у который истёк срок действия, он увидит такое сообщение:
Вернёмся к нашему опросу удовлетворённости клиентов. Чтобы получить больший отклик от клиентов, мы обещаем им подарить промокод на скидку за прохождение опроса. Такой взаимовыгодный обмен будет действовать только десять дней. Вот как будет выглядеть настройка:
Опция “Скрывать кнопку отправки” не позволит пользователю увидеть кнопку отправки и кнопки для перехода между страницами формы, пока он не заполнит все обязательные поля.
Теперь перейдем к настройкам финальной страницы формы:
Финальная страница — это страница, которую увидит пользователь после того, как заполнит форму и успешно её отправит. Здесь доступны следующие опции:
- Ссылка при успешно заполненной форме — это ссылка, по которой может перейти пользователь после заполнения формы. В этом случае после заполнения всех полей пользователь увидит кнопку "Перейти на сайт". Он может нажать на неё, а может и не нажимать.
- Перенаправлять на указанную ссылку, минуя финальное сообщение. Если вы указали ссылку при успешно заполненной форме, а теперь еще активируете и эту опцию, то после того, как пользователь нажмёт кнопку "Отправить", его сразу будет кидать по указанной ссылке. Он даже не увидит финальной страницы.
- Заголовок и сообщение — это текст на финальной странице, который увидит пользователь после заполнения всех полей и страниц формы. По умолчанию выглядит так:
- У вас также есть возможность добавить дополнительный код в форму.
С помощью этого кода можно:
- стилизовать страницы формы (HTML + CSS);
- добавить скрипты, например, для аналитики или регистрации цели (JavaScript).
Пример использования дополнительного кода для оформления формы
Шаг 2. Добавление полей в форму
Форма состоит из страниц и полей. Одно поле — один вопрос респонденту. На одной странице может быть любое количество полей.
Если форма простая, достаточно одной страницы. Деление на страницы удобно, если вы создаёте длинную форму. В таком случае вы сможете разбить вопросы по смысловым блокам. Также деление на страницы используется для добавление сложной логики в форму — переход между страницами в зависимости от ответа пользователя. Если в форме несколько страниц, пользователь может переходить между ними, используя кнопки "Следующая" и "Предыдущая".
Перейдите на вкладку "Конструктор":
"Новая форма" — это название веб-страницы, где будет размещена форма. Такое название будет отображаться на вкладке браузера. Его можно изменить. Например, написать "Опрос для оценки удовлетворённости клиентов".
На данный момент форма пустая. Чтобы начать работу в конструкторе, добавьте первую страницу — кнопка "Добавить страницу":
Теперь вы можете добавить поля на страницу. Все поля расположены в панели слева. Чтобы добавить поле, зажмите элемент левой кнопкой мыши и перетащите на нужную позицию или просто кликните на него.
Какие поля доступны в форме:
| Поле | Описание |
|---|---|
| Заголовок | Укажите основную тему формы. Например, "Заявка на вебинар" или "Подпишитесь на нашу рассылку". |
| Параграф | Ещё один элемент для чтения, а не для взаимодействия. Расскажите клиенту об опросе подробнее. Например, зачем вы его проводите. |
| Короткий текст | Задайте вопрос, который предполагает короткий ответ. Например, спросите, как зовут респондента. |
| Попросите пользователя ввести электронный адрес. | |
| Номер телефона | Узнайте номер телефона пользователя. |
| Длинный текст | Задайте вопрос, который предполагает развёрнутый ответ. Например, попросите написать отзыв о мероприятии или внести предложения по улучшению продукта. |
| Число | Узнайте возраст респондента, его рост, номер дома — любую инфомацию, которую можно сообщить с помощью целого или дробного числа. |
| Да/Нет | Чекбокс для получения согласия. Спросите у будущего подписчика, готов ли он получать email-рассылки. А согласен ли он с правилами конфиденциальности? |
| Один вариант | Дайте респонденту несколько вариантов ответа. Выбрать он сможет только один. Например, поинтересуйтесь, откуда человек узнал о вашем продукте (соцсети, рассылка, реклама в интернете, друзья) |
| Множественный выбор | Позвольте пользователю выбрать несколько вариантов ответа на один вопрос. Например, спросите, почему он выбрал ваш продукт. |
| Выпадающий список | То же, что и множественный выбор. Только варианты ответов пользователь увидит не сразу, а после того, как нажмёт на поле. |
| Дата | Узнайте, когда у клиента день рождения, на какой день он хочет забронировать столик или любую другую важную дату. |
| Файл | Предложите пользователю прикрепить файл к форме. Например, изображение или pdf-документ, но не больше 20 мб. |
| Диапазон | Попросите пользователя оценить качество продукта, используя шкалу. |
Основные настройки полей в форме совпадают. Почти у всех элементов есть:
- Заголовок — подпись, которая отображается над полем в форме. Здесь обычно записывается сам вопрос.
- Значение по умолчанию — этот текст отображется внутри поля и служит подсказкой для пользователя. Если человек не совсем понимает, что надо ввести или в каком формате, значение по умолчанию поможет ему.
- Опция "Скрытый элемент формы". Используйте эту опцию, если необходимо передать в форме данные, которые не должны изменяться пользователем. В качестве данных будет записано значение по умолчанию.
- Кнопка "Добавить комментарий" — этот текст отображается под полем. Детально объясните пользователю, какую информацию хотите от него получить.
Например, настройка поля Email выглядит следующим образом:
Поле «Email» в форме
А вот как пользователь увидит это поле в уже опубликованной форме:
Для каждого поля доступна настройка валидации. С её помощью вы проверяете, соответствуют ли данные, которые вводит пользователь, вашим требованиям. Если данные не пройдут валидацию, пользователь не сможет отправить форму, пока эти данные не исправит.
| Тип валидации | Поле | Описание |
|---|---|---|
| Обязателен для заполнения | Короткий текст, email, номер телефона, длинный текст, число, один вариант, выпадающий список, дата, файл, диапазон | Пользователь не сможет отправить форму, пока не заполнит это поле. |
| Ограничить значение в ответе | Число | Укажите минимальное и максимальное значение. Пользователь не сможет ввести в поле число больше или меньше. |
| Ограничить количество символов в ответе | Длинный текст, короткий текст | Укажите минимальное и максимальное значения. Пользователь не сможет ввести в поле больше или меньше символов. |
| Валидация через регулярные выражения | Длинный текст, короткий текст | Регулярное выражение — это фильтр для текстовых данных. Он представляет собой набор символов, который формирует шаблон для поиска и обработки информации. Если пользователь введёт текст, который не соответствует шаблону, система предупредит его об этом и попросит ввести другие данные. |
| Проверить наличие в базе данных | Короткий текст, email, номер телефона, число | Выберете базу данных и поле в этой базе. Когда человек нажмёт на кнопку "Отправить", система сравнит данные, введённые пользователем в поле формы, с данными в поле базы. Если данные не совпадут, значит, такого профиля нет в базе. Форма не отправится, а пользователь увидит ошибку "Запись не найдена". |
| Проверить наличие подписки | Email, номер телефона | Выберете ресурс и условие проверки ("подписан", "существует", "не существует"). Когда пользователь нажмёт на кнопку "Отправить", платформа сравнит данные, введённые в поле, с контактными данными в ресурсе. Если данные не совпадут, значит, профиль с такими данными не подписан на ресурс. Пользователь увидит ошибку "Подписка не соответствует критерию формы". |
| Валидация через перечень телефонных кодов | Номер телефона | Перечислите через символ "+" телефонные коды в международном формате, которые разрешено указывать в форме. |
| Ограничить количество выбираемых элементов | Множественный выбор | Пользователь не сможет выбрать больше варинатов ответа, чем указано. |
Давайте создадим форму с двумя страницами. На первой странице мы зададим общие вопросы, чтобы понять, к какому сегменту относится респондент. На второй странице разместим вопросы, чтобы выяснять степень удовлетворенности клиента нашим сервисом.
| Страница | Вопрос | Поле |
|---|---|---|
| 1 | Пожалуйста, пройдите опрос и помогите нам стать лучше :) | Параграф |
| Ваша должность | Короткий текст | |
| Как долго Вы пользуетесь сервисом? | Один вариант | |
| 2 | Почему Вы выбрали наш сервис? | Множественный выбор |
| Что Вам больше всего нравится/не нравится в нашем продукте? | Длинный текст | |
| Вы порекомендуете наш сервис своим коллегам и знакомым? | Диапазон |
- Добавим поле "Параграф". Заголовка здесь нет, но есть текст. Расскажем пользователю, почему ему надо потратить время на этот опрос.
Поле «Параграф» в форме
- Далее добавим поле "Короткий текст", чтобы узнать, какую должность занимает респондент. В заголовке введём "Ваша должность:". Не будем делать поле обязательным для заполнения: вдруг кто-то не хочет "светиться".
- После этого нам надо узнать, как долго респондент пользуется нашим сервисом. Конечно, здесь можно использовать поле "Короткий текст" или "Число". Тогда каждый пользователь сможет ввести своё значение. Скорее всего, это будет выглядеть так: "три месяца", "4 года", "5 лет 8 месяцев и 12 дней". Будет довольно сложно обработать весь этот поток информации, не так ли?
Чтобы избежать подобной ситуации, предложим несколько готовых вариантов ответа. Для этого подойдет поле "Один вариант". Кнопка "Добавить вариант" позволит вам добавить сколько угодно возможных ответов. Однако пользователь сможет выбрать только один из них.
Сделаем поле обязательным для заполнения: период использования сервиса является важным фактором для анализа ответов.
Первая страница готова. Вот как она выглядит:
Теперь перейдем ко второй странице формы. Нажмите на кнопку "Добавить страницу".
Следующий вопрос респонденту — почему он выбрал наш сервис. Здесь мы также дадим варианты ответа на выбор. Однако стоит учесть, что пользователь мог выбрать сервис не по одной причине. Значит, надо предоставить возможность отметить несколько вариантов. Для этого воспользуемся элементом "Множественный выбор".
Также сделаем поле обязательным для заполнения. Плюс, разрешим свой вариант ответа, если ни один из других вариантов пользователю не подойдет (кнопка "Разрешить свой вариант").
- Узнаем о слабых и сильных сторонах нашего сервиса. Для этого добавим поле "Длинный текст" — предоставим пользователю возможность написать всё, что он думает. Но пусть не переусердствует. Ограничим количество символов в ответе до 800.
- И последнее — оценим индекс потребительской лояльности (NPS).
NPS — это метрика, которая показывает, как клиенты относятся к вашей компании. Вычисляется на основе ответов пользователей на вопрос «Готовы ли вы порекомендовать компанию друзьям?». В качестве ответа предлагается поставить балл на шкале от 1 до 10.
Для оценки NPS добавим элемент "Диапазон". Шкала диапазон будет от 1 до 10, поэтому установим количество элементов — 10. Выберем отображение диапазона в виде звёзд. Значением по умолчанию сделаем 5. Также добавим комментарий.
Вторая страница готова. Вот как увидят её пользователи:
На этом работа в конструкторе завершена: мы добавили все нужные поля. Осталось стилизовать форму.
Шаг 3. Оформление формы
Перейдите на вкладку "Оформление".
- Справа доступен предпросмотр формы — именно так её увидят пользователи. Любые изменения (добавление полей, редактирование стилей) мгновенно отображаются в предпросмотре. Предпросмотр не является статичным. Вы можете вводить данные в поля, выбирать варианты ответов, переходить между страницами и даже отправить форму, чтобы посмотреть, как будет выглядеть финальная страница.
- Слева находятся поля для изменения стилей формы:
- шрифты (семейство, размер)
- цветовая схема (текст, фон, кнопки)
- выравнивание (отсутствие выравнивания, по левому/правому краю, по центру)
- Также вы можете отредактировать текст и иконки в кнопках:
- "Отправить" (для отправления формы)
- "Вперед" и "Назад" (для перехода между страницами формы)
- Кнопка перехода на сайт на финальной странице
После оформления формы сохраните изменения, нажав кнопку "Применить" в верхней части страницы. Теперь вы можете поделиться ссылкой на форму или разместить её на странице вышего сайта. О том, как это сделать, читайте в этой статье.