Une plongée en profondeur dans le module de formulaire Web pour Drupal 8/9

Le module Webform est le générateur de formulaires et le gestionnaire de soumissions le plus puissant et le plus flexible pour Drupal. Il donne aux constructeurs de sites le pouvoir de créer facilement des formulaires complexes instantanément. Il est livré avec un certain niveau de paramètres par défaut, vous permettant également de le personnaliser selon vos besoins.

Consultez cet incroyable blog - Drupal 8 Webform Module - Un bref didacticiel pour vous aider à démarrer avec le module Webform sur votre site Drupal 8/9. Cela vous aidera à comprendre les bases facilement.

Le module Webform est livré avec de nombreuses fonctionnalités intéressantes et j'aimerais en mentionner quelques-unes ici.

Fonctionnalités du formulaire Web

1. Modification de la forme et des éléments

Tout formulaire, élément et ses paramètres associés peuvent être modifiés à l'aide de leurs crochets respectifs. Vous trouverez ci-dessous quelques crochets disponibles et vous pouvez en trouver plus dans le fichier webform.api.php :

• Forme des crochets

hook_webform_submission_form_alter()
Effectuez des modifications avant qu'un formulaire de soumission de formulaire Web ne soit rendu.

• Crochets d'élément

hook_webform_element_alter()
Modifier les éléments du formulaire Web.

• Crochets en option

hook_webform_options_alter()
Modifier les options du formulaire Web.

• Crochets de manutention

hook_webform_handler_invoke_alter()
Agir sur un gestionnaire de formulaire Web lorsqu'une méthode est invoquée.

• plus de crochets…

hook_webform_access_rules_alter() etc.
◦ Modifier la liste des règles d'accès qui doivent être gérées par niveau de formulaire Web.

2. Source YAML

Le module Webform a commencé en tant que module de formulaire YAML, qui permettait aux utilisateurs de créer des formulaires en écrivant un balisage YAML. À un moment donné, le module de formulaire YAML a commencé à avoir une interface utilisateur et est devenu le module de formulaire Web pour Drupal 8.

• YAML fournit un langage de balisage simple et facile à apprendre pour créer et éditer en masse les éléments d'un formulaire Web.
• La page (Afficher) Source permet aux développeurs de modifier le tableau de rendu d'un formulaire Web à l'aide du balisage YAML. Les développeurs peuvent utiliser la page (Afficher) Source pour coder manuellement des formulaires Web afin de modifier rapidement les étiquettes d'un formulaire Web, couper-coller plusieurs éléments, réorganiser les éléments, ainsi qu'ajouter des propriétés personnalisées et un balisage aux éléments.
• Voici un exemple de formulaire de contact et son code source YAML correspondant :

Un formulaire de contact avec une interface utilisateur par glisser-déposer

Le code source YAML du formulaire de contact

3. Champs conditionnels

Webform vous permet d'ajouter une logique conditionnelle à vos éléments dans votre formulaire. Considérons un petit exemple, dans lequel nous devons gérer de manière conditionnelle la visibilité des éléments en fonction de la valeur d'un autre élément dans le formulaire.

Voici un exemple de formulaire avec des champs en deux étapes, ÉTAPE 1 (élément Radios) avec les options « Email » et « Numéro de mobile ». ÉTAPE 2 (Fieldset) avec deux éléments, « Email » et « Numéro de mobile ».

Page de création de formulaire

Page d'affichage du formulaire

Dans l'exemple ci-dessus, je voudrais afficher le champ 'Email' si l'option 'Email' est choisie à l'étape 1, sinon afficher le champ 'Numéro de mobile' si l'option 'Numéro de mobile' est choisie à l'étape 1.

Pour ce faire, modifiez votre champ « E-mail », cliquez sur l'onglet « Conditions », choisissez l'« État » comme « Visible » et définissez le « Déclencheur/Valeur » comme « ÉTAPE 1 La valeur [Radios] est un e-mail ». De même, suivez les mêmes étapes pour ajouter une logique conditionnelle à votre champ « Numéro de mobile » et définissez le « Trigger/Value » comme « STEP 1 [Radios] value is mobile_number ». Voici l'aspect final du formulaire Web :

Configuration de la logique conditionnelle

Formulaire lorsque 'Email' est choisi à l'ÉTAPE 1

Formulaire lorsque « Numéro de mobile » est choisi à l'ÉTAPE 1

4. Propriétés des options personnalisées

Webform vous permet d'ajouter des propriétés d'option personnalisées à vos éléments from.

Imaginez un scénario dans lequel vous voudriez gérer de manière conditionnelle les options d'un élément radio en fonction de la valeur d'un élément différent dans le formulaire. Comment feriez-vous cela?

Eh bien, je n'ai trouvé aucun moyen de le gérer via les paramètres de logique conditionnelle de l'interface utilisateur. Mais il existe une disposition pour définir des « propriétés d'options personnalisées » pour votre élément, dans laquelle vous écrivez la logique conditionnelle requise ciblant vos options dans l'élément à l'aide du code YAML.

