Installer et configurer le formulaire de contact Divi sur WordPress

Le formulaire de contact, peut-être ne vous semble-t-il pas essentiel, et pourtant il joue un rôle stratégique dans l’objectif de conversion d’une page web.

C’est un moyen de vous contacter, rapidement, simplement et c’est rassurant pour vous et vos clients.

En effet, le formulaire de contact représente un réel atout pour votre site et intervient à différents niveaux :

• C’est un levier pour générer des prospects qualifiés
• C’est un outil stratégique pour améliorer l’expérience utilisateur
• Il renforce la crédibilité de votre site et la confiance de vos visiteurs
• C’est un outil d’analyse, il vous permet d’avoir des retours sur des questions fréquentes et de vous adapter

Pour savoir comment installer et configurer un formulaire pour votre site internet je vais, dans cet article tutoriel, vous proposer une marche à suivre.

Préalable : utiliser Divi comme builder sur WordPress

Sur WordPress, vous avez la possibilité d’utiliser ce qu’on appelle un « builder », c’est à dire un constructeur de page qui vous permet de travailler la mise en forme de votre site.

WordPress possède nativement son propre builder, Gutenberg. Ce dernier reste néanmoins limité dans les propositions créatives et est peu intuitif, donc pas évident à prendre en main si vous voulez avoir un rendu vraiment personnalisé.

Dans cet article, je vais utiliser Divi, un des meilleurs constructeurs de page de l’écosystème WordPress.

Créer une page de contact avec Divi

Tout d’abord, assurez-vous d’avoir une page « contact » dans le backoffice de WordPress.

Si ce n’est pas le cas, je vous invite à en créer une.

Créer une page avec Divi :

• Rendez-vous dans le back office WordPress de votre site internet.
• Dans la barre latérale, vous trouverez un onglet « Pages » sur lequel vous devez cliquer.

Vous devez maintenant avoir un aperçu de toutes vos pages

• En haut à droite, cliquez sur le bouton « Ajouter une page »

Installer et configurer le formulaire Divi

Installer votre formulaire de contact :

Sélectionner la section verte (ligne) de votre choix, pour nous ce sera « 1 colonne ».

Dans votre bloc gris (module), ajouter un nouveau module : « formulaire de contact » proposé par divi.

Vous voilà arrivé dans l’interface de votre formulaire

Configurer votre formulaire de contact Divi

• Éditez vos champs : en ajoutant un champ, vous pouvez personnaliser votre formulaire de contact (C). Vous pouvez également modifier un champ déjà existant en cliquant sur l’icône engrenage (D).

• Dans « Texte », ajoutez un « ID du champ » par exemple : « Nom » ou « Mail » (E) et un titre (ce dernier apparaîtra en transparence pour vos visiteurs) « Nom Prénom » ou « Adresse e-mail » (F).

• Dans « Options des champs », sélectionnez le type (G) : Le type du champ change si c’est une adresse mail, un long texte, un menu déroulant etc… Vous pouvez aussi rendre vos champs « requis » (H).

Dans l’onglet style, vous pouvez jouer avec les paramètres pour personnaliser les couleurs, les tailles etc… de votre formulaire de contact Divi.

FAQ

Peut-on mettre plusieurs destinataires aux formulaires de contact Divi ?

Oui, il est possible de mettre plusieurs destinataires pour vos formulaires de contact ! On vous explique comment juste ici !

Est-ce que les formulaires de contact Divi sont soumis à la RGPD ?

Oui, comme tout les formulaires de contacts, vous devez proposer à votre visiteur de consentir ou pas au traitement des données qu’il va envoyer via le formulaire de contact Divi ! Plus bas, on vous décrit la marche à suivre pour rendre votre formulaire de contact Divi conforme à la RGPD.

Doit-on limiter le nombre de champs dans le formulaire de contact ?

Oui, car si vous ajoutez de nombreux champs, le formulaire de contact devient plus long et donc plus fastidieux pour votre visiteur. Réduisez au maximum le nombre de champs et laissez simplement les plus nécessaires pour faciliter son utilisation à vos visiteurs. Votre call-to-action se doit d’être simple, rapide et incitatif.

Existe-t-il des alternatives aux formulaires de contact Divi ?

Oui, il existe de nombreux plugins pour vos formulaires de contact, notamment Contactform7 et Gravityform dont on vous parle plus bas.

Mettre plusieurs destinataires à notre formulaire Divi

Si vous vous demandez comment mettre plusieurs destinataires qui recevront les réponses à votre formulaire de contact Divi, je vous invite à :

• Sélectionner votre bloc gris « formulaire de contact » et entrer dans ses paramètres
• Dans « Contenu », puis « Email », vous pouvez renseigner les adresses électroniques qui recevront les mails. Attention, pour ajouter plusieurs destinataires, séparez les adresses électroniques par une virgule, comme sur l’image. (I)

Si vous souhaitez personnaliser le mail que vous recevrez, voici la méthode :

