Voulez-vous créer un formulaire de contact Divi en utilisant WPForms ?
Le populaire constructeur Divi d'Elegant themes rend la création d'un site web super facile pour tout le monde.
Combinés à la puissance de WPForms, des sites web magnifiques et à fort taux de conversion sont créés par des personnes qui n'auraient jamais pensé être douées pour l'aspect technique d'une petite entreprise.
Dans cet article, nous avons décrit chaque étape à suivre pour créer un formulaire de contact Divi sur votre site WordPress (en utilisant WPForms).
Comment créer un formulaire de contact Divi
Le thème Divi a un module de formulaire intégré que vous pouvez utiliser pour collecter des adresses email, mais pour créer des formulaires vraiment professionnels que vous pouvez personnaliser, vous devez ajouter un formulaire de contact à votre site que vous avez construit avec WPForms.
Comme il s'agit d'une paire très populaire (Divi+WPForms), il y a même une intégration du module Divi avec WPForms.
Si vous vous demandez comment mettre en place un formulaire de contact dans Divi, ces étapes vous permettront d'y répondre :
Étape 1 : Installer le plugin WPForms
La première chose à faire est d'installer le plugin WPForms.
C'est assez facile, mais si vous avez besoin d'aide pour cette partie, consultez ce tutoriel sur l 'installation d'un plugin WordPress ou contactez-nous.
Une fois WPForms installé, cliquez sur le bouton d'activation.
Ensuite, vous allez créer votre formulaire.
Étape 2 : Créer votre formulaire de contact
Maintenant, créez un simple formulaire de contact WordPress afin d'avoir un formulaire à mettre sur votre page de contact avec Divi.
N'oubliez pas non plus, lorsque vous configurez les notifications de votre formulaire, que WordPress a la réputation d'envoyer des notifications qui ne sont jamais délivrées.
C'est pourquoi il est toujours préférable de résoudre ce problème pour votre site, alors consultez ce tutoriel sur la façon de résoudre le problème de Divi qui n'envoie pas d'email en utilisant le plugin WP Mail SMTP.
Vous vous demandez où va le formulaire de contact Divi ? Si vous utilisez une formule payante de WPForms, vos entrées sont stockées dans la base de données de WordPress.
Maintenant que votre formulaire est prêt, utilisons le Divi Builder pour l'intégrer à une page.
É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, il se peut qu'elle soit légèrement différente. Dans ce cas, il suffit de cliquer sur Use Divi Builder pour la lancer.
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
Avec Divi, vous pouvez créer une page à partir de zéro, choisir une mise en page prédéfinie ou cloner une page existante.
Pour ce tutoriel, nous allons construire notre page à partir de zéro.
Cliquez donc sur le bouton Commencer à construire pour ouvrir la page Divi.
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.
Vous verrez une fenêtre contextuelle qui vous demandera quel type de mise en page (utilisant des rangées) vous souhaitez ajouter à votre page Divi.
Pour cet article, choisissons le premier choix. Le formulaire de contact sera ainsi le seul "objet" à figurer dans cette rangée, de sorte qu'il retiendra l'attention et que les gens le rempliront.
Sélectionnez la première option (la ligne unique) pour vos lignes.
Maintenant, vous serez invité à insérer un module. Nous allons maintenant insérer notre superbe formulaire WPForms.
Étape 4 : Insérer le module Divi WPForms
Cette étape est d'autant plus facile que 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.
Une fois le module ajouté, les paramètres du module s'affichent.
Cette zone vous permet
- Sélectionnez le formulaire que vous souhaitez utiliser
- Activer les paramètres qui affichent le titre du formulaire
- Activer les paramètres permettant d'afficher la description du formulaire
Lorsque vous êtes prêt, choisissez votre formulaire dans le menu déroulant sous Formulaire.
Une fois que vous aurez sélectionné votre formulaire, il sera automatiquement intégré à cette page Divi.
C'est le moment de sauvegarder l'état d'avancement de votre formulaire en cliquant sur le bouton vert en forme de coche.
Et dans les onglets Design et Advanced de Divi, il y a beaucoup de personnalisations supplémentaires de Divi à explorer.
Étape 5 : Publier votre formulaire de contact Divi
Bon travail, votre formulaire de contact est intégré et prêt. Maintenant, vous pouvez le publier de la même manière que vous publiez n'importe quelle page dans Divi.
Cliquez sur les 3 points en bas du constructeur de pages pour afficher d'autres paramètres de Divi.
Ensuite, cliquez sur le bouton Publier pour le voir apparaître en direct.
C'est fait. Votre formulaire de contact Divi + WPForms est prêt à être utilisé.
Et si vous voulez rendre vos formulaires encore plus puissants, vous pouvez utiliser des fonctionnalités de construction de formulaires encore plus avancées avec WPForms Pro.
WPForms Pro est le constructeur de formulaires parfait pour les utilisateurs de Divi. Si vous utilisez WPForms Pro + Divi, vous aurez accès à des tonnes d'avantages comme :
- Utiliser des formulaires de commande et accepter des paiements par le biais de formulaires
- Accéder à la logique conditionnelle pour masquer ou afficher facilement les champs du formulaire
- Capturer plus de prospects grâce à l'abandon de formulaires
- Protégez votre liste d'adresses électroniques grâce à des options de protection contre le spam
- Connectez-vous à votre fournisseur de services de marketing par courriel
- Augmenter les conversions grâce à des pages d'atterrissage sans distraction
- Accéder à des centaines de modèles de formulaires prédéfinis
Créez votre formulaire de contact WPForms + Divi dès maintenant
Prochaines étapes pour les utilisateurs du formulaire de contact Divi
Et c'est tout. Nous espérons que cet article vous a aidé à apprendre exactement comment ajouter un formulaire de contact Divi avec WPForms sur votre site.
Ensuite, assurez-vous que votre site Divi utilise l'un des meilleurs fournisseurs d'hébergement qui soient.
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 offre une garantie de remboursement de 14 jours, il n'y a donc rien à perdre.
Et 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.
Ma première expérience de combinaison de WPForms avec Divi est décevante. Je ne peux pas modifier la taille ou la couleur du texte, je ne peux pas faire en sorte que les champs aient des coins arrondis, ni contrôler la couleur des champs. J'essaierai à nouveau demain, mais pour l'instant cela ne répond pas à mes attentes en matière de contrôle du design.
Bonjour Ed ! Je m'excuse pour tout malentendu. Le module Divi a pour but de s'assurer que les formulaires WPForms peuvent être intégrés dans les sites construits avec Divi sans problème. Il n'a pas la capacité d'autoriser les fonctionnalités de style de Divi à être appliquées aux formulaires intégrés.
Pour styliser vos formulaires, veuillez vous référer à notre guide ici : https://wpforms.com/docs/how-to-style-wpforms-with-custom-css-beginners-guide/
J'espère que cela vous aidera ! Si vous avez d'autres questions à ce sujet, veuillez nous contacter si vous avez un abonnement actif. Si ce n'est pas le cas, n'hésitez pas à nous poser des questions dans nos forums d'assistance.
Bonjour, je suis administrateur d'un site web caritatif et non l'hébergeur, mais j'ai des problèmes pour recevoir des emails vides de Contact Us de manière répétée chaque jour. Je sais que le thème WordPress est 'active DIVI' et l'email vide reçu s'affiche comme suit : Email enquiry from the Canal Trust Website :
Nom : %%Nom%%
Courriel : %%Email%%
Message : %%Message%%
Il s'agit des paramètres de configuration du formulaire.
Est-ce que notre site web est simplement attaqué par des BOTS ou est-ce qu'il y a quelque chose que je peux faire pour arrêter ces courriels nuisibles, s'il vous plaît ?
Votre aide et vos conseils sont très appréciés.
Julie K
https://.nwdct.org/contact-us/
Julie - Nous sommes désolés pour ce problème. Afin de répondre le plus précisément possible à votre question et d'éviter toute confusion, pourriez-vous contacter notre équipe ?
Si vous avez une licence WPForms, vous avez accès à notre support par email, veuillez donc soumettre un ticket de support. Sinon, nous fournissons un support limité et gratuit sur le forum WPForms Lite WordPress.org.
Merci.
Porque en mi Divi no aparece wpForms ? lo tengo instalado y no aparece.
faut-il payer pour l'acquérir ?
Hey Wac, - Nous sommes désolés pour ce problème. Afin de répondre le plus précisément possible à votre question et d'éviter toute confusion, pourriez-vous contacter notre équipe ?
Si vous avez une licence WPForms, vous avez accès à notre support par email, veuillez donc soumettre un ticket de support. Sinon, nous fournissons un support limité et gratuit sur le forum WPForms Lite WordPress.org.
Merci.
Bonjour, existe-t-il un moyen d'utiliser WP Forms dans un modèle de produit dans les thèmes où les gens peuvent demander plus d'informations sur un produit et où vous êtes notifié du produit sur lequel ils ont cliqué ? Pour l'instant, il suffit d'envoyer le même message depuis n'importe quel produit à partir duquel ils l'envoient ?
Merci beaucoup
Bonjour Vernon,
Nous ne disposons pas de la fonctionnalité exacte que vous recherchez. Mais en fonction des sélections effectuées dans le formulaire, vous pouvez tout à fait paramétrer les notifications de manière conditionnelle. Nous avons un excellent tutoriel sur la façon de configurer cela ici.
J'espère que cela vous aidera !