11/17/2019, by Ivan

В этом видео мы разберем как работать с мощным конструктором форм Webform. Давайте перейдем на страницу модулей, для того чтобы нам создавать вебформы, нам нужно включить модули Webform, Webform UI. Если вы хотите выводить вебформы как страницу ноды, тогда вам понадобиться модуль Webform Node.

Drupal Webform

В 6ый и 7ом Друпале Webform как раз работал с помощью страниц нод, вебформа прикреплялась к типу материала Webform. Для Drupal 8+ версии можно обойтись и без дополнительной страницы ноды, у каждой вебформы есть своя страница, а саму веб форму можно вывести блоком на любой страницу.

После того как включился модуль Webform, мы можем создавать новые вебформу

Если вы включили модуль Webform Node, то ссылку на создание вебформы можно найти по адресу Контент > Добаить материал > Webform. Для создаваемой страницы добавляем Заголовок и Описание, также можно выбрать существующую вебформу в поле Form или ничего не выбирать и будет создана новая вебформа.

/node/add/webform

Contact Us form

Для того чтобы создать саму форму нужно зайти в меню Структура - Webforms, чтобы потом вставить ее на страницу ноды. 
Сейчас у нас есть только одна форма контактов, давайте добавим новую форму. Вы, конечно, можете использовать стандартную форму, но чтобы посмотреть как работают поля в вебформе, мы создадим новую форму:

/admin/structure/webform

Drupal contact us form

Теперь можно добавить новые элементы на форму:

Текстовое поле - Наше имя

Drupal text field


Поле Телефон - Телефон

Webform phone

Модуль Webform использует Fields API Drupal и вы можете использовать любые поля, которые доступны для всех Entity на сайте, те поля которые можно прикрепить к нодам, блока, терминам таксономии и другим сущностям.


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

Здесь же вы можете сделать проверки через регулярные выражения. Но вы также можете добавить проверку поля программно через hook_form_alter() в дополнительном кастомном модуле.

Вы можете настроить классы для полей, например если вы используете Bootstrap для верстрке, то вы можете задать классы колонок для wrapper'а поля и тогда поля будут выравниваться в колонки, как вам нужно, col-md-6 для двухколоночной верстки например.

в разделе Form display можно настроить отображение вывода поля выводить или нет заголовок, добавить описание до или после поля, настроить placeholder, минимальное и максимальную длину поля.

Нам еще нужно добавить поле Email'а, чтобы мы ответить отправителю и текстовое поле где будет сообщение.


Настройки webform

Вы можете написать сообщение, если форма не работает.

Переопределить текст для кнопки Submit, добавить классы для верстки 

Wizard settings

Вы можете поменять label для кнопок Next / Previous в мультистраничных формах.


Описание других настроек.


Настройка Thank you message.


Вывод webform через блок в левой колонке.

Настройка отправления уведомлений в Webform.

 

Did this help?

Почему эта информация не была полезна?

Limit to 250 characters.