Comment créer un formulaire de contact Divi avec WPForms

Le module de formulaire de contact intégré à Divi fait l'affaire pour les messages simples. Mais si vous avez déjà essayé d'ajouter des téléchargements de fichiers, de collecter des paiements ou même simplement de stocker les soumissions dans votre tableau de bord WordPress, vous avez sans doute rencontré ses limites.

Divi 5 a apporté de réelles améliorations au module de formulaire, notamment une logique conditionnelle et de meilleures options de mise en forme. Cela dit, le formulaire intégré ne dispose toujours pas de fonctionnalités essentielles dont la plupart des sites web professionnels ont besoin. Il n'y a pas de stockage des données saisies, ni de traitement des paiements, et même les fonctionnalités de protection contre le spam sont limitées.

WPForms est un générateur de formulaires dédié à WordPress qui comble toutes ces lacunes et s'intègre directement à Divi via un module natif. Vous bénéficiez d'un véritable générateur par glisser-déposer doté de fonctionnalités de création de formulaires par IA, de plus de 2 100 modèles, et chaque formulaire que vous créez s'intègre directement dans l'éditeur visuel de Divi à partir d'un simple menu déroulant.

Créez un formulaire de contact Divi avec WPForms ! 🙂

Comment créer un formulaire de contact Divi avec WPForms

Je vais vous présenter ci-dessous les principales différences entre le module de formulaire de Divi et WPForms, puis vous guider tout au long du processus de configuration, de l'installation du plugin à la publication de votre formulaire sur une page Divi.

Je vais également vous montrer comment personnaliser l'apparence du formulaire à l'aide des commandes de conception de Divi et vous présenter quelques types de formulaires avancés que vous pourrez créer une fois que tout sera configuré.

Pourquoi utiliser WPForms plutôt que le formulaire de contact intégré à Divi ?

Le module de formulaire de contact de Divi gère assez bien les fonctionnalités de base. Vous disposez de champs de texte, de champs d'adresse e-mail, de menus déroulants et d'une logique conditionnelle si vous utilisez Divi 5. Mais dès que vous avez besoin de quelque chose qui va au-delà de la simple collecte d'un nom, d'une adresse e-mail et d'un message, les limites commencent à se faire sentir.

Il n'est pas possible d'accepter le téléchargement de fichiers, il n'y a pas de système de paiement intégré, et les soumissions de formulaires sont directement envoyées par e-mail, sans possibilité de les consulter ou de les gérer depuis WordPress. Voici un bref comparatif pour mettre en évidence les différences entre ces deux options.

Si un simple formulaire de contact « Nom, e-mail, message » suffit, le module Divi s'en charge très bien tout seul. Mais pour tout ce qui est plus complexe, WPForms comble toutes ces lacunes en un seul plugin, sans que vous ayez à en installer trois ou quatre autres.

Étape 1 : Installer le plugin WPForms

WPForms est un générateur de formulaires par glisser-déposer spécialement conçu pour WordPress. Il propose plus de 2 100 modèles de formulaires couvrant tous les besoins, des formulaires de contact et de paiement aux sondages, en passant par les formulaires d'inscription et les calculateurs.

Ce que j'apprécie le plus chez WPForms pour les sites Divi, c'est l'intégration native des modules. J'ai configuré des formulaires à la fois sur des sites Divi et Elementor, et le module Divi offre véritablement une expérience plus fluide.

Pour un formulaire de contact basique, WPForms Lite (gratuit) est idéal pour débuter. Si vous avez besoin de fonctionnalités telles que le téléchargement de fichiers, la logique conditionnelle ou le stockage des données, optez pour la formule Pro.

Pour commencer, achetez la licence Pro. Ensuite, installez WPForms sur votre site web. Si vous avez besoin d'aide, suivez ces instructions pour ajouter un plugin à WordPress.

Passez à WPForms Pro dès maintenant ! 🙂 .

Étape 2 : Créer votre formulaire de contact Divi

