Comment créer un formulaire de contact Divi avec WPForms

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

Divi 5 a apporté de réelles améliorations au module de formulaire, notamment la logique conditionnelle et de meilleures options de style. Cela dit, le formulaire intégré manque toujours de fonctionnalités clés dont la plupart des sites Web d’entreprise ont besoin. Il n’y a pas de stockage des entrées, de traitement des paiements, et même les fonctionnalités de protection contre le spam sont limitées.

WPForms est un constructeur de formulaires WordPress dédié qui comble toutes ces lacunes et se connecte directement à Divi via un module natif. Vous obtenez un véritable constructeur par glisser-déposer avec des fonctionnalités de génération de formulaires par IA, plus de 2 100 modèles, et chaque formulaire que vous créez s’intègre directement dans le constructeur visuel Divi à partir d’une simple liste déroulante.

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

Comment créer un formulaire de contact Divi avec WPForms

Ci-dessous, j'aborderai les principales différences entre le module de formulaire de Divi et WPForms, puis je détaillerai la configuration complète, de l'installation du plugin à la publication de votre formulaire sur une page Divi.

Je vous montrerai également comment personnaliser l'apparence du formulaire à l'aide des contrôles de conception de Divi et j'explorerai certains types de formulaires avancés que vous pouvez créer une fois que tout est connecté.

Pourquoi utiliser WPForms au lieu du formulaire de contact intégré de Divi

Le module de formulaire de contact de Divi gère les bases assez bien. Vous obtenez des champs de texte, des champs d'e-mail, des listes déroulantes et une logique conditionnelle si vous utilisez Divi 5. Mais dès que vous avez besoin de plus que de collecter un nom, un e-mail et un message, les limitations commencent à s'accumuler.

Il n'y a aucun moyen d'accepter les téléchargements de fichiers, aucun traitement de paiement intégré, et les soumissions de formulaires vont directement par e-mail sans possibilité de les afficher ou de les gérer dans WordPress. Voici une comparaison rapide côte à côte pour montrer où les deux options diffèrent.

Si un simple formulaire de contact « Nom, e-mail, message » est tout ce dont vous avez besoin, 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 au lieu de nécessiter l'ajout de trois ou quatre extensions.

Étape 1 : Installer le plugin WPForms

WPForms est un constructeur de formulaires par glisser-déposer, spécialement conçu pour WordPress. Il est livré avec plus de 2 100 modèles de formulaires couvrant tout, des formulaires de contact et de paiement aux enquêtes, formulaires d'inscription et formulaires de calcul.

Ce que j'aime le plus chez WPForms pour les sites Divi, c'est l'intégration native du module. J'ai configuré des formulaires sur des sites Divi et Elementor, et le module Divi offre une expérience vraiment plus fluide.

Pour un formulaire de contact de base, WPForms Lite (gratuit) vous permet de démarrer. Si vous avez besoin de téléchargements de fichiers, de logique conditionnelle ou de stockage des entrées, optez pour le plan Pro.

Pour commencer, achetez la licence Pro. Ensuite, installez WPForms sur votre site Web. Si vous avez besoin d’aide, suivez ces instructions sur la manière d’ajouter un plugin à WordPress.

Passez à WPForms Pro maintenant ! 🙂

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

Avec WPForms actif, allez à WPForms » Ajouter un nouveau pour créer votre premier formulaire. Vous avez deux façons de commencer ici. La voie traditionnelle est la bibliothèque de modèles, qui contient des centaines de formulaires pré-construits organisés par catégorie.

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

L'option la plus rapide est le générateur de formulaires IA, qui vous permet de décrire ce que votre formulaire doit faire, par exemple « J'ai besoin d'un formulaire de contact avec nom, e-mail, téléphone, un menu déroulant pour le département et un champ message », et WPForms le crée pour vous.

L'IA fonctionne également pour remplir les choix de champs. Si vous ajoutez un menu déroulant pour « Comment avez-vous entendu parler de nous ? » et que vous n'avez pas envie de taper toutes les options, les Choix IA généreront une liste pertinente que vous pourrez modifier.

Une fois vos champs en place, le constructeur par glisser-déposer vous permet de les réorganiser, de les renommer et de tout configurer visuellement. Vous pouvez définir des champs comme obligatoires, ajouter du texte d'espace réservé, ajuster la taille des champs et utiliser la logique conditionnelle pour afficher ou masquer des champs en fonction de ce que le visiteur sélectionne.

