Module de formulaire Web Drupal 8 - Un bref tutoriel

Le module Drupal 8 Webform est un module contribué et l'un des modules les plus puissants et les plus flexibles de Drupal 8. Il s'agit d'un module open source utilisé pour créer des formulaires et gérer la soumission. Drupal Webform fait également partie de notre liste des meilleurs modules Drupal dont vous avez absolument besoin pour votre prochain projet Drupal ! Apprenez-en plus sur le module polyvalent dans ce didacticiel de formulaire Web Drupal 8.

Drupal Webform est un module très polyvalent qui est utilisé pour créer des formulaires et extraire des informations des utilisateurs des sites Web Drupal. Par exemple, nous pouvons utiliser le module de formulaire Web Drupal pour créer des sondages, des formulaires de contact, des formulaires de commentaires et bien plus encore. Après la soumission, ce module permettra d'envoyer des courriels à l'utilisateur et pourra envoyer des notifications à l'administrateur concernant la soumission. Il existe des options pour afficher la soumission, la publier en tant que nœud, page ou bloc et exporter les résultats dans un fichier CSV.

Premiers pas avec le module Drupal 8 Webform

La communauté Drupal nous a fourni des modules phénoménaux et Drupal Webform est certainement l'un d'entre eux. Jacob Rockowitz, le constructeur et le mainteneur du module Webform, avait déjà discuté avec nous de Webform et de sa contribution à la communauté Drupal. « Chacun a un rythme/style personnel pour la création de logiciels. Après 20 ans d'écriture de logiciels, j'en suis venu à accepter que j'aime travailler vers un seul objectif/projet, qui est le module Webform pour Drupal 8. En même temps, j'ai également appris que la création de logiciels open source est plus qu'un simple code de contribution ; il s'agit de soutenir et de créer une communauté autour du code. » En savoir plus sur Jacob et de nombreux autres contributeurs de la communauté Drupal ici.
Maintenant, commençons par installer le module de formulaire Web Drupal 8 et créer des formulaires Web.

Installer et activer le module Drupal Webform

Téléchargez le module Drupal 8 Webform depuis https://www.drupal.org/project/webform et activez-le.

Pour activer le formulaire Web, accédez à Étendre et dans la catégorie Formulaire Web, vous verrez un formulaire Web avec la case à cocher. Pour travailler avec Drupal 8, les formulaires Web activent l'API de champ, le module système, le module utilisateur. Sans activer ces trois modules, le formulaire Web ne peut pas être activé.
Il existe de nombreuses options sous le formulaire Web qui fournissent des fonctions spécifiques. Activez-les selon les besoins.

Créer un nouveau formulaire Web Drupal

Pour créer un nouveau formulaire Web Drupal 8, activez l'interface utilisateur Webform et Webform Access. L'interface utilisateur Webform fournit une bonne interface utilisateur pour créer/maintenir des formulaires Web et Webform Access contrôle les nœuds de formulaire Web. Activez le nœud de formulaire Web avant d'activer l'accès au formulaire Web. Ensuite, allez dans Structure > Webforms .

Voici quelques options pour les formulaires Web.

• Dans le premier onglet, Formulaires, se trouve une liste de formulaires Web créés. Par défaut, il existe un formulaire de contact. Il s'agit du modèle fourni par le module Webform.
• Il y a plus de modèles dans le deuxième onglet Modèles.
• Dans l'onglet Soumissions, nous pouvons voir les formulaires soumis par les utilisateurs.
• Les options ont un ensemble de valeurs réutilisables prédéfinies qui sont disponibles pour les boutons radio, les cases à cocher et les menus.
• Il y a quelques autres valeurs réutilisables dans l'onglet Modules complémentaires.
• Dans Configurations, les paramètres généraux des formulaires Web sont fournis.

Pour créer un nouveau formulaire Web –

