Revitalisez vos formulaires : améliorez l'expérience utilisateur avec l'API de formulaire de Drupal

Publié: 2023-04-11

Saviez-vous que la "fatigue des formes" est une chose ? ! C'est un sentiment d'épuisement quand on doit remplir trop de formulaires. Mais les formulaires font partie intégrante d'un site Web et aucun propriétaire de site ne peut (ou ne doit) s'en passer. Alors, comment pouvez-vous vous assurer que votre site Web aide à réduire la fatigue des formulaires ? Facile! Gardez-le simple et court, offrez des instructions claires et concises, décomposez les longs formulaires et utilisez le remplissage automatique. Plus important encore, assurez-vous d'offrir une expérience utilisateur aisée pour les remplir.

L'API de formulaire de Drupal offre un moyen de créer des formulaires facilement personnalisables et thématiques pour bien se fondre avec n'importe quel site Web. Il fournit aux développeurs un ensemble de fonctions et d'API pour créer, valider et traiter des formulaires dans Drupal. Plongez plus profondément dans l'incroyable API Drupal Form et découvrez comment vous pouvez l'implémenter dans votre prochain projet.

Formulaire Drupal Api

Pourquoi l'API de formulaire

Comme vous le savez, les formulaires sont un élément crucial de chaque site Web car ils permettent aux utilisateurs d'interagir avec eux en soumettant des données. À l'aide de l'API Form de Drupal, les développeurs peuvent créer des formulaires uniques à diverses fins, notamment le contact, la connexion et l'inscription. Quelques raisons pour lesquelles vous devriez envisager l'API Form :

  1. Il est facile à utiliser et ne nécessite pas beaucoup d'expérience en codage. Vous pouvez créer des formulaires à l'aide d'un ensemble de fonctions simples et intuitives.
  2. Il fournit des fonctions de validation intégrées qui vous permettent de valider facilement les données du formulaire.
  3. Livré avec des fonctionnalités de sécurité intégrées qui aident à prévenir les attaques telles que les scripts intersites (XSS) et la falsification de requêtes intersites (CSRF).
  4. Il est hautement personnalisable et peut être utilisé pour créer des formulaires complexes avec plusieurs champs, boutons et actions.
  5. Les API de formulaire sont thématiques, de sorte que les développeurs peuvent modifier CSS et HTML pour donner à leurs formulaires l'apparence qu'ils souhaitent.
  6. Il peut être facilement intégré à d'autres API Drupal.

Ce que vous devez savoir avant de créer des formulaires

Il existe différents types de formulaires qui sont souvent utilisés dans Drupal. Chacun contient une classe de base que vous pouvez étendre dans un module unique de votre propre conception.

Tout d'abord, identifiez le type de formulaire que vous devez créer :

  • Une forme générique. Étendre FormBase.
  • Un formulaire de configuration qui permet aux administrateurs de mettre à jour les paramètres d'un module. Étendez ConfigFormBase.

Tout formulaire qui a FormBase dans sa hiérarchie doit implémenter les méthodes suivantes puisque FormBase implémente FormInterface.

  • getFormId()
  • buildForm()
  • soumettre le formulaire()

Pour créer un formulaire personnalisé générique avec l'API Form, vous devez définir une fonction qui renvoie un tableau d'éléments de formulaire dans buildForm() . La clé de chaque élément est le nom de l'élément du formulaire et la valeur est un tableau de propriétés qui définissent l'élément. Par exemple, pour créer un champ de texte, vous définiriez un élément comme celui-ci :

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

Ajout de validation

L'API de formulaire fournit également un moyen de valider les entrées de l'utilisateur. Vous pouvez ajouter des fonctions de validation à votre définition de formulaire qui seront appelées lors de la soumission du formulaire. Si une fonction de validation renvoie un message d'erreur, la soumission du formulaire sera empêchée et le message d'erreur sera affiché à l'utilisateur.

Pour ajouter une fonction de validation, vous devrez implémenter un validateForm() .

Traitement des soumissions de formulaire

Lorsqu'un formulaire est soumis, Drupal appelle une fonction de soumission que vous définissez. La fonction de soumission peut effectuer tout traitement nécessaire des données du formulaire, comme l'enregistrer dans la base de données

Pour définir une fonction de soumission, vous devrez implémenter un submitForm()

Intégrer le formulaire dans une requête

Pour intégrer ce formulaire dans la structure URI d'un site Drupal, utilisez une route comme celle-ci :

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

La clé _form indique au système de routage que le nom de classe fourni est une classe de formulaire à instancier et à gérer comme un formulaire.

Créer un formulaire personnalisé avec Drupal Form API

Suivez ces étapes faciles pour commencer le processus de création d'un formulaire personnalisé avec l'API Form de Drupal :

  1. Créez un .info.yml dans un module personnalisé. ( Comme nous créons un module séparé pour les formulaires personnalisés, cette étape n'est pas nécessaire pour ajouter des formulaires dans un module existant ).
  2. Créez une classe de formulaire pour renvoyer le tableau de formulaire. (module_personnalisé/src/Form/Registration.php )
  3. Créer un fichier .routing.yml
  4. Créez un .module et hook_form_alter() et/ou hook_form_FORM_ID_alter() pour modifier le formulaire ( si nécessaire ).

Voici un exemple complet de formulaire d'inscription d'employé :

Arborescence des dossiers :

inscription des employés

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/Formulaire/Inscription.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. enregistrement_employé.routing.yml

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

Résultat:

formulaire d'inscription des employés

page de résultats emp reg

Dernières pensées

L'API de formulaire vous permet de créer des formulaires complexes et personnalisés avec des fonctions de validation et de traitement dans Drupal. Lorsque vous utilisez Form API, vous pouvez être sûr que vos formulaires sont cohérents et faciles à utiliser pour vos utilisateurs. Vous recherchez une agence Drupal pour vous aider à créer une expérience conviviale pour votre public ? Parlez à nos experts Drupal dès aujourd'hui !