Module de formulaire de contact Divi : guide complet

par | 20 Mar 2022 | Tutoriels, WordPress

Le module de formulaire de contact Divi est un outil intéressant qui permet de se passer d’une extension supplémentaire. Cependant, il n’est pas aussi robuste que les solutions dédiées et il faut donc déterminer si ses fonctionnalités sont suffisantes pour vos besoins.

Dans cet article, nous allons détailler ce qu’il est possible de construire avec ce module, mais aussi les options qui ne sont pas encore disponibles. Notez que l’équipe qui développe le thème Divi ajoute régulièrement de nouvelles capacités à son produit et il reste donc probable que le module de formulaire de contact Divi évolue au fil du temps.

 

 
Certains des liens figurant dans cet article sont des « liens affiliés ». Cela signifie que si vous cliquez sur le lien et réalisez un achat, je recevrai une commission d’affiliation, sans frais supplémentaires pour vous. Si c’est le cas, merci de soutenir ce blog !

 

1. Fonctionnalités disponibles dans le module

Le module de formulaire de contact Divi comporte des fonctionnalités relativement simples. Tout d’abord, il y a six types de champs différents : ligne de texte (champ d’entrée), email, zone de texte, case à cocher, bouton radio et menu déroulant.

 

Champs disponibles dans le module de formulaire de contact Divi
Champs disponibles dans le module de formulaire de contact Divi

 
Tous les champs doivent être configurés avec une ID et un titre et peuvent être rendus obligatoires (requis) ou non. La logique conditionnelle est aussi disponible et permet de créer une ou plusieurs règles pour afficher des champs dynamiquement en fonction des entrées à d’autres questions du formulaire.

Enfin, l’un des atouts majeurs du module de formulaire de contact Divi reste la possibilité de personnaliser les styles très facilement. Vous pourrez notamment choisir la disposition de vos champs sur une ou deux colonnes, mais aussi personnaliser chaque champ indépendamment des autres.

 

Paramètres des champs
Paramètres des champs

 
Parmi les éléments que vous pouvez modifier se trouvent toutes les couleurs du champ, le texte, les dimensions et espacements du champ, la bordure et les effets d’ombre. Comme pour tous les modules Divi, le CSS peut être personnalisé ainsi que la visibilité sur différents appareils ou encore les animations.

 

2. Fonctionnalités indisponibles dans le module

Malgré ces avantages non négligeables, le module de formulaire de contact Divi reste limité sur certains points. Il n’est par exemple pas possible de permettre le téléversement de fichiers nativement. De plus, les champs simples disponibles dans le module doivent être ajustés intelligemment pour différents types de demandes.

Par exemple, pour demander un numéro de téléphone, il faudra choisir un champ ligne de texte (champ d’entrée) et sélectionner “Nombres seulement” dans les symboles autorisés.

De même, il n’existe pas de champ URL ou date et, là aussi, il faut adapter le champ simple ligne de texte. Dans une extension de formulaire de contact classique, vous trouverez ces types de champ.

L’avantage est qu’ils contiennent des règles de vérification par défaut. Ainsi, lorsqu’un.e utilisateur.rice remplit un champ URL, l’extension contrôle le format en s’assurant que l’entrée contient bien une extension de type “.fr”, “.com”, etc.

Enfin, Divi n’enregistre pas les entrées du formulaire dans la base de données WordPress. Vous devrez donc vous assurer que votre installation envoie effectivement les emails de notification, au risque de perdre définitivement certains messages envoyés.

 

3. Créer un formulaire de contact Divi

Pour créer un formulaire de contact avec Divi, il faudra tout d’abord créer une page avec le constructeur Divi. Puis, après avoir ajouté une ligne, vous pourrez sélectionner le module formulaire de contact.

 

3.1 Les champs et les options

Ensuite, vous pourrez cliquer sur le bouton “+” pour ajouter un champ et le configurer en commençant par lui donner une ID et un titre. Les “Options des champs” seront différentes selon le champ choisi.

 

Ajouter un champ à un formulaire Divi
Ajouter un champ à un formulaire Divi

 

Id et titre d’un champ du formulaire de contact Divi
Id et titre d’un champ du formulaire de contact Divi

 
Pour les champs email et zone de texte, il faut simplement choisir si le champ est requis ou non. Le champ ligne de texte (champ d’entrée) peut être configuré pour avoir une longueur minimum ou maximum et des symboles autorisés ou non.

 

Paramètre du champ ligne de texte
Exemple de configuration d’un champ numéro de téléphone

 
En ce qui concerne le champ case à cocher, vous devrez évidemment paramètrer l’option ou les options des cases. Vous avez aussi la possibilité d’insérer un lien dans le texte de vos options ou même à la place de celui-ci.

 

Ajouter un lien à une option case à cocher
Ajouter un lien à une option case à cocher

 

Lien dans une option case à cocher
Lien dans une option case à cocher

 
Les boutons radio, quant à eux, se configurent exactement de la même manière que les cases à cocher. Pour rappel, les cases à cocher permettent des choix multiples tandis que les boutons radio sont exclusifs.