1. Cliquez sur Ajouter un formulaire Web.
2. En cliquant sur Ajouter un formulaire Web, un onglet s'ouvre avec le titre, la description, la catégorie et le statut.
3. Ajoutez un titre au formulaire Web et une brève description du formulaire Web.
4. À la fin, sous Statut, il y a deux options ouvertes et fermées. Cela signifie que si le statut est « ouvert », le formulaire est disponible pour l'utilisateur, sinon il est fermé. Après avoir modifié toutes les options, cliquez sur Enregistrer . Par exemple, ici le titre est ' Inscription '.

Ajout de champs au formulaire Web Drupal 8

En cliquant sur Enregistrer, une page s'ouvre avec le titre du formulaire Web donné (ici – Inscription).

● Pour ajouter les champs au formulaire Web, cliquez sur + Ajouter un élément .
● En cliquant sur + Ajouter un élément, une fenêtre contextuelle apparaît avec la liste des champs pouvant être utilisés dans le formulaire Web.

Pour prévisualiser les éléments, cliquez sur Afficher l'aperçu en haut à droite. Pour ajouter l'élément, cliquez sur l' élément Ajouter de l'élément respectif. En cliquant, la fenêtre contextuelle s'ouvre sur le côté droit de la page.

Ici, il existe des options pour modifier le nom du titre et de nombreux paramètres avancés pour le champ. Après avoir apporté toutes les modifications aux paramètres, cliquez sur le bouton Enregistrer à la fin. Cliquez sur la case à cocher sous requis pour tous les champs requis dans le formulaire Web.

● Vous pouvez afficher le formulaire Web créé en cliquant sur l'onglet Afficher en haut. Le bouton Soumettre est créé automatiquement lors de l'ajout d'un élément au formulaire Web.
● L' onglet Test permet de tester le formulaire Web créé. Les valeurs des champs du formulaire sont remplies automatiquement avec des valeurs aléatoires.
● Dans l'onglet Résultat , les valeurs du formulaire soumis peuvent être visualisées. Il y a trois options sous l'onglet résultat.

1. Liste de tous les formulaires soumis sous l'onglet soumission .
2. Les résultats soumis peuvent être téléchargés dans quatre formats : texte délimité, tableaux HTML, document JSON ou document Yaml sous l' onglet Télécharger .
3. Peut effacer les formulaires soumis dans l'onglet clair des résultats.

● L'onglet Paramètres contient les paramètres généraux des formulaires Web qui peuvent être modifiés en fonction des besoins de l'utilisateur.

● La configuration du formulaire Web Drupal peut être téléchargée depuis l'onglet Exporter . La configuration s'affiche et peut être téléchargée en cliquant sur le bouton Télécharger en fin de page. La configuration est téléchargée au format Yaml car le fichier de configuration Yaml peut être facilement importé dans une autre instance Drupal.

Ajouter du contenu au formulaire Web Drupal

Dès que le module Drupal 8 Webform est activé, un type de contenu portant le nom ' webform ' est créé. Il a des champs comme le titre, le corps et le formulaire Web. Le formulaire Web a une liste déroulante avec tous les formulaires Web créés.

Pour ajouter le contenu au formulaire Web, accédez à Contenu > Ajouter du contenu > Formulaire Web . Comme mentionné, il y aura un titre et un corps. Il existe une liste déroulante intitulée Webform, qui contient les noms de titre de tous les formulaires Web créés.

À côté de cela, il existe une autre option appelée « Paramètres du formulaire Web ».