Une fois WPForms activé, rendez-vous dans WPForms » Ajouter un nouveau formulaire pour créer votre premier formulaire. Vous avez deux possibilités pour commencer. La méthode classique consiste à utiliser la bibliothèque de modèles, qui propose des centaines de formulaires prédéfinis classés par catégorie.

Recherchez « Simple Contact Form » et cliquez sur « Utiliser le modèle » pour obtenir un modèle de base épuré comprenant déjà les champs Nom, E-mail et Commentaire/Message.

L'option la plus rapide est le générateur de formulaires basé sur l'IA: il vous suffit de décrire ce que votre formulaire doit faire, par exemple « J'ai besoin d'un formulaire de contact comprenant un champ pour le nom, l'adresse e-mail et le numéro de téléphone, un menu déroulant pour le service et un champ de message », et WPForms le crée pour vous.

L'IA permet également de remplir les champs de sélection. Si vous ajoutez un menu déroulant pour la question « Comment avez-vous entendu parler de nous ? » et que vous n'avez pas envie de saisir toutes les options, AI Choices générera une liste pertinente que vous pourrez modifier.

Une fois vos champs créés, l'éditeur par glisser-déposer vous permet de les réorganiser, de les renommer et de les configurer de manière visuelle. Vous pouvez définir des champs obligatoires, ajouter du texte de remplacement, ajuster la taille des champs et utiliser une logique conditionnelle pour afficher ou masquer des champs en fonction des choix effectués par le visiteur.

Une fois vos champs prêts, cliquez sur l'onglet « Paramètres » pour configurer les notifications de votre formulaire. Cela vous permet de définir l'adresse e-mail qui recevra les soumissions, ainsi que l'apparence de l'e-mail de notification.

Prenez quelques instants pour vérifier ces paramètres avant la mise en ligne, car par défaut, les notifications sont envoyées à l'adresse e-mail de l'administrateur WordPress, qui n'est peut-être pas la bonne boîte de réception.

Il y a une chose à garder à l'esprit concernant l'envoi d'e-mails avec WordPress. Par défaut, WordPress utilise la fonction « mail » intégrée à PHP, et de nombreux hébergeurs la bloquent ou la limitent.

Si vous avez déjà constaté que certains formulaires envoyés n'apparaissaient pas dans votre boîte de réception, c'est très certainement la cause du problème. Le plugin WP Mail SMTP résout ce problème en acheminant vos e-mails via un serveur SMTP authentifié.

Je vous conseille de configurer cette option avant la mise en ligne de votre formulaire, car il est très pénible de devoir résoudre les problèmes d'e-mails manquants une fois que tout est déjà en ligne. Cliquez sur « Enregistrer » dans le coin supérieur droit lorsque tout vous semble correct.

Étape 3 : Ouvrir le Divi Builder

