Comment configurer un formulaire de contact avec Divi?

Si vous possédez un site WordPress avec Divi et souhaitez faciliter la communication avec vos visiteurs via un formulaire de contact, vous êtes au bon endroit. Si vous cherchez une solution simple pour créer un formulaire de contact personnalisé qui répond à vos besoins spécifiques, cet article est pour vous.

Nous vous guiderons à travers le processus de configuration d’un formulaire de contact en utilisant Divi, un thème WordPress polyvalent qui offre une vaste gamme d’options de design et de fonctionnalités.

Divi se distingue par son Divi Builder, un constructeur de pages intuitif permettant de façonner le contenu de votre site avec facilité. Parmi ses modules, le module de formulaire de contact se démarque, permettant la création de formulaires en quelques clics sans nécessiter d’extensions additionnelles.

Avec le module de formulaire de contact Divi, vous avez la liberté de choisir parmi une variété de champs à intégrer, tels que nom, email, message, cases à cocher, boutons radio et menus déroulants.

Il offre également des options de personnalisation poussées pour l’esthétique de votre formulaire, y compris la couleur, la typographie, les bordures, les ombres et les marges.

De plus, il inclut des fonctionnalités comme la protection anti-spam, la redirection après envoi, et la personnalisation des notifications envoyées à vous et à vos interlocuteurs.

Configurer un formulaire de contact sur Divi en 3 étapes:

Ce guide vous expliquera comment mettre en place un formulaire de contact avec Divi en trois étapes faciles :

• Étape 1 : Installation et préparation du module de formulaire de contact Divi
• Étape 2 : Personnalisation des champs du formulaire
• Étape 3 : Réglage des paramètres d’envoi et de réception des données

À l’issue de ce guide, vous disposerez d’un formulaire de contact fonctionnel et visuellement attrayant, favorisant une communication efficace avec vos visiteurs et la génération de leads. Commençons sans tarder !

Étape 1 : Préparation et installation du module formulaire de contact Divi

Pour mettre en place un formulaire de contact en utilisant Divi, commencez par ouvrir le Divi Builder. Cet outil de création visuelle vous aide à construire et personnaliser votre site facilement avec des modules prédéfinis.

Accéder au Divi Builder

Une fois le thème Divi installé et activé sur votre WordPress, le Divi Builder devient accessible sur toutes les pages de votre site. Pour l’utiliser, rendez-vous sur la page à éditer et sélectionnez « Activer le constructeur visuel » depuis la barre d’administration en haut.

Pour ajouter un nouveau formulaire de contact sur une page fraîchement créée, créez d’abord cette page via le tableau de bord WordPress en naviguant vers Page > Ajouter. Nommez votre page et choisissez « Utiliser le Divi Builder » pour activer l’outil sur cette nouvelle page.

Choisir et insérer le module « Formulaire de contact »

Dans le Divi Builder, l’ajout de modules se fait en cliquant sur le bouton « + » gris situé dans une rangée. Cela ouvre la bibliothèque de modules Divi, où tous les modules disponibles sont listés. Défilez jusqu’au module « Formulaire de contact » et cliquez dessus pour l’ajouter à votre page.

Vous pouvez aussi rechercher directement « formulaire de contact » dans la barre de recherche en haut de la bibliothèque et appuyer sur Entrée. Le module sera alors ajouté automatiquement à votre page.

Par défaut, le module de formulaire de contact comprend des champs pour le nom, l’email et un message. Ces champs sont personnalisables, et vous pouvez en ajouter d’autres via les paramètres du module, que nous explorerons dans l’étape suivante.

Étape 2 : Personnalisation des champs du formulaire

Cette étape vous guide sur l’ajout et l’organisation des champs nécessaires à votre formulaire de contact. Vous apprendrez à configurer les types de champs en fonction des informations à recueillir et à personnaliser leur apparence pour les rendre plus engageants.

Ajouter et organiser les champs nécessaires

Pour ajouter et organiser les champs dans votre formulaire de contact, accédez aux paramètres du module de formulaire de contact ajouté précédemment. Cliquez sur l’icône d’engrenage qui s’affiche en survolant le module.

Une section « Champs de formulaire » s’affichera, listant les champs par défaut : nom, email, et message. Ces champs peuvent être modifiés, supprimés ou réarrangés grâce aux boutons situés à leur droite.

Pour ajouter de nouveaux champs, utilisez le bouton « + » situé en bas de la section. Vous aurez le choix entre six types de champs : ligne de texte, email, zone de texte, case à cocher, bouton radio et menu déroulant.

Après l’ajout d’un champ, attribuez-lui un ID et un titre qui apparaîtront sur le formulaire. Vous pouvez rendre le champ obligatoire en cochant ou décochant la case « Requis ». La logique conditionnelle peut être utilisée pour afficher ou cacher des champs en fonction des réponses à d’autres questions.

Configurer les types de champs (Texte, Email, Sélection, etc.)

Les options de configuration varient selon le type de champ choisi :

• Ligne de texte : choix des symboles autorisés, longueur maximale du texte, et texte par défaut.
• Email : texte par défaut et vérification automatique de la validité de l’adresse.
• Zone de texte : réglage de la hauteur du champ, longueur maximale du texte, et texte par défaut.
• Case à cocher : texte associé et choix du statut par défaut de la case.
• Bouton radio : texte associé à chaque bouton, nombre de boutons, et sélection par défaut.
• Menu déroulant : texte initial, options disponibles, et option sélectionnée par défaut.

Personnaliser l’aspect visuel des champs

