Компании и организации используют самые разные онлайн-формы для общения со своей аудиторией. В одной из наших последних статей мы рассмотрели основы создания основных типов форм, необходимых для любого сайта на Drupal.
Часто формы должны быть сложнее. Чтобы сохранить удобство пользовательского интерфейса и чистоту дизайна, можно разделить длинные формы на несколько страниц и динамически показывать или скрывать вопросы в зависимости от выбора пользователя.
Именно это мы и продемонстрируем в данной статье. Продолжая нашу серию материалов по изучению возможностей модуля Webform в Drupal, мы создадим многоступенчатую форму с умной условной логикой.
Что такое многоступенчатая форма и чем она полезна?
Многоступенчатая форма — это длинная форма, разбитая на короткие, удобные страницы или шаги. Вместо того чтобы заставлять пользователя смотреть на огромную «стену» полей одновременно, многоступенчатая форма использует индикатор прогресса или индикатор шагов, чтобы вести пользователя через логические категории (например, «О вас», «Ваши варианты» и «Логистика») — по одному экрану за раз.
Преимущества:
- Снижение количества брошенных форм. Длинные формы вызывают немедленную визуальную усталость, из-за чего пользователи закрывают вкладку. Многоступенчатые формы скрывают сложность, делая первый шаг визуально простым и легким для начала.
- Создание повествовательного потока. Форма логически разбивает информацию на части, поэтому переход от общих идентификационных данных к конкретным выборам ощущается как естественный диалог, а не как допрос.
Что такое условная логика в формах и чем она полезна?
Условная логика (также известная как прогрессивное раскрытие) — это набор правил, которые динамически изменяют форму на основе ответов пользователя. Она основана на знаменитом утверждении «Если/То»: ЕСЛИ пользователь выбирает Вариант А, ТО показывать Вопрос Б. Если они не выбирают Вариант А, Вопрос Б остается полностью невидимым.
Преимущества:
- Персонализация опыта. Условная логика гарантирует, что каждый пользователь видит только те поля, которые на 100% актуальны для него.
- Чистота форм. Скрывая сложные или дополнительные вопросы, страница остается более чистой, компактной и совершенно не загроможденной.
Как создать многоступенчатую форму в Drupal с условной логикой
Перейдем к нашей пошаговой инструкции. В этом примере мы создадим форму регистрации волонтеров на конференцию с несколькими четкими этапами, где дополнительные варианты будут отображаться в зависимости от первоначального выбора волонтеров.
Шаг 1: Создание формы
Установив модуль Webform на ваш сайт Drupal, перейдите в «Структура» (Structure) > «Webforms» и нажмите кнопку «Добавить форму» (Add webform). Назовите свою форму «Conference Volunteer Form» (Форма регистрации волонтеров на конференцию) и сохраните ее.
Шаг 2: Добавление элементов с условной логикой
Теперь пришло время создать фактические страницы (шаги) формы. Вы можете сделать это, нажав кнопку «Добавить страницу» (Add page) на вкладке «Сборка» (Build) вашей формы.
Страница 1: «О вас» (About You)
Первый шаг этой формы будет посвящен сбору имен и контактной информации волонтеров. Создайте страницу с названием «About You» и добавьте на нее элементы, нажав «Добавить элемент». В боковой панели откроются настройки элемента, где нужно выбрать тип. Для этой формы вам потребуется:
- добавить элемент типа «Текстовое поле» (Text field) и назвать его «Ваше имя» (Your Name)
- добавить элемент типа «Email» и назвать его «Ваш email» (Your Email)
- добавить элемент типа «Телефон» (Telephone) и назвать его «Ваш номер телефона» (Your Telephone Number)
Лучшей практикой является обязательность заполнения всех полей на этом этапе. Вы можете сделать это, прокрутив настройки элемента вниз и установив флажок «Обязательное» (Required). Сохраните каждый элемент.
Все элементы, относящиеся к конкретной странице, отображаются с соответствующим отступом под этой вкладкой в настройках формы. Порядок страниц и элементов можно изменять путем перетаскивания.
Страница 2: «Ваша роль волонтера» (Your Volunteer Role)
Следующая страница будет спрашивать волонтеров об основных областях их потенциальной деятельности: Техническая помощь или Поддержка участников. Именно здесь вступает в игру условная логика:
- Пользователи, выбравшие «Техническая помощь», будут спрашивать о конкретных областях технической поддержки.
- Пользователи, выбравшие «Поддержку участников», будут спрашивать о языках, на которых они говорят.
Добавьте страницу «Your Volunteer Role». Затем добавьте элемент типа «Радиокнопки» (Radios) или «Выбор» (Select) под названием «Как бы вы хотели принять участие?». Элемент «Select» — это, по сути, выпадающий список.
Прокрутите до «Вариантов элемента» (Element options) и добавьте следующие варианты:
- «Техническая помощь» (Technical Assistance)
- «Поддержка участников» (Attendee Support)
При добавлении вариантов важно заполнить и «Значение варианта» (уникальное машинное имя), и «Текст варианта» (как вариант будет отображаться пользователям). Во многих случаях Webform автоматически заполняет текст варианта на основе его значения. Поле «Описание варианта» опционально и может быть полезно, если требуется более длинный текст.
Также желательно сделать это поле обязательным, так как выбор вида волонтерства является важным в данном примере. В целом, назначение определенных элементов обязательными зависит от ваших рабочих предпочтений.
Далее добавьте элемент типа «Радиокнопки» под названием «Какая область технической помощи предпочтительна для вас?».
Варианты:
- Значение и текст: «Техническая поддержка за кулисами». Описание: «Я предпочитаю заниматься исключительно оборудованием, настройкой аудио, управлением трансляцией/камерами».
- Значение и текст: «Ведущий на сцене». Описание: «Я предпочитаю находиться рядом со сценой, помогать спикерам, следить за временем и взаимодействовать с живой или виртуальной аудиторией».
- Значение и текст: «Универсальный помощник / Стойка помощи». Описание: «У меня есть навыки продвинутого решения проблем, и я могу перемещаться между комнатами для устранения экстренных технических неполадок».
Чтобы сделать технические варианты видимыми только для тех, кто выбрал «Техническая помощь», перейдите на вкладку «Условия» (Conditions). Установите «Состояние» (State) — «Видимо» (Visible) и «Элемент» (Element) — «Все». Затем найдите элемент «Как бы вы хотели принять участие?» в выпадающем списке, выберите «Значение равно» (Value is) и затем выберите «Technical Assistance» как необходимое значение. Сохраните элемент.
Аналогичным образом добавьте элемент типа «Флажки» (Checkboxes) под названием «На каких языках вы комфортно общаетесь, чтобы помогать участникам?».
Варианты:
- Английский
- Французский
- Испанский
- Язык жестов
Важно, что флажки, в отличие от выпадающих списков или радиокнопок, позволяют выбирать несколько вариантов. Это очень полезно, если волонтеры говорят на нескольких языках.
Чтобы сделать этот элемент видимым только для пользователей, выбравших «Поддержку участников», настройка будет абсолютно такой же, как и для предыдущего элемента. В разделе «Условия» укажите «Видимо, если выполняются все следующие условия»: «Как бы вы хотели принять участие?» > «Значение равно» > «Attendee Support».
При настройке этих условных элементов имейте в виду, что когда элемент скрыт, он не является обязательным.
Страница 3: «Ваш мерч» (Your Swag)
Следующая страница спросит волонтеров, хотели бы они получить бесплатную футболку, и если да, откроет выпадающий список размеров.
Добавьте страницу «Your Swag» и элемент типа «Радиокнопки» с названием «Хотите ли вы получить бесплатную волонтерскую футболку?».
Варианты:
- Да, пожалуйста
- Нет, спасибо
Затем добавьте элемент типа «Выбор» под названием «Ваш размер футболки». Варианты на выбор: S, M, L, XL, XXL.
Давайте сделаем этот вопрос видимым только для тех, кто выбрал получение футболки. В разделе «Условия» укажите «Видимо, если выполняются все следующие условия»: «Хотите ли вы получить бесплатную волонтерскую футболку?» > «Значение равно» > «Yes, please».
Страница 4: «Ужин волонтеров» (Volunteer Dinner)
Следующая страница спросит, планируют ли волонтеры присоединиться к ужину, и если да, откроет выбор диетических предпочтений.
Добавьте страницу «Volunteer Dinner» и элемент типа «Радиокнопки». Назовите элемент «Собираетесь ли вы присоединиться к ужину в честь волонтеров?».
Варианты:
- «Да, с удовольствием»
- «Нет, спасибо»
Затем добавьте элемент типа «Флажки» под названием «Есть ли у вас какие-либо диетические ограничения или предпочтения?».
Варианты:
- Без ограничений
- Вегетарианство
- Веганство
- Безглютеновая диета
- Аллергия на орехи
Аналогично вопросу о языках, мы используем флажки, потому что у пользователя может быть несколько диетических предпочтений.
Наконец, сделаем этот вопрос видимым только для тех, кто планирует посетить ужин. В разделе «Условия» укажите «Видимо, если выполняются все следующие условия»: «Собираетесь ли вы присоединиться к ужину в честь волонтеров?» > «Значение равно» > «Yes, I’d love to».
Шаг 3: Настройка мастера формы
Перейдите в «Настройки формы» (Form Settings) > вкладка «Форма» (Form). Прокрутите вниз до раздела «Настройки мастера формы» (Form wizard settings). Для нашей многоступенчатой формы мы отметили несколько флажков, отвечающих за индикацию процесса заполнения формы:
- «Show wizard progress bar» (Показывать индикатор прогресса мастера) — чтобы отобразить полосу прогресса процесса заполнения формы.
- «Show wizard progress pages» (Показывать номера страниц мастера) — чтобы отображать текущий номер страницы и общее количество оставшихся страниц (например, Страница 1 из 10).
- «Show wizard progress percentage» (Показывать процент прогресса мастера) — чтобы отображать процент выполненных страниц (например, 10%).
- «Update wizard progress bar’s pages based on conditions» (Обновлять страницы индикатора прогресса мастера на основе условий) — чтобы скрывать или показывать страницы индикатора прогресса мастера в зависимости от выбора пользователя.
Вариант «Include confirmation page in progress steps» (Включать страницу подтверждения в шаги прогресса) можно оставить не отмеченным. Это гарантирует, что ваш мастер будет показывать чистое, стабильное количество шагов, вместо того чтобы перегружать пользователя лишним «шагом», который на самом деле является просто сообщением с благодарностью.
4. Настройка сообщения подтверждения (необязательно)
Перейдя в «Сборка» (Build) > «Настройки» (Settings) > «Подтверждение» (Confirmation), вы можете настроить сообщение подтверждения отправки формы.
5. Проверка результатов
В результате получается форма, которая показывает этапы, которые необходимо пройти, текущую страницу, на которой находится пользователь, и процент прогресса. Дополнительные варианты открываются для пользователей в зависимости от их выбора.
По завершении форма отображает настроенное сообщение подтверждения.
Заключительные мысли
Сочетая многоступенчатые формы с условной логикой, вы достигаете «золотого стандарта» пользовательского опыта на веб-сайте. Разделение формы на этапы снижает психологическое сопротивление, а применение условной логики создает динамичный, «живой» интерфейс, который адаптируется на лету. Результатом становится высоко вовлекающий пользовательский опыт, который уважает время пользователя, повышает показатели конверсии и позволяет собирать идеально организованные данные.
Тем не менее, примерная настройка в этой статье лишь затрагивает поверхность того, что возможно с модулем Webform в Drupal. Когда проект требует сложной интеграции, комплексных рабочих процессов или уникальной брендовой идентичности, полная глубина возможностей модуля в сочетании с экспертной настройкой может сыграть решающую роль.
