### [Ajouter WPForms à une fenêtre contextuelle Elementor](https://wpforms.com/docs/how-to-add-wpforms-to-an-elementor-popup/) **Publié le :** 23 novembre 2023 **Auteur :** Umair Majeed **Extrait :** Apprenez à ajouter des formulaires à vos fenêtres contextuelles Elementor. Nécessite Elementor Pro. **Contenu :** 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. **Prérequis :** Le constructeur de fenêtres contextuelles Elementor n'est disponible qu'avec [Elementor Pro](https://elementor.com/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](https://wpforms.com/docs/how-to-create-a-popup-form-with-wpforms/). --- Avant de commencer, assurez-vous d'[installer et d'activer WPForms](https://wpforms.com/docs/install-wpforms-plugin/) sur votre site WordPress et de [vérifier votre clé de licence](https://wpforms.com/docs/verify-wpforms-license/). ## 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 **Add New 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 **Create Template**. ## 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. Dans 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 **Edit the selected form** 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 apportées à votre formulaire. ### Créer un nouveau formulaire Si vous souhaitez [créer un nouveau formulaire](https://wpforms.com/docs/creating-first-form/) pour votre fenêtre contextuelle, cliquez sur le bouton **+ New Form** 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 **Edit the selected form** 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 [comment créer votre premier formulaire](https://wpforms.com/docs/creating-first-form/). Consultez également notre [modèle de formulaire Elementor multipage](https://wpforms.com/templates/elementor-multi-step-form-template/) si vous souhaitez utiliser un modèle de formulaire pré-construit. ### Personnaliser votre formulaire Une fois que vous avez ajouté un formulaire à votre fenêtre contextuelle, vous pouvez également ajuster son apparence pour qu'elle corresponde au style de votre site Web dans l'onglet **Style** du constructeur d'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](https://wpforms.com/docs/how-to-add-wpforms-to-an-elementor-page/#customize-form). ### Activer la soumission de formulaire AJAX Que vous ajoutiez un formulaire existant à votre fenêtre contextuelle ou que vous en créiez un nouveau, il est conseillé de vérifier que la [soumission de formulaire AJAX](https://wpforms.com/docs/how-to-enable-ajax-form-submissions/) est activée. Cela empêchera votre fenêtre contextuelle de se fermer après la soumission et de masquer le [message de confirmation](https://wpforms.com/docs/setup-form-confirmation-wpforms/) 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 **Edit the selected form** dans la barre latérale du constructeur de fenêtres contextuelles et en allant dans **Settings » General** dans le constructeur de formulaires. Ensuite, dans la section **Advanced**, assurez-vous que le paramètre **Enable AJAX Form Submission** est activé. Enregistrez vos modifications avant de fermer le constructeur de formulaires. ### Activer la prévention de fermeture sur superposition Après avoir choisi et intégré votre formulaire, vous devrez configurer une option pour votre fenêtre contextuelle afin d'empêcher la fermeture de votre formulaire s'il contient un champ de téléchargement de fichier ou de date/heure. Cliquez sur l'icône d'engrenage dans la barre de menu Elementor en bas pour ouvrir les paramètres de la fenêtre contextuelle. Dans l'onglet **Advanced**, activez l'option **Prevent Closing on Overlay**. Une fois que vous avez terminé la configuration de votre fenêtre contextuelle, cliquez sur le bouton **Publish** dans le coin inférieur gauche de l'écran. ## Configuration des paramètres de la fenêtre contextuelle Avant qu'Elementor ne publie votre fenêtre contextuelle, vous devrez configurer les paramètres de **Conditions**, **Triggers** et **Advanced Rules**. Ces options apparaîtront lorsque vous cliquerez sur le bouton **Publish** dans le constructeur de fenêtres contextuelles. Pour cet exemple, nous définirons les conditions pour afficher notre fenêtre contextuelle sur l'ensemble de notre site. Nous définirons également le déclencheur de la fenêtre contextuelle sur le paramètre **On Page Load**. Ainsi, nos utilisateurs verront notre fenêtre contextuelle 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 fenêtre contextuelle, cliquez sur le bouton **Save & Close**. **Remarque :** Si vous souhaitez en savoir plus sur la fonction de chaque paramètre de fenêtre contextuelle, consultez la [documentation complète d'Elementor](https://elementor.com/help/popups/). Votre fenêtre contextuelle sera alors publiée. Vous pouvez visiter le frontend de votre site pour la visualiser. Voilà ! Vous pouvez maintenant ajouter votre formulaire WordPress à une fenêtre contextuelle 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 [addon Form Abandonment](https://wpforms.com/docs/how-to-install-and-use-form-abandonment-with-wpforms/). **Catégories :** Extension, Extension de fonctionnalités ---