Une fois que vous avez créé votre nouvelle page de contact (ou n'importe quelle page sur laquelle vous voulez placer votre formulaire de contact), vous devez cliquer sur le bouton Edit With The Divi Builder pour lancer le créateur de pages WordPress Divi.

S'il s'agit d'une page existante, son apparence peut être légèrement différente. Dans ce cas, il suffit de cliquer sur « Utiliser Divi Builder » pour l'ouvrir. Les deux options vous mènent au même éditeur visuel.

Une fois le constructeur ouvert, vous serez invité à définir la mise en page de votre page.

Étape 4 : Choisir la mise en page de votre formulaire de contact Divi

Une fois le constructeur chargé, cliquez sur « Commencer la création » pour ouvrir une page vierge. Divi vous invitera à choisir une disposition de lignes pour votre première section. Je vous conseille d'opter ici pour la disposition à une seule colonne.

Cela permet au formulaire de contact d'occuper toute la largeur de la page et de concentrer l'attention du visiteur sur son remplissage, plutôt que de diviser la mise en page avec d'autres contenus qui lui font concurrence.

Ensuite, vous verrez apparaître une page blanche. C'est votre espace de création ! Et c'est ainsi que vous déciderez de l'apparence de votre page Divi et de l'emplacement de votre formulaire de contact WPForms.

Une fenêtre contextuelle s'affichera pour vous demander quel type de mise en page (à base de lignes) vous souhaitez ajouter à votre page Divi. Pour cet article, choisissons la première option.

Ainsi, le formulaire de contact sera le seul « élément » à figurer dans cette ligne ; il attirera donc davantage l'attention et les utilisateurs seront plus enclins à le remplir. N'hésitez pas à sélectionner la première option (une seule ligne) pour vos lignes.

Maintenant, vous serez invité à insérer un module. Nous allons maintenant insérer notre superbe formulaire WPForms.

Étape 5 : Insérer le module WPForms Divi

Cette étape est très simple, car WPForms dispose de sa propre intégration Divi et d'un module de formulaire de contact ! Pour l'ajouter, recherchez « WPForms » dans la barre de recherche, puis sélectionnez le module qui s'affiche.

Dans l'onglet « Contenu », sélectionnez votre formulaire de contact dans le menu déroulant « Formulaire ». Cette liste répertorie tous les formulaires que vous avez créés dans WPForms.

Vous pouvez également afficher ou masquer le titre et la description du formulaire, même si la plupart des utilisateurs choisissent de les masquer pour que la page soit plus épurée.

Le formulaire s'affiche immédiatement sur la page, ce qui vous permet de voir exactement comment il s'intègre à votre mise en page avant de le publier. Si tout vous convient, cliquez sur la coche verte pour enregistrer le module.

Bravo, votre formulaire de contact est intégré et prêt à l'emploi. Vous pouvez désormais le publier de la même manière que n'importe quelle autre page dans Divi. Cliquez sur les trois points situés en bas du constructeur de pages pour afficher des paramètres Divi supplémentaires.

Cliquez ensuite sur le bouton « Publier » pour le voir en ligne. Votre formulaire de contact Divi est désormais en ligne. Les soumissions seront transmises à la fois à votre adresse e-mail de notification et au tableau de bord WPForms » Entrées.

C'est ici que vous pouvez consulter, rechercher, marquer d'un favori, exporter et gérer toutes les soumissions directement depuis WordPress. Cela constitue à lui seul une amélioration considérable par rapport au formulaire intégré de Divi, qui envoie les soumissions par e-mail, après quoi elles disparaissent.

Au-delà du simple formulaire de contact

Le module WPForms pour Divi fonctionne avec tous les types de formulaires que vous créez, et pas seulement les formulaires de contact. Une fois le plugin installé et le module disponible dans Divi, voici quelques-uns des types de formulaires les plus courants que les utilisateurs de Divi ont tendance à configurer.

Formulaires de paiement et de commande

Vous pouvez accepter des paiements via Stripe, PayPal Commerce ou Square directement depuis n'importe quel formulaire. J'ai vu des freelances s'en servir pour percevoir des acomptes sur des projets, et des petites entreprises l'utiliser pour des formulaires de commande simples comprenant des sélecteurs de quantité et des codes promo. Si vous gérez un site Divi pour une entreprise de services, c'est l'une des améliorations les plus pratiques que vous puissiez apporter.

Formulaires de téléchargement de fichiers

WPForms intègre un champ de formulaire de téléchargement de fichiers par glisser-déposer qui prend en charge plusieurs types de fichiers, la capture en direct par caméra, des limites de taille configurables et la synchronisation automatique avec le stockage cloud sur Google Drive ou Dropbox.

Le formulaire intégré à Divi ne permet absolument pas de télécharger des fichiers, ce qui est l'une des principales raisons pour lesquelles les utilisateurs de Divi finissent par rechercher un plugin de formulaire distinct.

Formulaires de prospection en plusieurs étapes

Les longs formulaires comportant une douzaine de champs sur une seule page ont tendance à être abandonnés. Avec les formulaires en plusieurs étapes, vous pouvez répartir ces champs sur plusieurs pages et ajouter une barre de progression afin que les visiteurs ne voient qu'une section à la fois, plus facile à gérer.

J'ai rédigé un guide complet expliquant comment créer un formulaire en plusieurs étapes avec des sauts de page, des indicateurs de progression et une logique de page conditionnelle, si vous souhaitez approfondir la configuration.

Formulaires d'enquête et de commentaires

WPForms Pro intègre un système de notation NPS, des champs à échelle de Likert et des rapports d'enquête interactifs qui vous fournissent une analyse visuelle détaillée de chaque réponse.

Si vous recueillez les avis de vos clients, menez des enquêtes de satisfaction ou réalisez des études de marché sur un site créé avec Divi, cela vous évite complètement d'avoir recours à un outil d'enquête distinct.

Foire aux questions sur les formulaires de contact Divi

WPForms et Divi constituent une combinaison très prisée pour la création de formulaires WordPress. Voici les réponses aux questions les plus fréquemment posées concernant leur utilisation conjointe.

WPForms est-il compatible avec Divi 5 ?

Oui. WPForms dispose d'un module Divi natif compatible à la fois avec Divi 4 et Divi 5. Il vous suffit de rechercher WPForms dans la bibliothèque de modules Divi, de sélectionner votre formulaire dans le menu déroulant, et celui-ci s'intègre directement dans l'éditeur visuel. Aucune configuration supplémentaire n'est nécessaire pour assurer la compatibilité avec Divi 5.

WPForms est-il gratuit pour Divi ?

WPForms Lite est entièrement gratuit et comprend un éditeur par glisser-déposer, un générateur de formulaires basé sur l'IA, la fonctionnalité « AI Choices », des paiements Stripe de base et une intégration complète avec les modules Divi.

Vous pouvez créer et intégrer un formulaire de contact fonctionnel sans débourser un centime. Pour bénéficier de fonctionnalités avancées telles que le téléchargement de fichiers, la logique conditionnelle, la gestion des entrées et les formulaires multipages, les formules payantes sont disponibles à partir de 49,50 $ par an.

Pourquoi mon formulaire de contact Divi n'envoie-t-il pas d'e-mails ?

Par défaut, WordPress utilise la fonction de messagerie intégrée à PHP, mais de nombreux hébergeurs la bloquent, la limitent ou la redirigent vers des serveurs qui finissent par déclencher les filtres anti-spam chez les destinataires.

L'installation d'un plugin SMTP tel que WP Mail SMTP permet de résoudre ce problème en acheminant les e-mails de vos formulaires via un serveur de messagerie authentifié. Cela résout le problème tant pour le formulaire intégré à Divi que pour WPForms.

Ensuite, optimisez vos formulaires Divi

Maintenant que votre formulaire de contact Divi est en ligne, vous souhaiterez peut-être peaufiner son apparence sur votre site. Consultez notre guide sur la personnalisation des formulaires de contact dans WordPress pour découvrir des astuces qui vous permettront d'harmoniser le design de votre formulaire avec les couleurs, les polices et l'espacement de votre thème Divi.

Si vous préférez que votre formulaire de contact s'affiche sous forme de fenêtre contextuelle plutôt que sur une page dédiée, voici comment créer une fenêtre contextuelle de formulaire de contact dans WordPress. Cela permet de conserver la clarté de vos pages tout en rendant le formulaire accessible depuis n'importe quelle page de votre site via un bouton ou un lien.

Créez dès maintenant votre formulaire de contact Divi

Prêt à créer votre formulaire ? Commencez dès aujourd'hui avec le plugin de construction de formulaire WordPress le plus facile à utiliser. WPForms Pro inclut de nombreux modèles gratuits et offre une garantie de remboursement de 14 jours.

Si cet article vous a aidé, n'hésitez pas à nous suivre sur Facebook et Twitter pour d'autres tutoriels et guides gratuits sur WordPress.