Fonctionnalités populaires des formulaires web Drupal 8

    Vous utilisez des formulaires web pour récolter des contacts, recueillir des commentaires de clients ou encore vendre vos produits ? Découvrez comment Drupal 8 peut booster votre taux de conversion et améliorer l'expérience utilisateur de vos formulaires web.

    Abonnez-vous à notre blog

    De nombreux facteurs entrent en jeu dans l'expérience utilisateur d'un site, mais l'un d'entre eux est souvent négligé : il s'agit des formulaires web. Or ces derniers constituent le meilleur moyen d'obtenir des informations de la part de clients potentiels et, indirectement, d'entretenir votre relation avec eux. L'accent étant souvent mis sur le fait d'attirer les utilisateurs sur vos canaux, ne pas consacrer autant de temps à améliorer l'expérience utilisateur - et notamment les formulaires web - peut aboutir à des interactions complexes et frustrantes.

    Suite aux dernières nouveautés concernant l'expérience éditoriale de Drupal 8, le module Drupal Webform offre un créateur de formulaires riche en fonctionnalités disposant de tous les outils nécessaires, que vous souhaitiez créer un formulaire à plusieurs pages suivant une logique conditionnelle ou un simple formulaire de contact qui transfère les données vers votre plateforme de GRC ou d'automatisation marketing.

    Examinons de plus près les formulaires web dans Drupal 8 et comment ils peuvent vous aider à améliorer l'expérience utilisateur de votre site Internet.

    1. Flexibilité et liberté

    L'un des formidables avantages du module Drupal Webform est la facilité avec laquelle il est possible de créer de nouveaux formulaires et de modifier des formulaires existants. Une interface utilisateur complète s'articule autour de sa fonctionnalité qui permet aux gestionnaires de contenu et aux webmasters de générer rapidement de nouveaux formulaires, qu'il s'agisse d'un simple formulaire de contact ou d'une enquête client plus approfondie.

    L'interface utilisateur de Drupal 8 Webform permet de créer aisément un nouveau formulaire

    2. Fonctionnalités prêtes à l'emploi

    La version Drupal 8 du module Webform est livrée avec une suite complète de fonctionnalités. Tous les champs courants sont disponibles (texte, cases à cocher, boutons radio, entre autres), mais de nombreux autres également.

    Différentes catégories sont aussi disponibles pour les éléments de formulaire. Des champs de saisie utilisateur attendus (e-mail, mot de passe, sélecteurs de date), aux champs composites (ensemble de champs traités comme un seul, par exemple « adresse »), aux champs de téléchargement (fichier, audio, vidéo, image, etc.), aux champs complexes (comme une zone de dessin de signature) aux éléments de style (balises HTML, boutons...).

    Champs de formulaire avancés dans l'interface utilisateur du générateur de formulaires web Drupal 8

    Il est également très facile de créer des listes en tous genres comme options pour vos champs de formulaire déroulants. Pour les types de champs de formulaire les plus courants, Drupal intègre des listes prédéfinies : jours, mois, fuseaux horaires, langues, tailles, ethnies, évaluations (échelle de Likert), état civil, pays (noms et codes ISO), etc.

    3. Validation, masquage, conditions…

    Le pouvoir des différents éléments va bien au-delà de la simple dénomination de « type ». Un élément de courrier électronique, par exemple, est non seulement un champ de saisie, mais il comporte également un valideur en coulisse qui vérifie les valeurs soumises pour une adresse électronique valide.

    Il est facilement possible d'étendre l'expérience utilisateur en les guidant à travers les éléments et valeurs attendues à l'aide de titres descriptifs et d'étiquettes, mais aussi de masques de saisie et d'espaces réservés.

    Les espaces réservés sont des valeurs statiques données comme exemples qui apparaissent lorsque le formulaire est chargé et disparaissent lorsque l'utilisateur clique sur la valeur de saisie.

    Exemple d'espaces réservés dans un formulaire web Drupal 8

    Les masques de saisie sont un moyen plus avancé d'orienter la saisie attendue. Ils permettent de définir un format fixe correspondant à une saisie valide pour que le formulaire n'accepte aucune autre entrée.  Par exemple, si nous demandons à l'utilisateur un code postal d'un pays dans lequel ce code ne peut avoir que 4 chiffres, nous pouvons créer un masque qui ne permet que ce format. De la même manière, nous pouvons créer des masques plus complexes, tels que des règles et des formats prédéfinis pour renseigner des numéros de TVA, des adresses e-mail, des coordonnées bancaires, etc. Comme sur les autres outils de création de formulaires, le module Drupal Webform comprend une liste complète de masques prédéfinis que vous pouvez enrichir par d'autres options plus spécifiques à vos besoins métier.

    Exemple de masques de saisie dans les formulaires web Drupal 8

    Au lieu d'afficher tous les champs d'un coup, sur les formulaires plus longs vous pourriez préférer afficher la quantité minimale et faire apparaître les autres au fur et à mesure qu'ils deviennent pertinents selon les saisies de l'utilisateur. Cette logique opérationnelle peut être appliquée en utilisant des « conditions » pour chaque champ de formulaire, de sorte que, via ces conditions, chaque champ peut interagir avec les valeurs des autres champs.

    Exemple de logique conditionnelle dans les formulaires web Drupal 8

    4. Expériences de formulaires à plusieurs étapes

    Qu'il s'agisse d'un processus d'intégration de clients, d'une enquête ou de n'importe quelle autre interaction nécessitant plusieurs types d'information, répondre à un formulaire présenté sur une seule page peut être intimidant pour l'utilisateur. Avec les formulaires par étape, vous pouvez aisément regrouper tous les éléments pertinents par page (par un glisser-déposer dans l'interface utilisateur) et guider l'utilisateur à travers les différentes étapes.

    Exemple de formulaire à étapes dans un site Internet Drupal

    Si vous ajoutez un peu de logique au niveau de la page, vous pouvez même afficher différentes étapes du formulaire en fonction d'un choix précédent. Par exemple, si dans un premier temps vous demandez au visiteur sa fonction, vous pouvez lui présenter des questions ultérieures plus pertinentes en fonction de son rôle.

    5. Gestion des modèles de formulaire

    Il peut s'avérer assez compliqué de concevoir un nouveau formulaire de zéro chaque fois que vous souhaitez enregistrer les abonnements à une newsletter, les inscriptions à un événement ou les retours d'information de clients. Afin d'en faciliter la gestion, vous pouvez créer des modèles pour les types de formulaires les plus courants avec des champs préconfigurés. Lorsque vous devez configurer une nouvelle instance du formulaire, il vous suffit de l'adapter, le cas échéant, au contexte spécifique.

    6. Intégrations et plug-ins supplémentaires

    Si toutes ces fonctionnalités prêtes à l'emploi ne couvrent pas tous vos besoins de saisie de données, il existe plusieurs autres modules Drupal supplémentaires qui peuvent ajouter des améliorations à ces outils de création de formulaires. Voici quelques exemples :

    • Intégrations de vues
      Créez des listes/mises en page avancées et intégrez facilement différents formulaires
    • Analyse étendue de résultats d'enquête
      Présentez/affichez vos soumissions de formulaires web sous forme de diagrammes circulaires ou linéaires ou de tableaux afin d'analyser facilement les résultats
    • Exposer/publier les résultats d'un formulaire web sur un service web de type REST
      Envoyez vos soumissions de formulaire web à un service web externe pour traitement ultérieur
    • Chiffrer les soumissions de formulaires
      Ajoutez une couche de sécurité à vos soumissions de formulaires web afin d'éviter les interceptions
    • Champs composites prédéfinis supplémentaires
      Certains champs composites du module sont prédéfinis (par exemple l'adresse), mais il est possible d'ajouter d'autres champs (courants) via d'autres modules d'extension Drupal
    • Invitations uniques pour envoyer des codes uniques par courrier pour des formulaires individuels
      Créez des formulaires « secrets » et autorisez un accès individuel par utilisateur
    • Protection anti-spam CAPTCHA
      Protection des soumissions par l'ajout d'une fonction anti-spam
    • Honeypot
      Protection des soumissions sans interrompre l'utilisateur pour résoudre un CAPTCHA
    • HubSpot
      Intégrez votre formulaire web à votre compte HubSpot : envoyez vos soumissions de formulaires web et ajoutez-les à vos contacts HubSpot au lieu de les enregistrer dans votre base de données Drupal
    • MailChimp
      Donnez la possibilité aux utilisateurs de s'inscrire à une liste de diffusion MailChimp en soumettant un formulaire web
    • Commerce
      Intégrez des formulaires web à une boutique Drupal Commerce, par exemple pour un panier de produits ou pour le paiement
    • CiviCRM
      Intégrez votre formulaire web à votre compte CiviCRM : envoyez vos soumissions de formulaires web et stockez-les dans votre système de GRC externe au lieu de les enregistrer dans votre base de données Drupal
    • Slack
      Envoyez des notifications à un compte Slack et un canal spécifiés lorsque de nouvelles soumissions sont enregistrées
    • Et plus encore : la liste complète des modules complémentaires pour formulaires web Drupal est disponible en ligne.

    Conclusion

    Plus qu'un simple canal d'information statique, le site Internet est désormais le canal central de partage de l'information et de communication de nombreuses marques avec leur public. Proposer des formulaires web intuitifs et des sondages faciles vous permet d'augmenter le taux de conversion de vos pages et d'échanger des informations de façon fluide.

    Le module Drupal 8 Webform présente une interface de création de formulaires conviviale qui permet aux éditeurs de contenu et aux webmasters de proposer la meilleure expérience utilisateur qui soit aux visiteurs qui saisissent des données sur votre site Internet, qu'ils répondent à une enquête de satisfaction ou cherchent à obtenir plus d'informations sur vos produits.

    Publié sur    Dernière mise à jour le 07/10/2019

    #Drupal, #Expérience Client, #Gestion de Contenu

    À propos de l'auteur

    Kevin is Drupal Web Developer and Consultant at Amplexor based in Belgium. Kevin is an Acquia Certified Developer with over 6 years of experience in planning, development, maintaining Drupal websites and leading development teams in Drupal. He has also volunteered at the organization of the yearly Belgian DrupalCamp event.

    SUBSCRIBE TO OUR BLOG