Si vous poss\u00e9dez un site WordPress avec Divi et souhaitez faciliter la communication avec vos visiteurs via un formulaire de contact, vous \u00eates au bon endroit. Si vous cherchez une solution simple pour cr\u00e9er un formulaire de contact personnalis\u00e9 qui r\u00e9pond \u00e0 vos besoins sp\u00e9cifiques, cet article est pour vous.<\/p>\n\n\n\n
Nous vous guiderons \u00e0 travers le processus de configuration d’un formulaire de contact en utilisant Divi, un th\u00e8me WordPress polyvalent qui offre une vaste gamme d’options de design et de fonctionnalit\u00e9s.<\/p>\n\n\n\n
Divi se distingue par son Divi Builder, un constructeur de pages intuitif permettant de fa\u00e7onner le contenu de votre site avec facilit\u00e9. Parmi ses modules, le module de formulaire de contact se d\u00e9marque, permettant la cr\u00e9ation de formulaires en quelques clics sans n\u00e9cessiter d’extensions additionnelles.<\/p>\n\n\n\n
Avec le module de formulaire de contact Divi, vous avez la libert\u00e9 de choisir parmi une vari\u00e9t\u00e9 de champs \u00e0 int\u00e9grer, tels que nom, email, message, cases \u00e0 cocher, boutons radio et menus d\u00e9roulants. <\/p>\n\n\n\n
Il offre \u00e9galement des options de personnalisation pouss\u00e9es pour l’esth\u00e9tique de votre formulaire, y compris la couleur, la typographie, les bordures, les ombres et les marges. <\/p>\n\n\n\n
De plus, il inclut des fonctionnalit\u00e9s comme la protection anti-spam, la redirection apr\u00e8s envoi, et la personnalisation des notifications envoy\u00e9es \u00e0 vous et \u00e0 vos interlocuteurs.<\/p>\n\n\n\n
Ce guide vous expliquera comment mettre en place un formulaire de contact avec Divi en trois \u00e9tapes faciles :<\/p>\n\n\n\n
\u00c0 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\u00e9n\u00e9ration de leads. Commen\u00e7ons sans tarder !<\/p>\n\n\n\n
Pour mettre en place un formulaire de contact en utilisant Divi, commencez par ouvrir le Divi Builder. Cet outil de cr\u00e9ation visuelle vous aide \u00e0 construire et personnaliser votre site facilement avec des modules pr\u00e9d\u00e9finis.<\/p>\n\n\n\n
Une fois le th\u00e8me Divi install\u00e9 et activ\u00e9 sur votre WordPress, le Divi Builder devient accessible sur toutes les pages de votre site. Pour l’utiliser, rendez-vous sur la page \u00e0 \u00e9diter et s\u00e9lectionnez \u00ab\u00a0Activer le constructeur visuel\u00a0\u00bb depuis la barre d’administration en haut.<\/p>\n\n\n\n
Pour ajouter un nouveau formulaire de contact sur une page fra\u00eechement cr\u00e9\u00e9e, cr\u00e9ez d’abord cette page via le tableau de bord WordPress en naviguant vers Page > Ajouter. Nommez votre page et choisissez \u00ab\u00a0Utiliser le Divi Builder\u00a0\u00bb pour activer l’outil sur cette nouvelle page.<\/p>\n\n\n\n
Dans le Divi Builder, l’ajout de modules se fait en cliquant sur le bouton \u00ab\u00a0+\u00a0\u00bb gris situ\u00e9 dans une rang\u00e9e. Cela ouvre la biblioth\u00e8que de modules Divi, o\u00f9 tous les modules disponibles sont list\u00e9s. D\u00e9filez jusqu’au module \u00ab\u00a0Formulaire de contact\u00a0\u00bb et cliquez dessus pour l’ajouter \u00e0 votre page.<\/p>\n\n\n\n
Vous pouvez aussi rechercher directement \u00ab\u00a0formulaire de contact\u00a0\u00bb dans la barre de recherche en haut de la biblioth\u00e8que et appuyer sur Entr\u00e9e. Le module sera alors ajout\u00e9 automatiquement \u00e0 votre page.<\/p>\n\n\n\n
Par d\u00e9faut, 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\u00e8tres du module, que nous explorerons dans l’\u00e9tape suivante.<\/p>\n\n\n\n
Cette \u00e9tape vous guide sur l’ajout et l’organisation des champs n\u00e9cessaires \u00e0 votre formulaire de contact. Vous apprendrez \u00e0 configurer les types de champs en fonction des informations \u00e0 recueillir et \u00e0 personnaliser leur apparence pour les rendre plus engageants.<\/p>\n\n\n\n
Pour ajouter et organiser les champs dans votre formulaire de contact, acc\u00e9dez aux param\u00e8tres du module de formulaire de contact ajout\u00e9 pr\u00e9c\u00e9demment. Cliquez sur l’ic\u00f4ne d’engrenage qui s’affiche en survolant le module.<\/p>\n\n\n\n
Une section \u00ab\u00a0Champs de formulaire\u00a0\u00bb s’affichera, listant les champs par d\u00e9faut : nom, email, et message. Ces champs peuvent \u00eatre modifi\u00e9s, supprim\u00e9s ou r\u00e9arrang\u00e9s gr\u00e2ce aux boutons situ\u00e9s \u00e0 leur droite.<\/p>\n\n\n\n
Pour ajouter de nouveaux champs, utilisez le bouton \u00ab\u00a0+\u00a0\u00bb situ\u00e9 en bas de la section. Vous aurez le choix entre six types de champs : ligne de texte, email, zone de texte, case \u00e0 cocher, bouton radio et menu d\u00e9roulant.<\/p>\n\n\n\n
Apr\u00e8s l’ajout d’un champ, attribuez-lui un ID et un titre qui appara\u00eetront sur le formulaire. Vous pouvez rendre le champ obligatoire en cochant ou d\u00e9cochant la case \u00ab\u00a0Requis\u00a0\u00bb. La logique conditionnelle peut \u00eatre utilis\u00e9e pour afficher ou cacher des champs en fonction des r\u00e9ponses \u00e0 d’autres questions.<\/p>\n\n\n\n
Les options de configuration varient selon le type de champ choisi :<\/p>\n\n\n\n
Acc\u00e9dez aux param\u00e8tres de design du module de formulaire de contact via l’onglet \u00ab\u00a0Design\u00a0\u00bb pour personnaliser l’aspect visuel des champs.<\/p>\n\n\n\n
Vous pourrez modifier l’apparence du formulaire et de ses composants (champs, titre, texte, bouton, captcha) selon vos pr\u00e9f\u00e9rences :<\/p>\n\n\n\n
Le CSS personnalis\u00e9 peut \u00eatre utilis\u00e9 pour une personnalisation plus pouss\u00e9e, si vous avez des comp\u00e9tences en la mati\u00e8re.<\/p>\n\n\n\n
Dans cette \u00e9tape cruciale, nous aborderons la configuration des param\u00e8tres de votre formulaire de contact Divi, y compris la d\u00e9finition de l\u2019email destinataire, le sujet de l\u2019email, l\u2019impl\u00e9mentation de la logique conditionnelle si n\u00e9cessaire, l\u2019activation de la protection contre les spams, et la personnalisation des messages de confirmation et de succ\u00e8s.<\/p>\n\n\n\n
Pour sp\u00e9cifier l\u2019email destinataire et le sujet de l\u2019email, acc\u00e9dez aux param\u00e8tres du module formulaire de contact et s\u00e9lectionnez l\u2019onglet \u201cEmail\u201d. Remplissez les champs suivants :<\/p>\n\n\n\n
La logique conditionnelle permet de montrer ou cacher des champs du formulaire selon les r\u00e9ponses fournies \u00e0 d\u2019autres questions. Cela rend votre formulaire plus dynamique et adapt\u00e9 aux besoins de vos visiteurs.<\/p>\n\n\n\n
Pour activer cette fonction, acc\u00e9dez aux param\u00e8tres du champ concern\u00e9 et cochez \u201cUtiliser la logique conditionnelle\u201d. Vous pourrez alors d\u00e9finir des r\u00e8gles bas\u00e9es sur des champs sp\u00e9cifiques, des op\u00e9rateurs de comparaison, et des valeurs cibles, permettant de contr\u00f4ler la visibilit\u00e9 des champs.<\/p>\n\n\n\n
Pour s\u00e9curiser votre formulaire contre les spams, activez une option captcha qui v\u00e9rifie que l\u2019utilisateur n\u2019est pas un robot avant l\u2019envoi du formulaire. Cela aide \u00e0 r\u00e9duire les soumissions ind\u00e9sirables.<\/p>\n\n\n\n
Acc\u00e9dez \u00e0 l\u2019onglet \u201cSpam\u201d dans les param\u00e8tres du module pour choisir entre :<\/p>\n\n\n\n
Utiliser le captcha Google :<\/strong> Un captcha Google demandera \u00e0 l\u2019utilisateur de confirmer qu\u2019il n\u2019est pas un robot. Pour cela, une cl\u00e9 de site et une cl\u00e9 secr\u00e8te Google reCAPTCHA sont n\u00e9cessaires, disponibles gratuitement sur le site officiel de Google.<\/p>\n\n\n\n Enfin, configurez les messages de confirmation et de succ\u00e8s qui s\u2019afficheront apr\u00e8s l\u2019envoi du formulaire. Ces messages sont essentiels pour confirmer la r\u00e9ception et remercier vos visiteurs ou les rediriger vers d\u2019autres sections de votre site.<\/p>\n\n\n\n Acc\u00e9dez \u00e0 l\u2019onglet \u201cTexte\u201d dans les param\u00e8tres du module pour personnaliser :<\/p>\n\n\n\n Vous avez maintenant les cl\u00e9s en main pour mettre en place un formulaire de contact efficace gr\u00e2ce \u00e0 Divi, le th\u00e8me WordPress reconnu pour sa polyvalence et sa popularit\u00e9. Vous avez d\u00e9couvert comment :<\/p>\n\n\n\n Ces trois \u00e9tapes faciles vous permettent de concevoir un formulaire de contact \u00e0 la fois op\u00e9rationnel et visuellement agr\u00e9able, favorisant ainsi la communication avec vos visiteurs et la g\u00e9n\u00e9ration de leads. Pour un rendu encore plus personnalis\u00e9, n’h\u00e9sitez pas \u00e0 explorer les options de design offertes par le module, ou \u00e0 incorporer du CSS sur mesure.<\/p>\n\n\n\n Il est temps de passer \u00e0 l’action ! Cr\u00e9ez votre formulaire de contact avec Divi pour donner \u00e0 votre site WordPress une allure professionnelle et contemporaine.<\/p>\n\n\n\n Nous esp\u00e9rons que cet article vous a \u00e9clair\u00e9 sur comment configurer un formulaire de contact avec Divi. Si c\u2019est le cas, nous vous invitons \u00e0 consulter nos autres autres articles et tutoriels<\/a>.<\/p>\n\n\n\nParam\u00e9trage des messages de confirmation et de succ\u00e8s<\/strong><\/h3>\n\n\n\n
\n
Pour conclure sur comment configurer un formulaire de contact avec Divi<\/strong><\/h2>\n\n\n\n
\n