• Dans votre bloc gris « formulaire de contact », entrez dans les paramètres.
• Allez dans « Contenu », puis « Email », vous écrirez dans l’onglet « Modèle de message » (J)
• Pour insérer les réponses que les personnes vous donneront, vous devrez respecter cette formule : %%IDduchamp%%. Voici un exemple plus concret :

Bonjour, vous avez reçu une réponse à votre formulaire.

%%Nom%% vous contacte concernant %%Objet%%.

Voici le contenu du message :

%%Message%%

À contacter à l’adresse mail suivante : %%Mail%%

• Notez bien que les caractères spéciaux et ce qu’il y a entre seront remplacés par les données que vos clients auront renseignées.

Faire un formulaire de contact Divi en respectant le consentement

La RGPD, c’est la Règlementation Générale de la Protection des Données. Elle régit un ensemble de règles qui permettent de sécuriser vos données et celles de vos visiteurs sur le net. Elle impose également une toute transparence sur le traitement des données de vos visiteurs.

Pour que votre formulaire de contact Divi recueil le consentement explicite de l’expéditeur vous devez proposer une base à cocher et mieux encore un lien vers votre politique confidentialité. Pour cela, vous pouvez inclure un lien qui redirige vers la page concernée.

• Entrez dans les paramètres de votre formulaire de contact Divi
• Ajoutez un nouveau champ auquel vous pouvez attribuer « RGPD » comme ID du champ (K) et « Confidentialité » comme titre (L).
• Sélectionner comme type de champ « Boutons radiaux » (M)
• Dans la zone de texte (N), vous pouvez écrire « J’accepte votre politique de confidentialité »
• N’oubliez pas d’activer « Champ requis »

Maintenant, il vous faut ajouter un lien redirigeant vers votre page Politique de Confidentialité.

• Toujours dans « Option des champs », cliquez sur la petite chaînette (O) à côté de votre zone de texte (nommée « option »)
• Insérez le lien dans la zone de texte « URL du lien » de votre page Politique de Confidentialité. (P)

Votre formulaire est maintenant apte à recueillir le consentement de son expéditeur !

Mettre un captcha au formulaire de contact Divi

Pour éviter les spams, il est aujourd’hui quasiment indispensable d’ajouter un système anti-spam à votre formulaire de contact Divi. Sans protection, votre formulaire peut rapidement être envahi par des messages automatiques, ce qui nuit à la fois à votre productivité et à la crédibilité de votre site. C’est ici qu’intervient le captcha : conçu pour vérifier que l’utilisateur est bien un humain et non un robot, il ajoute une couche de sécurité essentielle à votre formulaire.

Il existe de nombreux services tiers proposant des solutions de captcha que vous pouvez facilement intégrer à un formulaire de contact Divi.

Divi intègre nativement un captcha, cependant je ne vous le recommande pas. Celui-ci repose sur des calculs très basiques du type « 3 + 15 = ? », qui sont aujourd’hui facilement contournés par les spameurs. Cette solution peut convenir pour des sites très peu exposés, mais elle reste insuffisante pour un site professionnel ou fortement visité.

Google reCAPTCHA est aujourd’hui la solution la plus largement utilisée et la plus fiable. Il existe plusieurs versions (v2, v3) compatibles avec Divi, offrant un excellent compromis entre sécurité, performance et confort de navigation. Intégrer Google reCAPTCHA à votre formulaire de contact Divi permet ainsi de réduire drastiquement les spams tout en conservant un formulaire simple et efficace.

Mettre le captcha :

• Rendez vous dans les paramètres de votre module gris « Formulaire de contact ».
• Dans « Contenu » puis « Protection contre les spam », cliquez sur « Utiliser une service de protections anti-spam » (Q)
• Dans « Fournisseur de service », sélectionnez « reCaptcha » (R)
• Dans « compte reCaptcha v3 » ajoutez un compte (ou sélectionnez un compte existant si tel est le cas). (S)
• Donnez un nom au « compte ». (T)
• Récupérez la clé (U) et la clé secrète (V) sur le site cloud.console.google.com et insérez les dans les zones prévu sur Divi.
• Cliquez sur « ENVOIE »

Votre formulaire possède maintenant un captcha !

Les alternatives pour un formulaire de contact

Si le module de formulaire de contact Divi ne répond pas à tous vos besoins, il existe plusieurs plugins WordPress performants pour créer des formulaires efficaces et personnalisés.

Contact Form 7 est l’une des alternatives les plus populaires. Entièrement gratuit, léger et largement utilisé, il permet de créer des formulaires simples et fiables, compatibles avec la majorité des thèmes, dont Divi. Il offre également une bonne compatibilité avec les systèmes anti-spam et de nombreuses extensions pour enrichir ses fonctionnalités.

Pour des usages plus avancés, Gravity Forms se positionne comme une solution premium de référence. Ce plugin est cependant payant, mais il propose des fonctionnalités bien plus poussées et une gestion avancée des soumissions. Gravity Forms s’intègre parfaitement avec Divi et convient particulièrement aux sites professionnels, aux projets complexes ou aux entreprises ayant besoin de formulaires évolués et performants.