Dans Status , il y a trois options, Open (pour rester ouvert aux utilisateurs), Closed (pour fermer le formulaire aux utilisateurs) et Scheduled ( il fournira le champ date et heure et selon la date et l'heure mentionnées, le formulaire restera ouvert aux utilisateurs à remplir).

Vous pouvez également fournir des données par défaut en remplissant le champ Données de soumission par défaut avec un jeton disponible. Un token peut être parcouru en cliquant sur Browse available tokens . Des exemples pour écrire le jeton peuvent être consultés en cliquant sur le lien Exemple . Et peut voir tous les formulaires soumis sous l'onglet Résultat .

Ajout du formulaire Web Drupal 8 en tant que champ dans les types de contenu

● Pour ajouter le formulaire Web Drupal dans le type de contenu, accédez à Structure > Types de contenu > Gérer les champs du type de contenu pour lequel le formulaire est requis.

● Cliquez sur le champ Ajouter . Dans Ajouter un nouveau champ, sélectionnez " Formulaire Web " dans la section " Références ", attribuez une étiquette à ce champ et cliquez sur " Enregistrer et continuer ".

● Dans Paramètres du champ, pouvez donner le nombre de valeurs autorisées au champ et cliquez sur 'Enregistrer les paramètres du champ'.

● Vous pouvez sélectionner le formulaire par défaut à partir de la valeur par défaut ou bien cliquer sur « Enregistrer les paramètres ».

● Allez maintenant dans Contenu > Ajouter du contenu et sélectionnez le type de contenu dont le champ fait référence aux formulaires Web.

● Sélectionnez le formulaire dans la liste déroulante qui est requis pour ce contenu. Le formulaire soumis peut être consulté dans l'onglet Résultat de ce contenu.

Ajout de Captcha dans les formulaires Web Drupal

Vous devez avoir vu que Captcha est largement utilisé sur de nombreux sites Web. Avant de soumettre un formulaire, il pose une question et demande une réponse à l'utilisateur. Cela empêche les robots de surcharger les serveurs en effectuant de nombreux envois de formulaires et d'envois par e-mail.

Drupal Webform vous permet d'ajouter l'élément Captcha lors de la création du formulaire Web. Le captcha du formulaire Web Drupal nécessite que vous activiez le module Captcha.

Étapes pour ajouter le formulaire Web Drupal Captcha dans les formulaires :

● Téléchargez et activez le module captcha sur www.drupal.org/project/captcha .

● Accédez à Structure > Formulaires Web .

● Cliquez sur la construction du formulaire auquel le captcha est requis.

● Cliquez sur Ajouter un élément et développez Éléments avancés . En élargissant la liste des éléments avancés peuvent être consultés. Cliquez sur Ajouter un élément de captcha pour ajouter le captcha.

● Cliquer sur Ajouter un élément ouvrira une fenêtre de paramètres sur la droite. Cochez la case Mode administrateur pour que l'administrateur puisse déboguer et afficher le captcha.

● Et dans le type Défi, nous avons 2 options - Maths et Image. Vous pouvez sélectionner n'importe lequel de vos choix. Cliquez ensuite sur Enregistrer et sur Enregistrer les éléments .

● Ajoutez le champ dans le type de contenu du type de champ Webform et faites référence au formulaire pour lequel le captcha est ajouté.

● Allez maintenant dans Contenu > Ajouter du contenu > et le type de contenu dont le champ fait référence au formulaire.

● Remplissez le titre et enregistrez le contenu. Lorsque vous affichez le contenu, le formulaire avec le captcha est publié. Avant de cocher le bouton de soumission, le champ captcha doit être rempli, sinon le formulaire ne sera pas soumis et donnera le message d'alerte.

Avantages du module de formulaire Web Drupal

● Le module Drupal Webform est open source, ce qui signifie qu'il est gratuit et que vous n'avez besoin que de temps pour installer et configurer les formulaires.

● Vous pouvez également effectuer des validations de formulaires via des crochets, des gestionnaires de formulaires Web ou le module Drupal Webform Validation. Le module de validation de formulaire Web Drupal ajoute un onglet supplémentaire au nœud où vous pouvez personnaliser et créer vos propres règles de validation.

● Ces formulaires Web sont flexibles et permettent de personnaliser les champs utilisés dans les formulaires.

● Il offre de nombreuses options en une seule installation, comme l'envoi de notifications et de courriers à l'utilisateur et à l'administrateur.

● Drupal Webforms facilite l'exportation des résultats de la soumission. Les utilisateurs peuvent afficher le résultat du formulaire soumis dans l'interface d'administration et peuvent également exporter le résultat au format CSV en cliquant sur un seul bouton.