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