Enfin, le champ menu déroulant offre des paramètres similaires aux deux précédents, à l’exception des liens à insérer dans les options qui ne sont pas disponibles.

 

3.2 La logique conditionnelle

Pour activer la logique conditionnelle, il faut se rendre dans la section “Logique conditionnelle” et cliquer sur le bouton “Activer” pour qu’il devienne bleu. Les options s’affichent alors et vous pourrez choisir une relation OU ou ET.

Si le bouton “Relation” est placé sur “Pas de restriction”, la logique s’appliquera si une des règles configurées est vérifiée.

 

Logique conditionnelle dans le module de formulaire de contact Divi
Exemple de configuration d’une logique conditionnelle de type ET avec deux règles

 
Sinon, en activant le bouton sur “Tout”, il faudra que toutes les règles configurées soient vérifiées pour que la logique s’active. Cette relation ne s’applique que pour les cas où plusieurs règles de logique sont configurées. Dans le cas où vous ne paramétrez qu’une seule règle, cette fonctionnalité n’aura pas d’impact.

 

3.3 Le design

En passant à l’onglet “Style”, vous retrouverez toutes les options de personnalisation du champ. Notez qu’il est aussi possible, et dans la plupart des cas recommandé, de personnaliser l’ensemble des champs dans l’onglet “Style” du module de formulaire de contact lui-même.

Là, vous pourrez définir les couleurs, le style de texte et les espacements de tous les champs. Les options de couleurs, texte et espacement des champs individuels ne devraient être utilisées que dans les cas particuliers où un champ doit avoir un style différent des autres.

Pour commencer, il faudra choisir le “Modèle” de champ et décider s’il doit s’afficher sur toute la largeur du module de formulaire ou non. En sélectionnant “Non”, le champ s’affichera sur une demi largeur, permettant ainsi de créer deux colonnes.

Dans la section “Champs” (module de formulaire) ou “Champ” (champ du formulaire), il est possible de définir les couleurs de chaque élément du champ : couleur d’arrière-plan et du texte, en mode normal et mise au point (focus) ; police et style de texte.

 

Couleurs des champs
Paramètres de couleurs pour tous les champs

 

Configurer les couleurs du champ
Paramètres de couleurs pour un champ spécifique

 
Dans les options de style individuelles d’un champ, vous pouvez aussi choisir les dimensions et espacements, ainsi que la bordure et les effets d’ombre de celui-ci.

 

3.4 Les paramètres et notifications

Pour terminer, il faudra configurer quelques paramètres ainsi que les notifications de message reçu. Pour ce faire, rendez-vous dans l’onglet “Contenu” du module de formulaire de contact Divi.

Sous les champs, dans la section “Texte”, vous pourrez donner un titre à votre formulaire, définir un message de succès qui s’affiche lorsque quelqu’un envoie le formulaire et personnaliser le texte du bouton d’envoi.

 

Paramètres du formulaire de contact Divi
Paramètres du formulaire de contact Divi

 
Ensuite, dans la section “E-mail”, il faudra ajouter une ou plusieurs adresses email séparées par des virgules qui seront les destinataires des notifications. Vous pourrez aussi configurer le format du message envoyé dans l’espace “Modèle de message”.

Notez que si vous ne configurez pas cette option, vous recevrez simplement le modèle de message par défaut.

Pour le personnaliser, vous pouvez entrer le texte qui vous convient et utiliser les balises dynamiques des champs au format suivant %%id_du_champ%% en remplaçant id_du_champ par l’ID du champ adéquat.

 

Paramètres des notifications
Paramètres des notifications

 
La section “Rediriger” vous permet de rediriger les utilisateur.rice.s vers une autre page après l’envoi du formulaire. Il suffit d’entrer l’URL de redirection après avoir activé l’option.

Enfin, la section “Spam Protection” offre la possibilité de configurer deux types de captcha. Tout d’abord, vous pouvez activer l’utilisation d’un service de protection contre le spam et configurer reCAPTCHA en sélectionnant votre compte et un seuil humain-robot.

 

Paramètres de protection contre le spam
Paramètres de protection contre le spam

 
Il est aussi possible d’utiliser le captcha Divi en activant l’option “Use Basic Captcha”. Celle-ci ajoute une opération mathématique consistant en une addition simple à votre formulaire.

 

4. Conclusion

Le module de formulaire de contact Divi offre l’avantage de se passer d’une extension supplémentaire. Grâce à lui, vous pourrez construire des formulaires simples ou utilisant des logiques conditionnelles.

Vous aurez également la possibilité de personnaliser les styles de vos formulaires très facilement. Finalement, ce module constitue une option viable pour de nombreux propriétaires de site.

Dites-moi dans les commentaires le type de formulaire que vous souhaitez construire avec ce module.

0 commentaires

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Réservez votre audit SEO gratuit et recevez un rapport personnalisé sur la santé de votre site web