Mettre une page recap sur un formulaire
Catégorie : Drupal 8 Publié le 11/04/2021

Il se peut que vous ayez besoin de mettre en place sur vos formulaires, une page qui récapitule toutes les données saisies par l'utilisateur, avant que celui-ci décide de confirmer la soumission. Pour cela, le module Webform fournit déjà un système qui vous permet d'ajouter cette page. Nous allons donc voir comment ajouter cette page en modifiant tout simplement certaines choses au niveau de la configuration.

Mise à jour de la configuration

Pour commencer, assurez-vous que vous avez déjà un formulaire prêt avec tous ses champs.

Ensuite, à partir de la barre d'administration, rendez-vous dans Structure > Webforms
Ouvrez les paramètres de votre formulaires en cliquant d'abord sur la flèche du bouton "Build" tout à fait à droite, puis en cliquant sur "Paramètres"

webform settings tab

Descendez tout en bas de la page jusqu'à ce que vous trouvez une section qui s'appelle Form preview settings.
Vous remarquez sans doute que l'option de preview pour le formulaire est désactivé par défaut.

Vous pouvez sélectionner l'option Facultatif, comme l'option Requis pour activer la pré-visualization des données saisies par l'utilisateur.
Dans notre cas, nous allons sélectionner l'option Requis; de nouveaux champs apparaissent.

webform preview settings

Par défaut, les valeurs concernant les 3 premiers sont celles qui concerne l'ensemble des formulaires dans les réglages généraux du module Webform.
Si vous souhaitez régler de manière générale ces paramètres, rendez-vous dans Structure > Webforms > Configuration > Formulaires, et modifiez les valeurs dans la section Form preview settings.

Dans notre cas, nous allons plutôt modifier les valeurs pour ce formulaire là; vous pouvez vous contenter de mettre les valeurs dans la capture d'écran ci-dessus.

Dans l'onglet Included Preview Values, vous verrez la liste de tous les champs dont les valeurs saisies pourront être affichées sur la page recap du formulaire.
Libre à vous de décochez les champs que vous ne souhaitez pas afficher dans cette page !

Un autre onglet, Preview Attributes, vous permettra d'ajouter des classes CSS spéciales qu'il faudra appliquer sur votre page afin de mettre à jour le theming.
Pour ce tutoriel, nous allons zapper cette étape.

Cliquez sur Enregistrer et videz les caches.

Test de la page recap

Pour voir le résultat qui sera obtenu en front, cliquez sur l'onglet Voir tout en haut de page.
Remplissez votre formulaire, et cliquez sur Suivant

webform preview front

Comment vous pouvez le voir, une page récapitulant vos saisies avant la confirmation de la soumission est bien affichée.
Si vous ne souhaitez pas voir les étapes qui s'affichent en haut, rendez-vous dans l'onglet Formulaire sur la page Paramètres de votre webform, et décochez la case Show wizard progress bar avant d'enregistrer.

Veuillez noter au passage que le message que nous avons saisie plus tôt s'affichera en réalité dans un message de type alert fourni par Drupal.
Pour faire en sorte que le message apparaissent bien, veuillez faire en sorte que le bloc Messages soit bien pris en compte dans la configuration des blocs (Structure > Mise en page des blocs).

Voilà ! Maintenant vous savez comment mettre en place facilement une page récapitulant les données saisies par l'utilisateur sur vos formulaires.
Il ne vous reste plus qu'à jouer avec du CSS pour rendre la page plus jolie !