Глубокое погружение в модуль веб-формы для Drupal 8/9

Опубликовано: 2021-10-12

Модуль Webform - это самый мощный и гибкий конструктор форм и менеджер отправки для Drupal. Это дает разработчикам сайтов возможность легко и быстро создавать сложные формы. Он поставляется с определенным уровнем настроек по умолчанию, что также позволяет вам настраивать его в соответствии с вашими требованиями.

Загляните в этот замечательный блог - Модуль Drupal 8 Webform - Краткое руководство, которое поможет вам начать работу с модулем Webform на вашем сайте Drupal 8/9. Это поможет вам легко понять основы.

Модуль Webform поставляется с множеством интересных функций, и я хотел бы упомянуть некоторые из них.

Модуль веб-формы

Возможности веб-формы

1. Изменение формы и элементов

Любую форму, элемент и связанные с ним настройки можно изменить с помощью соответствующих хуков. Ниже приведены несколько доступных для использования хуков, и вы можете найти больше в файле webform.api.php :

  • Крючки формы

◦ hook_webform_submission_form_alter ()
◦ Внесите изменения перед отображением формы отправки веб-формы.

  • Крючки для элементов

◦ hook_webform_element_alter ()
◦ Изменение элементов веб-формы.

  • Вариант крючков

◦ hook_webform_options_alter ()
◦ Изменить параметры веб-формы.

  • Крючки для хендлера

◦ hook_webform_handler_invoke_alter ()
◦ Действовать на обработчик веб-формы при вызове метода.

  • больше крючков…

◦ hook_webform_access_rules_alter () и т. Д.
◦ Изменить список правил доступа, которыми следует управлять на уровне веб-формы.

2. Исходный код YAML

Модуль Webform начинался как модуль YAML Form, который позволял людям создавать формы путем написания разметки YAML. В какой-то момент модуль YAML Form начал иметь пользовательский интерфейс и стал модулем Webform для Drupal 8.

  • YAML предоставляет простой и легкий в изучении язык разметки для создания и массового редактирования элементов веб-форм.
  • Страница (Просмотр) исходного кода позволяет разработчикам редактировать массив рендеринга веб-формы с помощью разметки YAML. Разработчики могут использовать страницу (Просмотр) исходного кода для ручного кодирования веб-форм для быстрого изменения меток веб-формы, вырезания и вставки нескольких элементов, изменения порядка элементов, а также для добавления настраиваемых свойств и разметки к элементам.
  • Вот пример контактной формы и соответствующего исходного кода YAML:

Контактная форма с интерфейсом перетаскивания

Контактная форма с пользовательским интерфейсом перетаскивания

Исходный код YAML

Исходный код YAML контактной формы

3. Условные поля

Webform позволяет добавлять условную логику к элементам в форме. Давайте рассмотрим небольшой пример, в котором нам нужно условно обрабатывать видимость элементов на основе значения другого элемента в форме.

Вот пример формы с двухэтапными полями, ШАГ 1 (элемент «Радио») с параметрами «Электронная почта» и «Номер мобильного телефона». ШАГ 2 (Fieldset) с двумя элементами: «Электронная почта» и «Мобильный номер».

Страница сборки

Страница сборки формы

Страница просмотра формы

Страница просмотра формы

В приведенном выше примере я хотел бы показать поле «Электронная почта», если на шаге 1 выбрана опция «Электронная почта», иначе отображать поле «Мобильный номер», если на шаге 1 выбрана опция «Мобильный номер».

Для этого отредактируйте поле «Электронная почта», щелкните вкладку «Условия», выберите «Состояние» как «Видимый» и установите «Триггер / значение» как «ШАГ 1 [Радио] значение - электронная почта». Точно так же выполните те же действия, чтобы добавить условную логику в поле «Номер мобильного телефона» и установите для параметра «Триггер / значение» значение «ШАГ 1 [Радио], значение - номер_мобиля». Вот окончательный вид веб-формы:

Изменить элемент электронной почты

Настройка условной логики

Шаг 1

Форма при выборе "Электронная почта" на ШАГЕ 1

Шаг 2

Форма при выборе «Мобильного номера» на ШАГЕ 1

4. Свойства настраиваемых параметров

Webform позволяет добавлять свойства настраиваемых параметров к элементам from.

Представьте себе сценарий, в котором вы хотите условно обрабатывать параметры радиоэлемента на основе значения другого элемента в форме. Как бы Вы это сделали?

Что ж, я не нашел способа справиться с этим через настройки условной логики из пользовательского интерфейса. Но есть положение для установки «свойств настраиваемых параметров» для вашего элемента, при этом вы пишете необходимую условную логику, нацеленную на ваши параметры в элементе, используя код YAML.