Accédez aux paramètres de design du module de formulaire de contact via l’onglet « Design » pour personnaliser l’aspect visuel des champs.

Vous pourrez modifier l’apparence du formulaire et de ses composants (champs, titre, texte, bouton, captcha) selon vos préférences :

• Disposition des champs sur une ou deux colonnes, ajustement de l’espacement.
• Personnalisation de la couleur, police, taille, alignement, style et ombre du texte, du titre et du bouton.
• Ajustement de la couleur, transparence, rayon, bordure et ombre du fond des champs.
• Modification de la largeur, hauteur, remplissage, marge et animation des champs et du bouton.
• Configuration du captcha, incluant sa couleur et sa taille.

Le CSS personnalisé peut être utilisé pour une personnalisation plus poussée, si vous avez des compétences en la matière.

Étape 3 : Configuration des paramètres et de l’envoi des données

Dans cette étape cruciale, nous aborderons la configuration des paramètres de votre formulaire de contact Divi, y compris la définition de l’email destinataire, le sujet de l’email, l’implémentation de la logique conditionnelle si nécessaire, l’activation de la protection contre les spams, et la personnalisation des messages de confirmation et de succès.

Réglages de l’email destinataire et sujet de l’email

Pour spécifier l’email destinataire et le sujet de l’email, accédez aux paramètres du module formulaire de contact et sélectionnez l’onglet “Email”. Remplissez les champs suivants :

• Email à : Indiquez l’adresse email où vous souhaitez recevoir les soumissions, séparant les adresses multiples par une virgule.
• Sujet du message : Déterminez le sujet de l’email. Utilisez des balises dynamiques pour intégrer des informations telles que le nom ou l’email de l’expéditeur.
• Message : Personnalisez le contenu de l’email reçu en incorporant des balises dynamiques pour inclure les champs du formulaire.
• Email de l’expéditeur : Configurez l’adresse email qui sera affichée comme expéditeur de l’email. Une balise dynamique permet d’utiliser l’email saisi par l’utilisateur.
• Nom de l’expéditeur : Précisez le nom qui sera affiché comme expéditeur de l’email, en utilisant une balise dynamique pour le nom de l’utilisateur.
• Envoyer une copie à l’expéditeur : Cochez cette option pour que l’utilisateur reçoive une copie de l’email envoyé.

Mise en place de la logique conditionnelle (si nécessaire)

La logique conditionnelle permet de montrer ou cacher des champs du formulaire selon les réponses fournies à d’autres questions. Cela rend votre formulaire plus dynamique et adapté aux besoins de vos visiteurs.

Pour activer cette fonction, accédez aux paramètres du champ concerné et cochez “Utiliser la logique conditionnelle”. Vous pourrez alors définir des règles basées sur des champs spécifiques, des opérateurs de comparaison, et des valeurs cibles, permettant de contrôler la visibilité des champs.

Activation de la protection contre les spams (Captcha, etc.)

Pour sécuriser votre formulaire contre les spams, activez une option captcha qui vérifie que l’utilisateur n’est pas un robot avant l’envoi du formulaire. Cela aide à réduire les soumissions indésirables.

Accédez à l’onglet “Spam” dans les paramètres du module pour choisir entre :

• Utiliser le captcha de base : Un captcha simple sera affiché, demandant à l’utilisateur de résoudre une équation.

Utiliser le captcha Google : Un captcha Google demandera à l’utilisateur de confirmer qu’il n’est pas un robot. Pour cela, une clé de site et une clé secrète Google reCAPTCHA sont nécessaires, disponibles gratuitement sur le site officiel de Google.

Paramétrage des messages de confirmation et de succès

Enfin, configurez les messages de confirmation et de succès qui s’afficheront après l’envoi du formulaire. Ces messages sont essentiels pour confirmer la réception et remercier vos visiteurs ou les rediriger vers d’autres sections de votre site.

Accédez à l’onglet “Texte” dans les paramètres du module pour personnaliser :

• Message de succès : Personnalisez le message post-envoi, en intégrant des balises dynamiques pour des informations spécifiques du formulaire.
• Rediriger vers une URL personnalisée : Cochez cette option pour rediriger l’utilisateur vers une page spécifique après l’envoi. Indiquez l’URL souhaitée pour améliorer l’expérience utilisateur avec une page de remerciement ou une offre spéciale.

Pour conclure sur comment configurer un formulaire de contact avec Divi

Vous avez maintenant les clés en main pour mettre en place un formulaire de contact efficace grâce à Divi, le thème WordPress reconnu pour sa polyvalence et sa popularité. Vous avez découvert comment :

• Préparer et activer le module formulaire de contact de Divi
• Adapter les champs du formulaire selon vos exigences
• Régler les paramètres pour l’envoi des données

Ces trois étapes faciles vous permettent de concevoir un formulaire de contact à la fois opérationnel et visuellement agréable, favorisant ainsi la communication avec vos visiteurs et la génération de leads. Pour un rendu encore plus personnalisé, n’hésitez pas à explorer les options de design offertes par le module, ou à incorporer du CSS sur mesure.

Il est temps de passer à l’action ! Créez votre formulaire de contact avec Divi pour donner à votre site WordPress une allure professionnelle et contemporaine.

Nous espérons que cet article vous a éclairé sur comment configurer un formulaire de contact avec Divi. Si c’est le cas, nous vous invitons à consulter nos autres autres articles et tutoriels.

N’hésitez pas non plus à consulter notre base de connaissance. Vous y trouverez une foule d’articles détaillés pouvant répondre à toutes vos questions web.