Voici un exemple, où nous pouvons voir deux éléments radio et en fonction de l'option que je sélectionne dans le premier élément, la visibilité des options dans le deuxième élément devrait changer.

Page de création de formulaire

Page d'affichage du formulaire avant d'ajouter des propriétés d'options personnalisées :

• Si 'Type A' est choisi, alors 'Option 1' et 'Option 2' devraient être visibles à partir du deuxième élément. De même, si 'Type B' est choisi, alors 'Option 3' et 'Option 4' devraient être visibles. Pour y parvenir, modifiez le deuxième élément, accédez à l'onglet "Avancé", faites défiler jusqu'aux sections "Options (personnalisées) propriétés" et écrivez la logique nécessaire en YAML.

Configuration des propriétés des options

Formulaire lorsque 'Type A' est choisi

Formulaire lorsque 'Type B' est choisi

5. Gestionnaires d'e-mails de soumission de formulaires Web

• Gestionnaires d'e-mails

Les gestionnaires de courrier électronique envoient une soumission de formulaire Web par courrier électronique. Pour ajouter des gestionnaires d'e-mails à votre formulaire Web, accédez à « Paramètres », puis à l'onglet « E-mails/Gestionnaires ». Ensuite, cliquez sur le bouton « Ajouter un e-mail / Ajouter un gestionnaire ».

Ajouter un gestionnaire d'e-mails

• Comme le montre l'image ci-dessous, dans l'onglet « Général », ajoutez le « Titre » et définissez les détails « Envoyer à » et « Envoyer de ». Ajoutez le message « Sujet » et « Corps » selon les besoins et enregistrez le formulaire de configuration.

Et c'est à peu près tout. Votre gestionnaire est renvoyé chaque fois que le formulaire est soumis.

• Vous pouvez également définir des gestionnaires d'e-mails conditionnels sur votre formulaire Web, c'est-à-dire déclencher différents gestionnaires d'e-mails en fonction de la valeur de certains éléments du formulaire.
• Par exemple, considérons un élément 'Select' avec les valeurs 'Type 1' et 'Type 2'. Si l'utilisateur soumet 'Type 1', déclenchez le gestionnaire 'Email - Type 1' qui a défini l'adresse 'To' sur ' [email protected] '. Si l'utilisateur soumet 'Type 2', déclenchez le gestionnaire 'Email - Type 2' qui a défini l'adresse 'To' sur ' [email protected] '.
• Pour ajouter une logique conditionnelle à votre gestionnaire d'e-mails, créez un gestionnaire et nommez-le « E-mail - Type 1 ». Définissez l'adresse « À » sur « [email protected] », passez à l'onglet « Conditions », choisissez l'« État » comme « Visible » et définissez le « Déclencheur/Valeur » comme « Sélectionnez le type [Sélectionner] la valeur est type_1 ».
• De même, créez le deuxième gestionnaire et nommez-le « Email - Type 2 ». Définissez l'adresse 'To' sur ' [email protected] ', passez à l'onglet 'Conditions', choisissez 'State' comme 'Visible' et définissez 'Trigger/Value' comme 'Select Type [Select] value is type_2'.

• Gestionnaires d'e-mails programmés

  • Il étend le gestionnaire d'e-mails du module Webform pour permettre la planification des e-mails. Pour utiliser cette fonctionnalité, activez le sous-module 'Webform Scheduled Email Handler'.
  • Pour programmer l'envoi d'un e-mail des soumissions de formulaires, cliquez sur le bouton « Ajouter un gestionnaire ». Sélectionnez le gestionnaire « E-mail programmé » ici.

Il n'y a qu'un seul paramètre de configuration supplémentaire dans le gestionnaire « E-mail programmé » par rapport au « gestionnaire d'e-mail » normal. Et c'est d'ajouter la date de l'e-mail de planification sous l'onglet Paramètres généraux.

Gestionnaire d'e-mails programmé

Définissez la date de déclenchement de votre gestionnaire et lorsque le prochain cron sera exécuté, votre e-mail sera envoyé !

Trouver de l'aide

Il existe différentes manières de demander de l'aide avec le module de formulaire Web. Voici une liste de quelques sources :

• Documentation, livre de recettes et captures d'écran
  • https://www.drupal.org/docs/8/modules/webform
• File d'attente des problèmes de formulaire Web
  • https://www.drupal.org/project/issues/webform
• Réponses Drupal
  • http://drupal.stackexchange.com
• Canal Slack
  • Vous pouvez toujours publier vos requêtes concernant le module Webform sur le canal #webform dans l'espace de travail Drupal slack. Tous les membres de la communauté, même les responsables du module eux-mêmes, sont toujours là et ont la gentillesse de vous guider dans vos problèmes.

Un GRAND bravo à Jacob Rockowitz pour son soutien indéfectible envers le module Drupal 8/9 Webform. Webform n'aurait pas été ce qu'il est maintenant sans lui.