Ożyw swoje formularze: poprawa doświadczenia użytkownika dzięki interfejsowi API formularzy Drupala

Opublikowany: 2023-04-11

Czy wiesz, że „zmęczenie formą” to coś?! To uczucie wyczerpania, gdy trzeba wypełnić zbyt wiele formularzy. Ale formularze są integralną częścią strony internetowej i żaden właściciel witryny nie może (ani nie powinien) się bez nich obejść. Jak więc upewnić się, że Twoja witryna pomaga zmniejszyć zmęczenie formularzem? Łatwy! Postaraj się, aby były one proste i krótkie, oferuj jasne i zwięzłe instrukcje, dziel długie formularze i używaj autouzupełniania. Co najważniejsze, upewnij się, że oferujesz przewiewne wrażenia użytkownika, aby je wypełnić.

Drupal's Form API oferuje sposób tworzenia łatwo dostosowywalnych i tematycznych formularzy, które dobrze komponują się z dowolną stroną internetową. Zapewnia programistom zestaw funkcji i interfejsów API do tworzenia, sprawdzania poprawności i przetwarzania formularzy w Drupalu. Zagłęb się w niesamowity Drupal Form API i dowiedz się, jak możesz go zaimplementować w swoim następnym projekcie.

Drupal z API

Dlaczego formularz API

Jak wiesz, formularze są istotną częścią każdej witryny, ponieważ pozwalają użytkownikom na interakcję z nimi poprzez przesyłanie danych. Korzystając z Drupala Form API, programiści mogą tworzyć unikalne formularze do różnych celów, w tym kontaktu, logowania i rejestracji. Kilka powodów, dla których warto rozważyć Form API:

  1. Jest łatwy w użyciu i nie wymaga dużego doświadczenia w kodowaniu. Możesz tworzyć formularze za pomocą zestawu prostych i intuicyjnych funkcji.
  2. Zapewnia wbudowane funkcje sprawdzania poprawności, które pozwalają łatwo sprawdzać poprawność danych formularza.
  3. Zawiera wbudowane funkcje bezpieczeństwa, które pomagają zapobiegać atakom, takim jak cross-site scripting (XSS) i cross-site request forgery (CSRF).
  4. Jest wysoce konfigurowalny i może być używany do tworzenia złożonych formularzy z wieloma polami, przyciskami i akcjami.
  5. Interfejsy API formularzy są tematyczne, więc programiści mogą zmieniać CSS i HTML, aby ich formularze wyglądały tak, jak chcą.
  6. Można go łatwo zintegrować z innymi interfejsami API Drupala.

Rzeczy, które musisz wiedzieć przed budowaniem formularzy

Istnieją różne rodzaje formularzy, które są często używane w Drupalu. Każda zawiera klasę bazową, którą można rozszerzyć w unikalny moduł własnego projektu.

Najpierw określ typ formularza, który chcesz zbudować:

  • Ogólna forma. Rozszerz FormBase.
  • Formularz konfiguracyjny umożliwiający administratorom aktualizację ustawień modułu. Rozszerz ConfigFormBase.

Każdy formularz, który ma FormBase w swojej hierarchii, musi implementować następujące metody, ponieważ FormBase implementuje FormInterface.

  • getFormId()
  • buildForm()
  • prześlijForm()

Aby utworzyć ogólny formularz niestandardowy za pomocą interfejsu Form API, musisz zdefiniować funkcję zwracającą tablicę elementów formularza wewnątrz funkcji buildForm() . Kluczem każdego elementu jest nazwa elementu formularza, a wartością jest tablica właściwości definiujących element. Na przykład, aby utworzyć pole tekstowe, należy zdefiniować taki element:

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

Dodanie walidacji

Form API zapewnia również sposób sprawdzania poprawności danych wprowadzonych przez użytkownika. Do definicji formularza można dodać funkcje sprawdzania poprawności, które będą wywoływane po przesłaniu formularza. Jeśli funkcja sprawdzania poprawności zwróci komunikat o błędzie, wysłanie formularza zostanie uniemożliwione, a komunikat o błędzie zostanie wyświetlony użytkownikowi.

Aby dodać funkcję sprawdzania poprawności, musisz zaimplementować validateForm() .

Przetwarzanie przesłanych formularzy

Po przesłaniu formularza Drupal wywołuje zdefiniowaną przez Ciebie funkcję przesyłania. Funkcja wysyłania może wykonać wszelkie niezbędne przetwarzanie danych formularza, takie jak zapisanie ich w bazie danych

Aby zdefiniować funkcję wysyłania, musisz zaimplementować metodę submitForm()

Zintegruj formularz z żądaniem

Aby zintegrować ten formularz ze strukturą URI witryny Drupal, użyj następującej trasy:

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

Klucz _form informuje system routingu, że podana nazwa klasy jest klasą formularza, która ma zostać utworzona i traktowana jako formularz.

Tworzenie niestandardowego formularza za pomocą Drupal Form API

Wykonaj te proste kroki, aby rozpocząć proces tworzenia niestandardowego formularza za pomocą Drupal's Form API:

  1. Utwórz plik .info.yml w module niestandardowym. ( Ponieważ tworzymy osobny moduł dla formularzy niestandardowych, ten krok nie jest wymagany w przypadku dodawania formularzy w istniejącym module ).
  2. Utwórz klasę formularza do zwracania tablicy formularzy. (custom_module/src/Form/Registration.php )
  3. Utwórz plik .routing.yml
  4. Utwórz .module i hook_form_alter() i/lub hook_form_FORM_ID_alter() , aby zmienić formularz ( w razie potrzeby ).

Oto pełny przykład formularza rejestracji pracownika:

Struktura folderów:

rejestracja pracowników

1. rejestracja_pracownika.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/Form/Registration.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. rejestracja_pracownika.routing.yml

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

Wynik:

formularz rejestracyjny pracownika

strona wyników rejestru emp

Końcowe przemyślenia

Form API pozwala tworzyć złożone i dostosowane formularze z funkcjami walidacji i przetwarzania w Drupalu. Korzystając z Form API, możesz mieć pewność, że Twoje formularze są spójne i łatwe w użyciu dla użytkowników. Szukasz agencji Drupal, która pomoże Ci zbudować przyjazne dla użytkownika doświadczenie dla odbiorców? Porozmawiaj z naszymi ekspertami od Drupala już dziś!