Comment créer un formulaire de contact WordPress Popup (ouvrir le formulaire de contact dans un popup)

Vous cherchez un moyen d’ouvrir un formulaire de contact dans une fenêtre contextuelle sur votre site WordPress ? Dans cet article, je vais vous montrer plusieurs façons de créer un formulaire de contact contextuel WordPress à l’aide de plugins.

Vous pouvez demander aux utilisateurs de cliquer sur un bouton qui ouvre le formulaire de contact dans une fenêtre contextuelle. Ou, vous pouvez simplement déclencher automatiquement le formulaire de contact en fonction de différentes conditions.

Tout d’abord, je vais vous montrer comment le faire à l’aide d’un 100% libre combinaison d’un plug-in contextuel et un plug-in de formulaire. Ensuite, je vous montrerai également comment vous pouvez le faire en utilisant un seul plugin avec la version payante d’Elementor (Élémentor Pro).

Donc – deux méthodes pour ouvrir un formulaire de contact dans une popup sur WordPress, à partir de maintenant…

Comment créer un formulaire de contact WordPress Popup gratuitement

Voici un exemple de ce que vous allez créer avec cette méthode :

Après vous avoir montré comment ouvrir la fenêtre contextuelle après que le visiteur a cliqué sur un bouton, je partagerai également quelques façons de lancer automatiquement la fenêtre contextuelle.

Pour réaliser cette fonctionnalité, vous aurez besoin de deux plugins gratuits :

• Créateur de fenêtres contextuelles – ce plugin est ce qui vous permet de créer le popup qui héberge votre formulaire de contact et de déclencher ce popup lorsqu’un utilisateur clique sur un bouton.
• WPForms (ou votre plugin de formulaire de contact préféré) – pour ce tutoriel, j’utiliserai WPForms pour créer le formulaire de contact qui va à l’intérieur du popup. Cependant, vous devriez pouvoir utiliser n’importe quel plug-in de formulaire de contact qui vous permet d’intégrer des formulaires via un shortcode.

Allez-y, installez et activez les deux plugins. Ensuite, voici comment tout mettre en place…

Étape 1 : Créez votre formulaire de contact

Pour commencer, créez le formulaire de contact que vous souhaitez inclure dans votre popup en utilisant votre plugin de formulaire de contact préféré.

Si vous utilisez WPForms pour cela, vous pouvez vous rendre sur WPForms → Ajouter nouveau pour créer votre formulaire de contact. Notre revue WPForms vous montrera comment utiliser le plugin pour créer un formulaire si vous avez besoin d’un peu d’aide.

Une fois que vous avez terminé avec votre formulaire, cliquez sur le Intégrer et copiez le shortcode d’intégration du formulaire car vous en aurez besoin à l’étape suivante :

Étape 2 : Créez votre popup

Une fois que vous avez terminé votre formulaire, vous êtes prêt à créer la fenêtre contextuelle qui hébergera réellement ce formulaire.

Pour ce faire, rendez-vous sur Créateur de popup → Ajouter un popup.

Ensuite, collez le code d’intégration de votre formulaire de contact dans le corps de l’éditeur de texte :

Vous pouvez également ajouter du texte autour de votre formulaire de contact si vous le souhaitez. Et plus bas dans l’interface, vous pouvez utiliser le Affichage et proche onglets pour personnaliser l’apparence de votre popup :

Cependant, le seul absolu L’exigence ici est que vous ajoutiez le code d’intégration de votre formulaire dans l’éditeur de texte. La modification de tout autre paramètre est facultative.

Lorsque vous avez terminé, assurez-vous de Publier votre pop-up.

Étape 3 : Créer un bouton pour ouvrir une fenêtre contextuelle

Pour finir, vous devez créer le bouton sur lequel les visiteurs cliqueront pour ouvrir la fenêtre contextuelle avec le formulaire de contact.

Pour que le bouton ouvre le formulaire de contact, vous devrez ajouter une classe CSS très spécifique.

Voici un exemple de bouton HTML :

<button class="popmake-contact-form">Get In Touch!</button>

Pour trouver cette classe CSS – popmake-contact-form dans mon exemple – aller à Créateur de Popups → Tous les Popups et regarde le Classes CSS colonne:

Ensuite, accédez à la publication ou à la page où vous souhaitez ajouter le bouton.

Si vous êtes en utilisant le nouvel éditeur de blocs Gutenbergvous pouvez ajouter le code HTML dans un HTML personnalisé bloquer. Ou, si vous êtes à l’aide de l’éditeur classiquevous pouvez utiliser le Texte languette:

Et c’est tout! Une fois la page publiée, vos visiteurs pourront cliquer sur le bouton pour ouvrir le formulaire de contact :

Comment ouvrir une fenêtre contextuelle automatiquement (au lieu de cliquer sur un bouton)

Si vous souhaitez ouvrir automatiquement la fenêtre contextuelle de votre formulaire de contact au lieu que les visiteurs cliquent sur un bouton ou un lien, vous pouvez utiliser le Déclencheurs onglet lors de la modification de la fenêtre contextuelle.

Par exemple, vous pouvez ajouter un déclencheur pour ouvrir automatiquement la popup après X secondes :

La version premium du plugin Popup Maker comprend plus d’options de déclenchement, comme le déclenchement d’une fenêtre contextuelle en fonction de la distance parcourue par un visiteur sur la page.

Comment ouvrir un formulaire de contact dans une fenêtre contextuelle sur WordPress avec Elementor Pro

Voici un exemple de ce que vous allez créer avec cette méthode :

Élémentaire est populaire plug-in de création de pages qui vous permet de créer votre contenu à l’aide d’un éditeur visuel par glisser-déposer. Nous l’utilisons ici chez WPLift et l’ont évalué favorablement. Avec la dernière version d’Elementor Pro, vous pouvez désormais utiliser cette même interface pour créer tout type de popup, y compris un popup qui affiche un formulaire de contact.

Elementor Pro coûte 49 $, mais le résultat de l’utilisation de cette méthode est que vous aurez beaucoup plus de flexibilité quant à l’apparence et au fonctionnement de votre popup et de votre formulaire.

Voici comment utiliser cette fonctionnalité dans Elementor Pro.

Étape 1 : Créez votre popup

Une fois que vous avez installé et activé Elementor et Élémentor Provous pouvez commencer en accédant à Modèles → Popups → Ajouter nouveauApparaitre:

Ensuite, donnez un nom à votre popup et cliquez sur Créer un modèle:

Cela ouvrira un ensemble de modèles de popup prédéfinis.

Vous pouvez trouver ici plusieurs modèles de formulaire de contact prédéfinis, qui, je pense, sont les…