Revitalizează-ți formularele: îmbunătățirea experienței utilizatorului cu API-ul de formulare Drupal

Publicat: 2023-04-11

Știați că „oboseala formei” este un lucru?! Este un sentiment de epuizare când trebuie să completezi prea multe formulare. Dar formularele sunt o parte integrantă a unui site web și niciun proprietar de site nu poate (sau ar trebui) să se descurce fără ele. Deci, cum vă puteți asigura că site-ul dvs. web ajută la reducerea oboselii de formulare? Uşor! Păstrați-l simplu și scurt, oferiți instrucțiuni clare și concise, desfaceți formularele lungi și folosiți completarea automată. Cel mai important dintre toate, asigurați-vă că oferiți o experiență de utilizator plăcută pentru a le completa.

Formularul API-ul Drupal oferă o modalitate de a crea formulare ușor de personalizat și tematice pentru a se îmbina bine cu orice site web. Oferă dezvoltatorilor un set de funcții și API-uri pentru a crea, valida și procesa formulare în Drupal. Aprofundează-te în uimitoarea API Drupal Form și află cum o poți implementa în următorul tău proiect.

Drupal form Api

De ce Form API

După cum știți, formularele sunt o parte esențială a oricărui site web, deoarece permit utilizatorilor să interacționeze cu ele prin trimiterea de date. Folosind API-ul de formulare Drupal, dezvoltatorii pot crea formulare unice pentru diverse scopuri, inclusiv contact, autentificare și înregistrare. Câteva motive pentru care ar trebui să luați în considerare Form API:

  1. Este ușor de utilizat și nu necesită multă experiență de codare. Puteți crea formulare folosind un set de funcții simple și intuitive.
  2. Oferă funcții de validare încorporate care vă permit să validați cu ușurință datele din formular.
  3. Vine cu funcții de securitate încorporate care ajută la prevenirea atacurilor precum cross-site scripting (XSS) și cross-site request falsificare (CSRF).
  4. Este foarte personalizabil și poate fi folosit pentru a crea formulare complexe cu mai multe câmpuri, butoane și acțiuni.
  5. API-urile de formulare sunt tematice, astfel încât dezvoltatorii pot schimba CSS și HTML pentru ca formularele lor să arate așa cum doresc.
  6. Poate fi integrat cu ușurință cu alte API-uri Drupal.

Lucruri pe care trebuie să le știți înainte de a construi forme

Există diferite tipuri de forme care sunt adesea folosite în Drupal. Fiecare conține o clasă de bază pe care o puteți extinde într-un modul unic de design propriu.

Mai întâi, identificați tipul de formular pe care trebuie să îl construiți:

  • O formă generică. Extindeți FormBase.
  • Un formular de configurare care permite administratorilor să actualizeze setările unui modul. Extindeți ConfigFormBase.

Orice formular care are FormBase în ierarhia sa trebuie să implementeze următoarele metode, deoarece FormBase implementează FormInterface.

  • getFormId()
  • buildForm()
  • submitForm()

Pentru a crea un formular personalizat generic cu API-ul Form, va trebui să definiți o funcție care returnează o matrice de elemente de formular în interiorul buildForm() . Cheia fiecărui element este numele elementului de formular, iar valoarea este o matrice de proprietăți care definesc elementul. De exemplu, pentru a crea un câmp de text, ați defini un element astfel:

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

Adăugarea de validare

Form API oferă, de asemenea, o modalitate de a valida intrarea utilizatorului. Puteți adăuga funcții de validare la definiția formularului dvs., care vor fi apelate atunci când formularul este trimis. Dacă o funcție de validare returnează un mesaj de eroare, trimiterea formularului va fi împiedicată și mesajul de eroare va fi afișat utilizatorului.

Pentru a adăuga o funcție de validare, va trebui să implementați un validateForm() .

Procesarea trimiterilor de formulare

Când este trimis un formular, Drupal apelează o funcție de trimitere pe care o definiți. Funcția de trimitere poate efectua orice procesare necesară a datelor din formular, cum ar fi salvarea lor în baza de date

Pentru a defini o funcție de trimitere, va trebui să implementați un submitForm()

Integrați formularul într-o cerere

Pentru a integra acest formular în structura URI a unui site Drupal, utilizați o rută ca următoarea:

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

Cheia _form spune sistemului de rutare că numele de clasă furnizat este o clasă de formular care trebuie instanțiată și tratată ca formular.

Crearea unui formular personalizat cu Drupal Form API

Urmați acești pași simpli pentru a începe procesul de creare a unui formular personalizat cu API-ul de formulare Drupal:

  1. Creați un .info.yml în interiorul unui modul personalizat. ( Deoarece creăm un modul separat pentru formularele personalizate, acest pas nu este necesar pentru adăugarea de formulare într-un modul existent ).
  2. Creați o clasă de formular pentru returnarea matricei de formulare. (modul_personalizat/src/Form/Registration.php )
  3. Creați un fișier .routing.yml
  4. Creați un .module și hook_form_alter() și/sau hook_form_FORM_ID_alter() pentru a modifica forma ( dacă este necesar ).

Iată un exemplu complet de formular de înregistrare a angajatului:

Structura folderului:

înregistrarea angajaților

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/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. employee_registration.routing.yml

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

Rezultat:

formular de înregistrare a angajatului

pagina de rezultate reg emp

Gânduri finale

Form API vă permite să creați formulare complexe și personalizate cu funcții de validare și procesare în Drupal. Când utilizați Form API, puteți fi sigur că formularele dvs. sunt consecvente și ușor de utilizat pentru utilizatori. Căutați o agenție Drupal care să vă ajute să construiți o experiență ușor de utilizat pentru publicul dvs.? Discutați astăzi cu experții noștri Drupal!