Вот пример, где мы можем видеть два радиоэлемента, и в зависимости от параметра, который я выбираю в первом элементе, видимость параметров во втором элементе должна измениться.

Страница сборки формы

Страница сборки формы

Пользовательский вариант

Страница просмотра формы перед добавлением каких-либо свойств настраиваемых параметров:

  • Если выбран «Тип A», то «Вариант 1» и «Вариант 2» должны быть видны из второго элемента. Точно так же, если выбран «Тип B», то должны быть видны «Вариант 3» и «Вариант 4». Чтобы добиться этого, отредактируйте второй элемент, перейдите на вкладку «Дополнительно», прокрутите вниз до разделов «Параметры (настраиваемые) свойства» и напишите необходимую логику в YAML.
Элемент OptionРедактировать элемент опции

Настройка свойств опций

Выберите тип

Форма при выборе типа A

Выберите тип B

Форма при выборе типа B

5. Обработчики электронной почты для отправки веб-форм

  • Обработчики электронной почты

Обработчики электронной почты отправляют веб-форму по электронной почте. Чтобы добавить обработчики электронной почты в веб-форму, перейдите в «Настройки», а затем на вкладку «Электронная почта / Обработчики». Затем нажмите кнопку «Добавить адрес электронной почты / Добавить обработчик».

Обработчик электронной почты

Добавить обработчик электронной почты

  • Как показано на изображении ниже, на вкладке «Общие» добавьте «Заголовок» и установите параметры «Отправить» и «Отправить от». Добавьте сообщение «Тема» и «Тело» по мере необходимости и сохраните форму конфигурации.
подтверждение электронного адресаОбработчик подтвержденияОбработчик подтверждения электронной почтыСообщениеНазвание Описание

Вот и все. Ваш обработчик запускается при отправке формы.

  • Вы также можете установить условные обработчики электронной почты для своей веб-формы, то есть запускать разные обработчики электронной почты в зависимости от значения определенных элементов в форме.
  • Например, давайте рассмотрим элемент «Выбрать» со значениями «Тип 1» и «Тип 2». Если пользователь отправляет «Тип 1», активируйте обработчик «Электронная почта - Тип 1», который установил для адреса «Кому» значение « [электронная почта защищена] ». Если пользователь отправляет «Тип 2», активируйте обработчик «Электронная почта - Тип 2», который установил для адреса «Кому» значение « [электронная почта защищена] ».
  • Чтобы добавить условную логику к обработчику электронной почты, создайте один обработчик и назовите его «Электронная почта - Тип 1». Установите для адреса «Кому» значение « [электронная почта защищена] », перейдите на вкладку «Условия», выберите «Состояние» как «Видимый» и установите «Триггер / значение» как «Выбрать тип [Выбрать], значение - type_1».
  • Точно так же создайте второй обработчик и назовите его «Электронная почта - Тип 2». Установите для адреса «Кому» значение « [электронная почта защищена] », перейдите на вкладку «Условия», выберите «Состояние» как «Видимый» и установите «Триггер / значение» как «Выбрать тип [Выбрать], значение - тип_2».
Тип электронной почты

  • Запланированные обработчики электронной почты

    • Он расширяет обработчик электронной почты модуля Webform, позволяя планировать электронные письма. Чтобы использовать эту функцию, включите подмодуль «Запланированный обработчик электронной почты Webform».
    • Чтобы запланировать отправку электронного письма с отправкой формы, нажмите кнопку «Добавить обработчик». Выберите здесь обработчик "Запланированная электронная почта".
Выбрать обработчика

В обработчике «Запланированная электронная почта» есть только один дополнительный параметр конфигурации по сравнению с обычным «обработчиком электронной почты». И это добавить дату отправки расписания по электронной почте на вкладке Общие настройки.

Запланировать обработчик электронной почты

Запланированный обработчик электронной почты

Установите дату для запуска вашего обработчика, и при следующем запуске cron ваше письмо будет отправлено!

Поиск помощи

Есть разные способы обратиться за помощью к модулю веб-формы. Вот список из нескольких источников:

  • Документация, поваренная книга и скринкасты
    • https://www.drupal.org/docs/8/modules/webform
  • Очередь проблем веб-формы
    • https://www.drupal.org/project/issues/webform
  • Ответы Drupal
    • http://drupal.stackexchange.com
  • Slack канал
    • Вы всегда можете публиковать свои запросы относительно модуля Webform на канале #webform в рабочей области Drupal Slack. Любой из сообщества, даже сам сопровождающий модуля, всегда рядом и достаточно любезен, чтобы помочь вам с вашими проблемами.

ОГРОМНЫЙ привет Джейкобу Роковицу за его неустанную поддержку модуля Drupal 8/9 Webform. Без него Webform не была бы такой, как сейчас.