Module Drupal Webform : notre guide d’utilisation

 

Drupal Webform est un module open source qui permet de créer des formulaires (“form” en anglais) personnalisés simplement. C’est un outil polyvalent et sécurisé qui offre de nombreuses possibilités. Voyons lesquelles.

 

 

Qu’est-ce que Drupal Webform et comment l’installer ?

Drupal Webform a été créé en 2001 par Nathan Haug, qui souhaitait créer un outil permettant de faciliter la collecte d’informations sur les sites web. Depuis le plugin a évolué pour inclure des fonctionnalités avancées telles que des formulaires conditionnels ou l’intégration de services tiers tels que Salesforce ou PayPal.

 

Les avantages de Drupal Webform pour les formulaires de votre site web

Drupal Webform est utilisé par des organisations de toutes tailles, notamment des entreprises, des gouvernements ou des ONG. Ainsi, la Fondation Wikimedia ou le ministère de l’Éducation aux États-Unis l’utilisent. C’est donc un outil robuste, fiable, sécurisé et hautement personnalisable capable de répondre à la plupart des besoins concernant le recueil d’informations.

Grâce à ses fonctions de validation et de vérification des données, ces dernières peuvent être exportées vers des formats de fichiers standard (CSV…) pour une analyse ultérieure. Par ailleurs, il permet une gestion efficace grâce à ses fonctionnalités de suivi, de modification et de suppression des données. Par exemple, les utilisateurs peuvent recevoir des notifications par e-mail lorsque des données sont soumises.

 

Comment installer le plugin ?

L’opération est simple. Téléchargez et installez le module Webform à partir du site officiel de Drupal ou directement depuis l’interface d’administration. Activez-le en vous rendant dans la section “Modules”. C’est fait !

 

 

Comment créer et personnaliser des formulaires avec Drupal Webform

C’est le moment de créer votre premier formulaire. La marche à suivre est simple et intuitive.

 

Ajouter des champs et des éléments à un formulaire

Une fois le module activé, il faut créer un nouveau formulaire en cliquant sur le bouton du même nom dans l’interface. Puis, configurer les options de validation et de soumission (“submission” en anglais).

Une fois cette étape passée. Vous pouvez commencer à créer des champs (également appelés “éléments” ou “field”). Cliquez sur le bouton “Ajouter un élément” pour ajouter un champ à votre formulaire, puis sélectionnez le type souhaité (texte, case à cocher, bouton radio, menu déroulant, saisie de date…). Personnalisez-le avec le libellé de l’information demandée (nom, prénom email, url…). 

Vous pouvez également ajouter des conditions pour choisir d’afficher ou de masquer certains champs en fonction des choix de l’utilisateur.

 

Ajouter du contenu et personnaliser le style d’un formulaire

Là encore, tout est très intuitif. Cliquez sur le formulaire que vous souhaitez personnaliser pour l’ouvrir dans l’éditeur. 

Vous pouvez alors ajouter du code HTML en cliquant sur le bouton “Ajouter un élément” et en sélectionnant “Ajouter du html”. De cette manière, ajouter du code à votre “form”.

Si vous souhaitez personnaliser son style, vous pouvez modifier les options de thème dans ses paramètres, vous pourrez alors modifier les couleurs, les polices et les styles CSS en utilisant l’éditeur intégré. 

Une fois que vous avez terminé votre personnalisation, sauvegardez en cliquant sur le bouton “Enregistrer”. Il est possible de prévisualiser le résultat ou de le publier en créant une nouvelle page et en ajoutant le formulaire à l’aide du bouton Webform dans l’éditeur de contenu.

Comment ajouter un captcha pour sécuriser les formulaires

Un captcha sert à prévenir les spams et les soumissions automatiques de formulaire. Il s’agit d’un test de sécurité utilisé pour différencier les utilisateurs humains des programmes automatisés. 

Il peut prendre la forme d’une question mathématique simple, d’une image à reconnaître ou d’une action à effectuer