Lorsque vos champs sont prêts, cliquez sur l'onglet Paramètres pour configurer vos notifications de formulaire. Cela contrôle quelle adresse e-mail reçoit les soumissions et à quoi ressemble l'e-mail de notification.

Prenez une minute pour vérifier ces paramètres avant de publier, car par défaut, les notifications sont envoyées à votre e-mail d'administration WordPress, ce qui peut ne pas être la bonne boîte de réception.

Une chose à garder à l'esprit concernant la livraison des e-mails WordPress. WordPress utilise par défaut la fonction d'envoi d'e-mails intégrée de PHP, et de nombreux hébergeurs la bloquent ou la limitent.

Si vous avez eu des soumissions de formulaire qui ne sont jamais arrivées dans votre boîte de réception, c'est presque certainement la cause. Le plugin WP Mail SMTP résout ce problème en acheminant vos e-mails via un serveur SMTP authentifié.

Je recommande de le configurer avant que votre formulaire ne soit en ligne, car le dépannage des e-mails manquants après coup est frustrant. Cliquez sur Enregistrer dans le coin supérieur droit lorsque tout semble correct.

Étape 3 : Ouvrez le constructeur Divi

Une fois que vous avez créé votre nouvelle page de contact (ou la page sur laquelle vous souhaitez que votre formulaire de contact se trouve), vous voudrez cliquer sur le bouton Modifier avec le constructeur Divi pour lancer le créateur de pages WordPress Divi.

S'il s'agit d'une page existante, elle peut sembler un peu différente. Si c'est le cas, cliquez simplement sur Utiliser le constructeur Divi pour le lancer. L'un ou l'autre vous amène dans le même éditeur visuel.

Une fois le constructeur ouvert, on vous demandera la disposition de votre page.

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

Une fois le constructeur chargé, cliquez sur Commencer la création pour ouvrir une toile vierge. Divi vous invitera à choisir une disposition de ligne pour votre première section. Je choisirais la ligne à colonne unique ici.

Cela donne au formulaire de contact toute la largeur et maintient l'attention du visiteur concentrée sur son remplissage, plutôt que de diviser la mise en page avec d'autres contenus qui rivalisent pour l'attention.

Ensuite, vous verrez apparaître une page vierge. C'est votre espace pour créer ! 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.

Vous verrez apparaître une fenêtre contextuelle vous demandant quel type de mise en page (utilisant des lignes) vous souhaitez ajouter à votre page Divi. Pour cet article, choisissons le premier choix.

Cela fera du formulaire de contact le seul « objet » à insérer dans cette ligne, de sorte qu'il attire beaucoup l'attention et que les gens le remplissent. Allez-y et sélectionnez la première option (la ligne unique) pour vos lignes.

Maintenant, vous serez invité à insérer un module. Insérons votre formidable formulaire WPForms ensuite.

Étape 5 : Insérez le module Divi WPForms

Cette étape est très facile car WPForms dispose de sa propre intégration Divi et d'un module de formulaire de contact ! Pour l'ajouter, recherchez WPForms dans la boîte de recherche, puis sélectionnez le module qui apparaît.

Sous l'onglet Contenu, choisissez votre formulaire de contact dans le menu déroulant Formulaire. Ceci liste tous les formulaires que vous avez créés dans WPForms.

Vous pouvez également activer ou désactiver le titre et la description du formulaire, bien que la plupart des gens les désactivent pour un aspect plus épuré sur la page.

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

Bon travail, votre formulaire de contact est intégré et prêt. Vous pouvez maintenant le publier de la même manière que vous publiez n'importe quelle page dans Divi. Cliquez sur les 3 points en bas de la page constructeur pour afficher des paramètres Divi supplémentaires.

Ensuite, sélectionnez le bouton Publier pour le voir en direct. Votre formulaire de contact Divi est en ligne. Les soumissions seront envoyées à votre e-mail de notification et au tableau de bord WPForms » Entrées.

C'est ici que vous pouvez afficher, rechercher, marquer, exporter et gérer chaque soumission depuis l'intérieur de WordPress. Cela seul est une amélioration majeure par rapport au formulaire intégré de Divi, qui envoie les entrées par e-mail, puis elles disparaissent.

