Оживите свои формы: улучшите взаимодействие с пользователем с помощью Drupal Form API

Опубликовано: 2023-04-11

Знаете ли вы, что существует «усталость от формы»?! Это чувство усталости, когда вам нужно заполнить слишком много форм. Но формы — неотъемлемая часть сайта, и без них не может (или не должен) обходиться ни один владелец сайта. Итак, как вы можете убедиться, что ваш веб-сайт помогает уменьшить усталость от форм? Легкий! Сохраняйте простоту и краткость, предлагайте четкие и лаконичные инструкции, разбивайте длинные формы и используйте автозаполнение. Самое главное, убедитесь, что вы предлагаете легкий пользовательский интерфейс для их заполнения.

Drupal Form API предлагает способ создания легко настраиваемых и тематических форм, которые хорошо сочетаются с любым веб-сайтом. Он предоставляет разработчикам набор функций и API для создания, проверки и обработки форм в Drupal. Погрузитесь глубже в удивительный Drupal Form API и узнайте, как вы можете реализовать его в своем следующем проекте.

Drupal форма API

Почему API форм

Как вы знаете, формы являются важной частью каждого веб-сайта, поскольку они позволяют пользователям взаимодействовать с ними, отправляя данные. Используя Drupal Form API, разработчики могут создавать уникальные формы для различных целей, включая контакты, вход и регистрацию. Несколько причин, почему вы должны рассмотреть Form API:

  1. Он прост в использовании и не требует большого опыта кодирования. Вы можете создавать формы, используя набор простых и интуитивно понятных функций.
  2. Он предоставляет встроенные функции проверки, которые позволяют легко проверять данные формы.
  3. Поставляется со встроенными функциями безопасности, которые помогают предотвратить атаки, такие как межсайтовый скриптинг (XSS) и подделка межсайтовых запросов (CSRF).
  4. Он легко настраивается и может использоваться для создания сложных форм с несколькими полями, кнопками и действиями.
  5. API-интерфейсы форм поддерживают темы, поэтому разработчики могут изменять CSS и HTML, чтобы их формы выглядели так, как они хотят.
  6. Его можно легко интегрировать с другими API Drupal.

Что нужно знать перед созданием форм

Существуют различные виды форм, которые часто используются в Drupal. Каждый из них содержит базовый класс, который вы можете расширить в виде уникального модуля собственной разработки.

Во-первых, определите тип формы, которую вам нужно построить:

  • Общая форма. Расширьте FormBase.
  • Форма конфигурации, которая позволяет администраторам обновлять настройки модуля. Расширьте ConfigFormBase.

Любая форма, имеющая FormBase в своей иерархии, должна реализовывать следующие методы, поскольку FormBase реализует FormInterface.

  • получить идентификатор формы ()
  • построитьформу()
  • представить форму()

Чтобы создать общую пользовательскую форму с помощью Form API, вам нужно определить функцию, которая возвращает массив элементов формы внутри buildForm() . Ключ каждого элемента — это имя элемента формы, а значение — массив свойств, определяющих элемент. Например, чтобы создать текстовое поле, вы должны определить такой элемент:

 $form['emp_name'] = [ '#type' => 'textfield', '#title' => $this->t('Enter Name'), '#required' => TRUE, ];

Добавление проверки

Form API также предоставляет способ проверки ввода пользователя. Вы можете добавить функции проверки в определение формы, которые будут вызываться при отправке формы. Если функция проверки возвращает сообщение об ошибке, отправка формы будет предотвращена, и пользователю будет показано сообщение об ошибке.

Чтобы добавить функцию проверки, вам нужно будет реализовать validateForm() .

Обработка отправленных форм

Когда форма отправляется, Drupal вызывает функцию отправки, которую вы определяете. Функция отправки может выполнять любую необходимую обработку данных формы, например, сохранять их в базу данных.

Чтобы определить функцию отправки, вам нужно будет реализовать submitForm()

Интеграция формы в запрос

