Module de formulaire de contact Divi : guide complet

Dernière mise à jour le

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.

52 réflexions au sujet de “Module de formulaire de contact Divi : guide complet”

  1. Bonjour, j’ai crée un formulaire de contact sur mon site avec DIVI et le message de succès apparait si furtivement quand on envoie un message qu’on n’a pas le temps de le lire, comment puis je augmenter la durée d’affichage de ce message?
    Merci pour votre aide.

    Céline

    Répondre
    • Bonjour Céline, est-ce que le message disparaît simplement de la page ou est-ce que votre formulaire redirige vers une autre URL après son envoi ?

      Répondre
  2. Bonjour,
    j’ai réaliser un formulaire avec plusieurs champs, certain requis et d’autre non, seulement sur le formulaire il n’y a pas d’indication concernant les champs obligatoires (comme une asterix par exemple) ?

    Répondre
    • Bonjour,

      Pour les champs obligatoires, il faut ajouter manuellement une mention obligatoire ou une astérisque, par exemple, dans le titre du champ, qui se trouve dans le module de formulaire > champ adéquat > Contenu > Texte > Titre.

      Répondre
  3. Bonjour,

    J’ai créé plusieurs formulaires avec Divi et j’ai mal orthographié mon adresse mail. Je cherche maintenant à retrouver tous les formulaires qui ont été remplis par mes clients.

    Où puis-je trouver l’historique de remplissage de formulaire svp ?

    Merci beaucoup !

    Répondre
  4. Bonjour,

    je souhaiterais configurer le formulaire de telle sorte que l’expéditeur du message que je reçois soit l’adresse courriel indiquée par la personne qui a complété le formulaire. Est-ce que c’est possible avec le formulaire DIVI ?

    Actuellement, les messages issus de la saisie du formulaire sont envoyés par [email protected] (resif.fr étant le nom de domaine de mon site) et ils disparaissent tous avant de me parvenir. Impossible de déterminer à quel moment et par quel outil ils sont filtrés. Je ne reçois aucun des messages postés.

    Merci d’avance pour votre aide. Cordialement,
    Véronique

    Répondre
    • Bonjour Véronique,

      Par défaut, Divi formate le message que vous recevez en indiquant l’adresse email du répondant comme adresse de réponse, mais pas forcément comme adresse d’envoi du message.

      Donc vous devriez recevoir un message envoyé par [email protected] et si vous y répondez, votre réponse devrait être envoyée vers l’adresse de la personne qui a rempli le formulaire.

      Vous pouvez configurer le modèle de message que vous recevez dans le module de formulaire de contact Divi > Contenu > Email > Modèle de message. En cliquant sur le point d’interrogation, vous pourrez voir comment configurer le modèle.

      En ce qui concerne les messages qui disparaissent, il faut vérifier 1) si votre installation WordPress envoie correctement les emails (vous pouvez consulter cet article) et 2) si votre client email est correctement configuré pour autoriser les messages de [email protected].

      Répondre
  5. Bonjour Nora,

    Je vous indique une petite coquille sur l’illustration des paramètres de notification %%nom%% devrait être remplacé par %%name%% il me semble ;)

    Merci pour votre travail et votre blog,

    Cyrille

    Répondre
    • Bonjour Cyrille,

      Merci pour votre vigilance. Néanmoins, la balise dépend de l’ID du champ configurée dans le module de formulaire de contact > contenu > ID du champ. Donc les balises %%name%% ou %%nom%% peuvent être correctes en fonction du contexte.

      Pour être cohérente avec mon exemple, j’aurais d’ailleurs dû indiquer %%id_du_champ%% dans le modèle de message :)

      Répondre
  6. Bonjour Nora,

    Merci pour votre post très clair.

    Je fais face à un bug sur mon formulaire de contact Divi que vous avez peut-être eu l’occasion de voir / corriger: les labels des champs « Nom », « Numéro de téléphone » et « Email » n’apparaissent pas dans les champs respectifs (et les utilisateurs ne voient donc que ces champs vides, sans savoir quelle information entrer dans chacun d’eux…).

    Par contre les champs dessous que sont « Sujet » (= menu déroulant de sélection) et « Message » (= champ principal pour que l’utilisateur puisse y écrire son message) affichent bien les labels dans les champs respectifs…

    Avez-vous une idée de ce qui peut causer ce bug?
    Ou Divi offre-t-il une solution pour y remédier (par exemple afficher les labels au-dessus de chaque champ) ?

    Merci beaucoup d’avance!

    Répondre
    • Bonjour, Divi devrait afficher par défaut le “Titre du champ” (configuré dans le module de formulaire de contact > contenu > texte). Si vous entrez une valeur à cet endroit, mais que rien ne s’affiche, il faudrait commencer par vérifier si l’une de vos extensions crée un conflit avec Divi.

      Répondre
  7. Bonjour Nora,

    merci pour votre formidable travail !
    J’aimerais créer un formulaire qui envoie un email automatique à l’adresse email renseignée par la personne. Comment puis je procéder ? Merci de votre aide

    Répondre
    • Bonjour Lucie,

      Vous pouvez faire ceci facilement avec les extensions Contact Form 7 (gratuite) ou Gravity Forms (payante). Mais ce n’est pas possible avec le module de formulaire Divi.

      Avec Contact Form 7, dans l’onglet Email d’un formulaire, il faut cocher la case “E-mail (2)” et ajouter la balise [your-email] dans le champ “Pour”. Normalement, ceci est la configuration par défaut.

      Et avec Gravity Forms, il faut configurer une notification supplémentaire dans les Réglages du formulaire et sélectionner le champ “email” pour l’envoi du message.

      Répondre
    • Bonjour, si le site est en français dans WordPress, les champs devraient automatiquement s’afficher en français. Sinon, il suffit de remplir le champ “Titre” en français.

      Répondre
  8. bonjour,
    J’ai paramétré mon formulaire de contact, j’ai saisi l’adresse mail à laquelle je souhaite recevoir les mails mais lorsque je fais de tests j’ai le message de remerciements sur divi mais je ne reçois pas de mail dans ma boite email.
    Pourriez vous m’aider à solutionner ce problème?
    Merci
    Georgiana

    Répondre
  9. Bonjour ,
    J’ai bien suivi votre tuto et malgré tout je n’arrive pas à recevoir les mails du formulaire de contact .
    Initialement , j’avais monté mon site via Elementor puis je l’ai totalement modifier avec Divi .
    Pensez vous que le probleme vient de sa ?
    Avant avec Elementor je recevai tout les mails du formulaire de contact .
    Je vous remercie d avance pour votre aide .

    Bonne journée,

    Jessica

    Répondre
    • Bonjour Isabelle, si le menu déroulant comporte un nombre limité de communes, il est possible d’utiliser le type de champ “Menu déroulant de sélection” en lui donnant le titre “Ville” et en ajoutant le nom des communes dans les options.

      Par contre, si le but est d’avoir un grand nombre de communes dans le menu déroulant, Divi ne permettra pas de le faire. Il faudra plutôt passer par une extension dédiée comme Contact Form 7 ou Gravity Forms.

      Répondre
  10. Bonjour Nora,
    Merci pour ton article qui m’a bien aidé à mettre en place mon formulaire de contact.
    Cependant, j’ai un souci. Les accents et autres caractères bien français ne sont pas acceptés (é, à, è…). . La personne qui laisse un message reçoit un message « veuillez respecter le format requis. Lettres et nombres acceptés uniquement »…
    Aurais-tu le remède à tout hasard ?

    Merci

    Répondre
    • Le commentateur a trouvé la solution, mais pour celles et ceux qui rencontreraient le même problème, il suffit de sélectionner “Tout” dans le champ “Symboles autorisés” du type de champ d’entrée.

      Répondre
  11. Bonjour,
    Merci pour votre article très intéressant. Je me permets de vous écrire car je ne reçoit pas les messages du formulaire sur ma boite mail.

    A votre avis, que dois-je faire ?

    Merci de votre attention.

    Répondre
  12. C’est bon j’ai trouvé pour personnaliser couleur message de remerciements,
    pas d’autre choix que personnalisation CSS :

    /* Style the Divi Form Success Message */
    .et-pb-contact-message p {
    color: #FFFFFF
    }

    Répondre
  13. Bonjour,
    Je souhaiterais modifier le « reply to » sur le formulaire Divi. Est-ce que quelqu’un sait comment le modifier ?

    Répondre
    • Bonjour, par défaut, le formulaire Divi ne permet pas de modifier l’adresse reply-to. Il faudrait sans doute du code personnalisé pour le faire.

      Répondre
  14. Bonjour Nora
    Super cet aide détaillée. Merci.

    J’ai lu tous les commentaires et j’ai une nouvelle question :
    Est-il possible de diriger une demande selon le choix que la personne aura fait dans un menu déroulant d’un autre champ du type « votre demande concerne… »?

    Par exemple, si nous somme 2 professionnels A et B et qu’un client fait une demande sur un sujet lié à A, est-il possible de diriger directement le message vers le mail de A ? Et pareil si une demande est faite pour B, et donc diriger la demande vers le mail de B ?

    J’espère que ma demande n’est pas trop floue :-D ?

    Répondre
    • Bonjour Christophe,

      Malheureusement, ce n’est pas possible de faire ceci avec le formulaire Divi. C’est ce qu’on appelle une notification conditionnelle et à ma connaissance, il faut une extension de formulaire payante (Gravity Forms ou WPForms) pour le faire.

      Répondre
  15. Bonjour Nora,

    Merci pour ce tuto, j’aimerais adapter précisément le formulaire en entrant des règles css pour les différents écrans, notamment le taille de police et rien n’y fait. une idée?

    Répondre
    • Bonjour Chloé,

      Normalement, il faut cibler les champs (input) directement pour la taille de la police. Donc vous pourriez essayer d’ajouter une règle comme celle-ci à vos media queries dans le CSS personnalisé (Divi > Options du thème) :

      input {
      font-size : 18px; /* 18px par exemple */
      }

      Pour davantage de précision, vous pouvez sélectionner le type de champ avec input[type=text] ou input[type=email], etc.

      Répondre
      • Bonjour Nora,

        Merci beaucoup mais ça ne fonctionne pas j’avais déjà essayé. Si vous avez une autre idée je suis preneuse. :)

        Répondre
  16. Bonjour Nora,

    Formation très intéressante, j’ai 3 formulaires sur une page pour 3 jeux (gratuits), comment faire pour réussir à différencier les réponses. Quand je modifie le titre d’un formulaire ca modifie les 3, donc pas facile de savoir.

    Merci beaucoup de votre aide.

    Répondre
  17. Bonjour,

    Par défaut, les cases et boutons radio sont disposés en colonne.
    Mais est il possible (et si oui, comment) de les disposer en ligne ?

    Et sinon, merci pour les infos données (ici et sur vos autres pages), ca aide beaucoup !

    Répondre
    • Bonjour, il est possible de les aligner en utilisant du CSS personnalisé.

      Si vous êtes familier avec CSS, il faut ajouter les règles .et_pb_contact_field_options_list { display: flex; } et gérer les marges des éléments enfants avec .et_pb_contact_field_radio { margin: 20px; } par exemple pour les boutons radio. La classe pour les cases est .et_pb_contact_field_checkbox.

      Et si vous n’êtes pas familier avec CSS, cette vidéo vous montre les bases : https://www.youtube.com/watch?v=XqYirkE6Z7I

      Répondre
      • J’espérais avoir loupé un réglage facile quelque part.

        Merci pour les lignes de codes, je n’ai plus qu’à faire un copier-coller (ou presque :D )

        Répondre
  18. Bonjour,
    Mon formulaire de contact fonctionne très bien à une exception près.
    Lorsqu’on envoie un message via le formulaire, j’ai paramètré un message disant : « Merci, je vous réponds dès que possible ». Le message ës’affiche, mais ma page scroll toute seule vers le bas, ce qui fait que le message est caché derrière la barre d’adresse de mon navigateur. Y a-t-il moyen de faire en sorte à ce que le message reste visible sur l’écran?
    Merci beaucoup pour votre réponse.
    Joël Lorbach

    Répondre
    • Bonjour, Divi tente de scroller pour que le message apparaisse dans la partie visible de l’écran, donc il faudrait vérifier si un élément (section, ligne ou module) disparaît lors de l’envoi du message et empêche Divi de calculer le scroll correctement.

      Vous pouvez aussi essayer d’ajouter un élément (un espacement, par exemple) au-dessus du module de formulaire de contact.

      Répondre
  19. bonjour
    j’aimerai que sur mes champs date d’arrivée et date de départ un calendrier en bout de bouton permette de sélectionner la date sans devoir la taper. Est ce que c’est possible ? Merci
    Karin DELAHAYE

    Répondre
  20. Bonjour Nora,

    Nous avons changé de serveur mail. J’ai l’impression que depuis ce temps, les formulaire n’arrivent plus (test fait pour confirmation). Avant ils arrivaient bien. Est-ce que ce changement peut avoir une incidence alors que l’adresse mail est la même.
    Merci pour votre blog qui nous aide bien

    Répondre
  21. Bonjour Nora,
    J’aimerais mettre en place un filtrage sur les emails dans le champs « email » que nous recevons, par exemple en n’acceptant que les adresses professionnelles ou en bloquant certaines. Je n’ai pas trouvé cette option, est-ce possible ?

    Répondre
    • Bonjour, non, ce n’est pas possible avec le formulaire Divi. Il faudrait sans doute un formulaire plus sophistiqué comme Gravity Forms ou WPForms.

      Répondre
  22. Bonjour, j’aimerais que le nom des champs restent affichés quand on saisit quelque chose dedans.

    Par défaut, on a un champ « nom » et si on écrit, le mot nom s’efface. Y a-t-il un moyen de changer cela ?

    Merci d’avance pour votre aide

    Répondre
    • Bonjour, par défaut Divi ne permet pas de faire ceci, mais les développeurs fournissent du code CSS avec lequel les titres des champs s’affichent de manière permanente au-dessus des champs.


      /* Affiche les titres au-dessus des champs */
      .et_pb_contact_form_label {
      display: block;
      font-family: 'Playfair Display'; /* Nom de la police */
      color: #E7E2BC; /* Couleur de la police */
      font-size: 18px; /* Taille de la police */
      margin-bottom: 15px;
      }

      /* Cache le texte de remplacement */
      .et_pb_contact_form_container .input::placeholder {
      color: transparent;
      }

      /* Masque les titres en double sur les cases à cocher et les boutons radios */
      .et_pb_contact_field_options_title {
      display: none;
      }

      /* Supprime le titre au-dessus des listes déroulantes */
      .et_pb_contact_field[data-type=select] .et_pb_contact_form_label {
      display: none;
      }

      Répondre

Laisser un commentaire

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

Article ajouté au panier
0 Produit - 0,00

Découvrez 6 astuces de pros pour générer du trafic gratuitement

Merci pour votre inscription !