Au-delà d'un formulaire de contact

Le module Divi de WPForms fonctionne pour tout type de formulaire que vous créez, 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 populaires que les utilisateurs de Divi ont tendance à configurer.

Formulaires de paiement et de commande

Vous pouvez accepter des paiements avec Stripe, PayPal Commerce ou Square directement depuis n'importe quel formulaire. J'ai vu des freelances l'utiliser pour collecter des acomptes de projet et des petites entreprises pour des formulaires de commande simples avec sélecteurs de quantité et codes promotionnels. 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 inclut un champ de formulaire de téléchargement de fichiers par glisser-déposer qui prend en charge plusieurs types de fichiers, la capture directe par caméra, des limites de taille configurables et la synchronisation automatique du stockage cloud avec Google Drive ou Dropbox.

Le formulaire intégré de Divi n'a aucune capacité de téléchargement de fichiers, ce qui est l'une des raisons les plus courantes pour lesquelles les utilisateurs de Divi finissent par chercher un plugin de formulaire séparé en premier lieu.

Formulaires de prospects en plusieurs étapes

Les longs formulaires avec une douzaine de champs sur une seule page ont tendance à être abandonnés. Avec les formulaires en plusieurs étapes, vous pouvez diviser ces champs sur plusieurs pages avec une barre de progression, de sorte que les visiteurs voient une section gérable à la fois.

J'ai préparé un guide complet sur la façon de 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 de sondage et de commentaires

WPForms Pro inclut le calcul du NPS, des champs de type échelle de Likert et des rapports d'enquête interactifs qui vous donnent des analyses visuelles de chaque réponse.

Si vous collectez des commentaires clients, menez des enquêtes de satisfaction ou effectuez des recherches de marché sur un site propulsé par Divi, cela remplace entièrement le besoin d'un outil d'enquête séparé.

FAQ sur les formulaires de contact Divi

WPForms et Divi sont une combinaison populaire pour créer des formulaires WordPress. Voici les réponses aux questions les plus fréquentes concernant leur utilisation conjointe.

WPForms fonctionne-t-il avec Divi 5 ?

Oui. WPForms dispose d'un module Divi natif qui fonctionne avec Divi 4 et Divi 5. Vous recherchez WPForms dans la bibliothèque de modules Divi, sélectionnez votre formulaire dans une liste déroulante, et il s'intègre directement dans le constructeur visuel. Rien de plus n'est requis pour la compatibilité Divi 5.

WPForms est-il gratuit pour Divi ?

WPForms Lite est entièrement gratuit et comprend le constructeur par glisser-déposer, le générateur de formulaires IA, les Choix IA, les paiements Stripe de base et une intégration complète du module Divi.

Vous pouvez créer et intégrer un formulaire de contact fonctionnel sans rien dépenser. Pour les fonctionnalités avancées telles que les téléchargements de fichiers, la logique conditionnelle, la gestion des entrées et les formulaires multipages, les plans payants commencent à 49,50 $/an.

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

WordPress s'appuie par défaut sur la fonction d'envoi d'e-mails intégrée à PHP, et de nombreux hébergeurs la bloquent, la limitent ou la routent via des serveurs qui finissent par déclencher les filtres anti-spam côté destinataire.

L'installation d'un plugin SMTP comme WP Mail SMTP résout ce problème en envoyant les e-mails de votre formulaire via un serveur de messagerie authentifié. Cela résout le problème pour le formulaire intégré de Divi et pour WPForms.

Ensuite, allez plus loin avec vos formulaires Divi

Maintenant que votre formulaire de contact Divi est en ligne, vous voudrez peut-être affiner son apparence sur votre site. Consultez notre guide sur comment styliser les formulaires de contact dans WordPress pour obtenir des conseils sur l'harmonisation du 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 apparaisse en superposition plutôt que sur une page dédiée, voici comment créer un popup de formulaire de contact dans WordPress. Cela permet de garder vos pages épurées tout en rendant le formulaire accessible depuis n'importe quelle page de votre site via un bouton ou un lien déclencheur.

Créez votre formulaire de contact Divi maintenant

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

Si cet article vous a aidé, suivez-nous sur Facebook et Twitter pour plus de tutoriels et de guides WordPress gratuits.