Pour ajouter un captcha, téléchargez et installez le plugin de captcha depuis l’interface d’administration. Activez-le, puis configurez-le en vous rendant dans la section “Configuration”. Sélectionnez le type de captcha que vous souhaitez mettre en place, tel que reCAPTCHA, image CAPTCHA ou math CAPTCHA. Ensuite, ajoutez le champ captcha en sélectionnant l’option dans le menu déroulant.

 

 

Comment gérer les soumissions de formulaires avec Drupal Webform

 

Une fois votre formulaire fonctionnel, il reste encore à exploiter intelligemment les données qui ont été soumises.

 

Comment afficher les soumissions de formulaires dans le tableau de bord de Drupal

Drupal Webform dispose d’un module complémentaire appelé “Webform Views”, c’est un gestionnaire qui permet de créer des vues personnalisées pour afficher et gérer les data collectées.

Il permet de créer des pages et des blocs de vue personnalisés pour afficher les résultats obtenus sous la forme d’un tableau, d’un graphique, d’une liste ou de tout autre format de vue. 

Les utilisateurs peuvent également filtrer les données en fonction de critères spécifiques, tels que la date, le nom ou l’adresse électronique, pour afficher uniquement les données qui les intéressent.

 

Comment exporter et traiter les soumissions de formulaires dans un fichier externe

Pour cette étape, Drupal Webform dispose d’une API (Application Programming Interface) qui permet aux développeurs de personnaliser et d’étendre les fonctionnalités du module. 

Il est alors possible d’accéder aux données soumises (“data submitted”) par les utilisateurs et d’en personnaliser le traitement pour créer des rapports qui faciliteront leur analyse. Elles sont stockées sous forme d’array (encore un mot important à connaître !).

Prenons un exemple : supposons que nous avons un array appelé $submission qui contient les données soumises par l’utilisateur. 

Si nous voulons extraire le champ de saisie de texte intitulé “title” à partir de cet array, nous pouvons utiliser la fonction (“function”) webform_submission_data comme suit :$nom = webform_submission_data($submission, title);

La fonction renvoie la valeur (“value”) de ce champ de saisie de texte dans une variable $title. Nous pouvons ensuite utiliser cette variable pour afficher ou traiter la data issu du “form”.

L’API Webform de Drupal propose également des hooks qui permettent de modifier le comportement de Drupal Webform en réponse à certains événements, tels que la soumission d’un formulaire (“form submitted”).

Il est également possible de s’aider de module. Par exemple, WebformHandler est un plugin complémentaire à Drupal Webform qui permet de traiter les data soumises par les utilisateurs. 

Handler offre plusieurs fonctionnalités telles que l’envoi d’un email personnalisé, la création de rapports ou l’intégration de services tiers tels que MailChimp, Salesforce, Hubspot, Google Analytics, Zapier et d’autres outils de gestion de projet, de data ou de contenu.

À noter, il est possible de traduire simplement vos formulaires. Pour cela, utilisez la function t() ou translate de Drupal. Supposons qu’il faille un élément appelé “state”, voici le code à utiliser.

$form[‘nom’] = array(

  ‘#type’ => ‘textfield’,

  ‘#title’ => t(‘Nom’),);

 

 

Pourquoi utiliser Drupal Webform pour vos formulaires de site web

Comme nous l’avons vu, Drupal Webform est un service complet, intuitif et très pratique. C’est aussi un outil sécurisé qui vous permettra de gérer vos données dans le respect des normes et des exigences de conformité (au hasard, le RGPD).

Comme souvent chez Drupal, le service est enrichi par l’existence de modules complémentaires (WebformHandler, Views…) particulièrement utiles qui permettent un réel gain de productvité.

Facile à mettre en place, il nécessite néanmoins une configuration et une utilisation optimum des compétences en développement. N’hésitez pas à vous faire aider dans la mise en place de par des experts pour assurer à votre projet une totale réussite.

Vous avez un projet ?

Ce champ est obligatoire ou invalide
Aucun fichier sélectionné (Taille maximale : 5 Mo)
Ce champ est obligatoire ou invalide