Résumé IA
Souhaitez-vous ajouter vos formulaires WordPress à une fenêtre contextuelle Elementor ? Si vous utilisez déjà Elementor Pro sur votre site, vous voudrez peut-être utiliser son outil de fenêtre contextuelle intégré pour afficher un formulaire.
Ce tutoriel vous montrera comment configurer et utiliser une fenêtre contextuelle Elementor avec WPForms.
Dans cet article
Prérequis : Le constructeur de fenêtres contextuelles Elementor n'est disponible qu'avec Elementor Pro.
Si vous n'avez pas Elementor Pro mais souhaitez tout de même créer un formulaire contextuel, consultez notre guide sur la création d'un formulaire de contact contextuel.
Avant de commencer, assurez-vous d'installer et d'activer WPForms sur votre site WordPress et de vérifier votre clé de licence.
Créer une fenêtre contextuelle
Pour créer une nouvelle fenêtre contextuelle avec Elementor, vous devrez aller dans Templates » Popups dans la barre latérale de votre zone d'administration WordPress. Cliquez ensuite sur le bouton vert Ajouter une nouvelle popup.
Cela ouvrira une superposition qui vous permettra de nommer votre fenêtre contextuelle. Pour notre exemple, nous nommerons notre modèle Contactez-nous.
Cliquez ensuite sur le bouton vert Créer un modèle.
Intégrer votre formulaire
Ensuite, vous verrez une autre superposition avec la bibliothèque de modèles d'Elementor, où vous pourrez choisir un modèle prédéfini pour votre fenêtre contextuelle.
Pour cet exemple, nous cliquerons sur le bouton X pour quitter la bibliothèque de modèles et construire manuellement notre fenêtre contextuelle à partir de zéro.
Depuis le constructeur de modèles principal, recherchez les widgets dans la barre latérale gauche pour le widget WPForms. Cliquez ensuite et faites-le glisser dans le constructeur.
Une fois que vous avez ajouté le widget WPForms à votre fenêtre contextuelle, vous pouvez y intégrer un formulaire existant ou en créer un nouveau.
Intégrer un formulaire existant
Dans le widget WPForms Elementor, vous verrez un menu déroulant où vous pourrez sélectionner le nom du formulaire existant que vous souhaitez intégrer.
Si vous souhaitez apporter des modifications à ce formulaire, vous pouvez le faire directement depuis le constructeur de fenêtres contextuelles en cliquant sur le lien Modifier le formulaire sélectionné dans la barre latérale.
Cela ouvrira une fenêtre contextuelle avec le constructeur de formulaires WPForms afin que vous puissiez modifier et enregistrer les modifications de votre formulaire.
Créer un nouveau formulaire
Si vous souhaitez créer un nouveau formulaire pour votre fenêtre contextuelle, cliquez sur le bouton + Nouveau formulaire dans le panneau de gauche.
Cela ouvrira une fenêtre contextuelle avec le constructeur de formulaires WPForms, où vous pourrez nommer votre formulaire, sélectionner un modèle et commencer à le personnaliser.
Assurez-vous d'enregistrer votre formulaire avant de fermer le constructeur. Si vous décidez de revenir en arrière et d'apporter des modifications à votre nouveau formulaire, cliquez sur le lien Modifier le formulaire sélectionné dans la barre latérale gauche pour rouvrir le constructeur de formulaires.
Remarque : Si vous avez besoin d'aide pour créer votre formulaire, consultez notre guide sur la création de votre premier formulaire. Consultez également notre modèle de formulaire Elementor multipage si vous souhaitez utiliser un modèle de formulaire pré-construit.
Personnaliser votre formulaire
Une fois que vous avez ajouté un formulaire à votre popup, vous pouvez également en ajuster l'apparence pour qu'elle corresponde au style de votre site web dans l'onglet Style du constructeur Elementor.
L'onglet Style vous permet d'ajuster le style des champs de formulaire, des étiquettes et des boutons sans avoir besoin de connaissances en CSS.
Pour en savoir plus, consultez notre guide sur la personnalisation de vos formulaires.
Activer la soumission de formulaire AJAX
Que vous ajoutiez un formulaire existant à votre popup ou que vous en créiez un nouveau, il est conseillé de vérifier que la soumission de formulaire AJAX est activée. Cela empêchera votre popup de se fermer après la soumission et de masquer le message de confirmation du formulaire.
La soumission AJAX est activée par défaut pour tous les nouveaux formulaires. Cependant, vous pouvez vérifier que cette option est activée en cliquant sur le lien Modifier le formulaire sélectionné dans la barre latérale du constructeur de popup et en accédant à Paramètres » Général dans le constructeur de formulaire.
Ensuite, dans la section Avancé, assurez-vous que le paramètre Activer la soumission de formulaire AJAX est activé.
Enregistrez vos modifications avant de fermer le constructeur de formulaire.
Activer la prévention de fermeture sur superposition
Après avoir choisi et intégré votre formulaire, vous devrez configurer une option pour votre popup afin d'empêcher la fermeture du formulaire s'il inclut un champ de téléchargement de fichier ou de date/heure.
Cliquez sur l'icône d'engrenage dans la barre de menu inférieure d'Elementor pour ouvrir les paramètres de la popup. Dans l'onglet Avancé, activez l'option Empêcher la fermeture sur le chevauchement.
Une fois que vous avez terminé la configuration de votre popup, cliquez sur le bouton Publier dans le coin inférieur gauche de l'écran.
Configurer les paramètres de la fenêtre contextuelle
Avant qu'Elementor ne publie votre popup, vous devrez configurer les paramètres pour les Conditions, les Déclencheurs et les Règles avancées. Ces options apparaîtront lorsque vous cliquerez sur le bouton Publier dans le constructeur de popup.
Pour cet exemple, nous définirons les conditions pour afficher notre popup sur l'ensemble de notre site.
Nous définirons également le déclencheur de la popup sur le paramètre Au chargement de la page.
De cette façon, nos utilisateurs verront notre popup quelle que soit la page qu'ils visitent, dès son chargement.
Nous n'ajouterons aucune règle avancée à notre exemple. Une fois que vous avez terminé la configuration des paramètres de votre popup, cliquez sur le bouton Enregistrer et fermer .
Remarque : Si vous souhaitez en savoir plus sur la fonction de chaque paramètre de popup, consultez la documentation complète d'Elementor.
Votre popup sera alors publiée. Vous pouvez visiter le frontend de votre site pour la visualiser.
Et voilà ! Vous pouvez maintenant ajouter votre formulaire WordPress à une popup Elementor.
Ensuite, souhaitez-vous apprendre à capturer des prospects, même lorsque les utilisateurs ne terminent pas complètement vos formulaires ? Assurez-vous de consulter notre guide sur notre module complémentaire Abandon de formulaire.