Чтобы интегрировать эту форму в структуру URI сайта Drupal, используйте следующий маршрут:

 example.form: path: '/example-form' defaults: _title: 'Example form' _form: '\Drupal\example\Form\ExampleForm' requirements: _permission: 'access content'

Ключ _form сообщает системе маршрутизации, что предоставленное имя класса является классом формы, который должен быть создан и обработан как форма.

Создание пользовательской формы с Drupal Form API

Следуйте этим простым шагам, чтобы начать процесс создания пользовательской формы с помощью Drupal Form API:

  1. Создайте .info.yml внутри пользовательского модуля. ( Поскольку мы создаем отдельный модуль для пользовательских форм, этот шаг не требуется для добавления форм в существующий модуль ).
  2. Создайте класс формы для возврата массива формы. (пользовательский_модуль/src/Форма/Регистрация.php )
  3. Создайте файл .routing.yml
  4. Создайте .module и hook_form_alter() и/или hook_form_FORM_ID_alter(), чтобы изменить форму ( при необходимости ).

Вот полный пример формы регистрации сотрудника:

Структура папки:

регистрация сотрудников

1. employee_registration.info.yml

 name: Employee Registration Form type: module description: Custom module for implementing custom employee registration form. core_version_requirement: ^9 || ^10 package: Custom

2. src/Форма/Регистрация.php

 <?php namespace Drupal\employee_registration\Form; use Drupal\Core\Form\FormBase; use Drupal\Core\Form\FormStateInterface; /** * Implements a custom form. */ class Registration extends FormBase { /** * {@inheritdoc} */ public function getFormId() { return 'employee_registration_form'; } /** * {@inheritdoc} */ public function buildForm(array $form, FormStateInterface $form_state) { $form['emp_name'] = [ '#type' => 'textfield', '#title' => $this->t('Enter Name'), '#required' => TRUE, ]; $form['emp_no'] = [ '#type' => 'textfield', '#title' => $this->t('Enter Employee Number'), '#required' => TRUE, ]; $form['emp_mail'] = [ '#type' => 'email', '#title' => $this->t('Enter Email ID'), '#required' => TRUE, ]; $form['emp_phone'] = [ '#type' => 'tel', '#title' => $this->t('Enter Contact Number'), ]; $form['emp_dob'] = [ '#type' => 'date', '#title' => $this->t('Enter DOB'), '#required' => TRUE, ]; $form['emp_gender'] = [ '#type' => 'select', '#title' => $this->t('Select Gender'), '#options' => [ 'Male' => $this->t('Male'), 'Female' => $this->t('Female'), 'Other' => $this->t('Other'), ], ]; $form['submit'] = [ '#type' => 'submit', '#value' => $this->t('Save'), '#button_type' => 'primary', ]; return $form; } /** * {@inheritdoc} */ public function validateForm(array &$form, FormStateInterface $form_state) { if (strlen($form_state->getValue('emp_phone')) < 10) { $form_state->setErrorByName('emp_phone', $this->t('The phone number is too short. Please enter a full phone number.')); } } /** * {@inheritdoc} */ public function submitForm(array &$form, FormStateInterface $form_state) { // Processing form data. $this->messenger()->addMessage($this->t("Employee Registration Done!!")); foreach ($form_state->getValues() as $key => $value) { $this->messenger()->addMessage($key . ': ' . $value); } } }

3. employee_registration.routing.yml

 employee_registration.form: path: '/registration-form' defaults: _title: 'Employee Registration' _form: '\Drupal\employee_registration\Form\Registration' requirements: _permission: 'access content'

Результат:

регистрационная форма сотрудника

Страница результатов emp reg

Последние мысли

Form API позволяет создавать сложные и настраиваемые формы с функциями проверки и обработки в Drupal. Когда вы используете API форм, вы можете быть уверены, что ваши формы согласованны и просты в использовании для ваших пользователей. Ищете агентство Drupal, которое поможет вам создать удобный интерфейс для вашей аудитории? Поговорите с нашими экспертами Drupal сегодня!