Comment ajouter un popup de formulaire de contact dans WordPress

Vous avez déjà regardé des visiteurs parcourir votre site, pour ensuite partir sans vous contacter ? C'est frustrant, surtout quand vous savez qu'ils sont intéressés mais que vous n'arrivez pas à établir le contact.

Une fenêtre contextuelle simple et bien placée peut faire toute la différence. 💡

Lorsqu'elle est placée judicieusement, elle met votre formulaire de contact là où les visiteurs en ont besoin. Cela peut entraîner plus de demandes, de commentaires et de conversions.

Chez WPBeginner, nous sommes de grands fans de WPForms car il est convivial pour les débutants, puissant et parfait pour créer toutes sortes de formulaires. Mieux encore, vous pouvez l'associer à OptinMonster pour créer une fenêtre contextuelle de formulaire de contact qui semble utile, pas intrusive.

Dans ce guide, nous vous expliquerons comment ajouter une fenêtre contextuelle de formulaire de contact dans WordPress. Une qui transforme les visiteurs en prospects, sans les agacer.

Pourquoi utiliser une fenêtre contextuelle de formulaire de contact ?

Une popup de formulaire de contact permet aux visiteurs de vous contacter plus facilement sans interrompre leur navigation ou la recherche de votre page de contact.

C'est important car chaque site WordPress a besoin d'un moyen simple pour les utilisateurs d'envoyer des questions, des commentaires ou des demandes de support. Mais lorsque votre formulaire de contact se trouve sur une seule page, de nombreux visiteurs peuvent ne jamais le trouver. Et cela conduit souvent à des prospects perdus.

Une popup de formulaire de contact résout ce problème en permettant aux visiteurs d'ouvrir le formulaire en un seul clic, depuis n'importe quelle page de votre site. Ils peuvent vous contacter immédiatement sans quitter la page qu'ils consultent actuellement.

Cela permet également de garder les gens sur votre site web au lieu de les envoyer ailleurs. Et en prime, vous pouvez utiliser ces popups pour collecter des adresses e-mail et développer votre liste d'e-mails.

Dans ce guide, nous vous montrerons comment créer un formulaire de contact et l'ajouter à une popup dans WordPress.

Nous partagerons également nos conseils d'experts pour créer une fenêtre contextuelle qui attire l'attention sans être intrusive. Cette approche garantit que votre site WordPress reste convivial tout en maximisant les opportunités d'interaction.

Et voici un aperçu rapide de toutes les étapes que vous suivrez :

Prêt ? Commençons.

Étape 1 : Créer un formulaire de contact WordPress

Tout d'abord, vous devrez sélectionner un plugin de formulaire de contact WordPress.

Il existe de nombreuses options gratuites et payantes, mais nous vous recommandons d'utiliser WPForms, car c'est le meilleur constructeur de formulaires WordPress du marché. Il est également le plus convivial pour les débutants, grâce à ses outils d'IA, son constructeur par glisser-déposer et ses modèles de formulaires préconçus.

Chez WPBeginner, nous l'utilisons nous-mêmes sur notre site Web pour afficher les formulaires de contact, les enquêtes annuelles auprès des utilisateurs et les formulaires de migration de site.

Pour plus de détails sur notre expérience avec le plugin, consultez notre avis complet sur WPForms.

Pour commencer, rendez-vous sur le site Web de WPForms et cliquez sur le bouton « Get WPForms Now ». Ensuite, suivez simplement les étapes pour créer votre compte et finaliser l'achat.

Après le paiement, vous arriverez sur votre tableau de bord de compte WPForms, où vous pourrez trouver la clé de licence du plugin.

À partir d'ici, accédez à WPForms » Ajouter nouveau depuis votre tableau de bord WordPress.

Sur l'écran suivant, utilisez la barre de recherche pour trouver rapidement le plugin WPForms.

Lorsqu'il apparaît dans les résultats de recherche, cliquez sur « Installer maintenant », puis sur « Activer ».

Si vous avez besoin d'aide, vous pouvez consulter notre guide étape par étape sur comment installer un plugin WordPress.

Si vous achetez WPForms Pro, vous devrez activer votre clé de licence. Allez dans WPForms » Paramètres, entrez votre clé dans le champ respectif et cliquez sur « Vérifier la clé ».

À partir de là, vous êtes prêt à créer votre formulaire de contact.

Accédez à WPForms » Ajouter nouveau depuis votre tableau de bord WordPress.

Sur l'écran suivant, vous pouvez entrer un nom de formulaire.

Ensuite, vous sélectionnerez comment vous allez construire votre formulaire – en utilisant WPForms AI, un modèle prédéfini, ou une toile vierge.

Si vous souhaitez utiliser le constructeur de formulaire IA, entrez simplement une invite. En quelques secondes, votre formulaire sera généré.

Cela dit, nous utiliserons le modèle « Formulaire de contact simple » pour ce tutoriel car il contient tout ce dont nous avons besoin.

Ensuite, vous pouvez ajouter des champs au formulaire en utilisant le constructeur par glisser-déposer.

Faites simplement glisser les champs que vous souhaitez ajouter au formulaire depuis les options proposées dans le menu de gauche. Vous pouvez également réorganiser les champs dans le formulaire.

WPForms vous permet également de personnaliser chaque champ du formulaire de contact.

Par exemple, si vous cliquez sur le champ « Nom », vous verrez des options pour changer son libellé et son format. Vous pouvez même ajouter une description ou marquer un champ comme obligatoire.

Pour des instructions étape par étape, consultez notre guide sur comment créer un formulaire de contact.

Une fois que vous avez terminé, cliquez sur l'option « Paramètres » pour configurer la notification et la confirmation du formulaire.

Dans la section « Général », vous pouvez renommer le formulaire, ajouter une description, modifier le texte du bouton de soumission, activer la protection anti-spam, et plus encore.

Ensuite, vous pouvez accéder à l'option de configuration « Notifications ». Par défaut, les notifications sont envoyées à l'e-mail administrateur configuré sur votre site WordPress.

Cependant, vous pouvez envoyer la notification de votre formulaire de contact à n'importe quelle adresse e-mail de votre choix. Si vous souhaitez recevoir des notifications d'envoi de formulaire à plusieurs e-mails, séparez chaque e-mail par une virgule.

Pour la ligne d'objet de l'e-mail, WPForms utilise le nom du formulaire que vous avez saisi précédemment. Cependant, vous pouvez modifier le texte de la ligne d'objet comme vous le souhaitez.

Passons maintenant à l'option « Confirmations ».

WPForms utilise « Message » comme type de confirmation par défaut. Cela affiche un message de remerciement immédiatement après la soumission du formulaire. En dehors de cela, vous verrez les options « Afficher la page » et « Aller à l'URL (Redirection) ».

Pour les popups, cependant, nous recommandons de conserver ce réglage « Message ». Rediriger les utilisateurs vers une page différente peut parfois sembler abrupt lorsqu'ils interagissent avec un popup.

Une fois que vous avez terminé de créer un formulaire de contact, assurez-vous de cliquer sur le bouton « Enregistrer » dans le coin supérieur droit pour sauvegarder vos modifications.

Ensuite, vous pouvez cliquer sur l'option « Intégrer » dans le coin supérieur, à côté du bouton « Enregistrer », pour obtenir le shortcode du formulaire. Vous aurez besoin de ces informations pour afficher votre formulaire dans une popup.

Lorsqu'un nouveau popup apparaît, vous pouvez sélectionner l'option « Utiliser un shortcode ».

WPForms affichera alors le shortcode de votre formulaire de contact dès que vous cliquerez sur le lien. Nous vous suggérons de laisser cet onglet ou cette fenêtre ouverts car vous aurez besoin du shortcode à l'étape suivante, où nous vous montrerons comment ajouter votre formulaire de contact dans un popup.

Étape 2 : Ajouter une fenêtre contextuelle de formulaire de contact à votre site WordPress

Pour créer une fenêtre contextuelle de formulaire de contact, vous aurez besoin d'un plugin de popup WordPress.

Nous recommandons d'utiliser OptinMonster, car c'est le meilleur plugin de génération de prospects et d'optimisation de conversion pour WordPress. C'est aussi l'un des plus populaires, avec plus de 1,2 million de sites web utilisant cet outil puissant.

Chez WPBeginner, nous utilisons OptinMonster pour diverses tâches, notamment la promotion d'offres spéciales et de bonnes affaires dans des popups, des slide-ins et des bannières d'en-tête. Si vous souhaitez plus d'informations, n'hésitez pas à lire notre avis complet sur OptinMonster.

Pour ce tutoriel, nous utiliserons la version Pro d'OptinMonster, qui comprend un modèle épuré et des règles d'affichage avancées pour afficher le popup.

Alors, inscrivons-nous en allant sur le site web d'OptinMonster. Visitez simplement le site et cliquez sur le bouton « Obtenir OptinMonster maintenant ».

Après l'inscription, vous arriverez sur le tableau de bord de votre compte OptinMonster. Laissez cet onglet ouvert, car nous allons connecter votre compte à WordPress dans un instant.

Ensuite, vous devez installer et activer le plugin OptinMonster gratuit sur votre site web. Ce plugin sert de connecteur entre votre site web et votre compte OptinMonster.

Dans votre tableau de bord WordPress, allez dans Plugins » Ajouter un plugin.

Sur l'écran suivant, utilisez la barre de recherche pour trouver ‘OptinMonster’.

Ensuite, cliquez sur ‘Installer maintenant’ puis sur ‘Activer’ pour l'activer correctement.

Pour plus de détails, vous pouvez suivre notre guide sur comment installer un plugin WordPress.

Une fois le plugin activé, vous verrez l'assistant de configuration.

Cliquez sur le bouton « Connecter votre compte existant ».

Une fenêtre contextuelle apparaîtra maintenant, et OptinMonster vous demandera de vous connecter à votre compte.

Cliquez simplement sur le bouton « Se connecter à WordPress ».

Maintenant que votre compte est connecté, la prochaine étape consiste à créer une nouvelle campagne pour votre fenêtre contextuelle de formulaire de contact.

Vous pouvez commencer par aller dans OptinMonster » Campagnes, puis cliquer sur le bouton « Créer votre première campagne ».

Sur l'écran suivant, vous devrez sélectionner un type de campagne.

Comme nous allons créer une fenêtre contextuelle de formulaire de contact, sélectionnez « Popup » comme type de campagne.

Après cela, faites défiler la page pour choisir un modèle.

OptinMonster propose plus de 75 designs attrayants et très performants pour vos popups. Vous pouvez sélectionner le modèle de votre choix.

Une fois que vous avez choisi le modèle, entrez simplement un nom pour votre campagne et cliquez sur le bouton « Commencer la création ».

Désormais, à l'aide de l'éditeur par glisser-déposer d'OptinMonster, vous pouvez modifier votre modèle de popup.

Vous verrez différents blocs apparaître dans le menu de gauche. Localisez le bloc ‘WPForms’, puis faites-le glisser et déposez-le sur votre modèle.

Après cela, cliquez sur le menu déroulant ‘Sélection du formulaire’ dans les paramètres du bloc à gauche.

Choisissez simplement le formulaire de contact que vous avez créé précédemment dans la liste. Si vous ne voyez pas votre formulaire listé, vous pouvez sélectionner ‘Ajouter un shortcode manuellement’ et coller le shortcode que vous avez copié à l'Étape 1.

Allez-y et entrez le shortcode de votre formulaire de contact WPForms dans le bloc. Si vous avez perdu votre shortcode, vous pouvez retourner à votre page de paramètres d'intégration WPForms et copier le shortcode.

Il est important de noter que vous ne verrez pas d'aperçu du formulaire de contact dans le modèle lorsque vous ajoutez le shortcode. C'est normal, car votre formulaire de contact apparaîtra lorsque la campagne sera publiée.

Ensuite, vous pouvez aller dans l'onglet « Règles d'affichage » en haut pour choisir quand la popup doit apparaître sur votre site web.

Par défaut, OptinMonster le réglera sur 5 secondes après l'arrivée sur la page, et la popup apparaîtra sur n'importe quelle page. Cependant, vous pouvez modifier les paramètres des règles d'affichage et sélectionner différents déclencheurs et options de ciblage.

Nous recommandons d'utiliser le ciblage MonsterLink (Au clic). Cela déclenche la fenêtre contextuelle uniquement lorsqu'un utilisateur clique sur un lien ou un bouton spécifique. Cela donne le contrôle au visiteur et est beaucoup moins intrusif qu'une fenêtre contextuelle qui s'ouvre automatiquement.

Ensuite, vous pouvez cliquer sur le bouton « Copier le code MonsterLink » et l'ajouter à n'importe quel texte, image ou bouton de votre site web.

Pour plus de détails, vous pouvez suivre notre guide pour débutants sur la façon d'ajouter un lien dans WordPress.

Votre code MonsterLink ressemblera à ceci en HTML :

<a href="https://app.monstercampaigns.com/c/ep6f5qtakxauowbj8097/" target="_blank" rel="noopener noreferrer">Subscribe Now!</a>

Vous n'avez pas besoin du code HTML complet – vous avez seulement besoin de l'URL. Vous pouvez donc copier le texte du lien qui commence par https://.

Voici à quoi devrait ressembler l'URL :

https://app.monstercampaigns.com/c/ep6f5qtakxauowbj8097/

Par exemple, disons que vous voulez ajouter un bouton « Contactez-nous » sur votre site.

Dans ce cas, vous pouvez commencer par modifier n'importe quelle page ou publication et accéder à votre éditeur WordPress. Ensuite, vous devrez cliquer sur le signe (+) en haut et ajouter un bloc « Boutons ».

Après cela, vous pouvez saisir le texte de votre bouton et cliquer sur l'icône de lien. Par exemple, nous utilisons « Contactez-nous » comme texte du bouton.

Maintenant, ajoutons l'URL MonsterLink. Cliquez sur le bloc du bouton pour le sélectionner, puis cliquez sur l'icône Lien dans la barre d'outils. Collez simplement l'URL que vous avez copiée précédemment et appuyez sur « Entrée ».

Une fois que vous avez fait cela, publiez votre article ou page WordPress. Le MonsterLink sera maintenant ajouté à votre bouton « Contactez-nous ».

Revenons maintenant à votre campagne OptinMonster pour terminer la configuration.

Après avoir sélectionné MonsterLink comme cible et l'avoir affiché sur n'importe quelle page, vous pouvez cliquer sur le bouton « Suivant » en bas.

Sur l'écran suivant, vous verrez des options pour modifier le type de vue de la campagne, ajouter une animation MonsterEffect et jouer un son lorsque la fenêtre contextuelle apparaît.

N'hésitez pas à expérimenter avec différents paramètres d'animation et de son. Lorsque vous avez terminé, cliquez sur le bouton « Étape suivante ».

OptinMonster affichera alors un résumé de vos paramètres de « Règle d'affichage ».

Cela permet de s'assurer que vous avez correctement configuré quand vos campagnes apparaîtront sur votre site Web.

Maintenant, vous êtes prêt à lancer votre campagne et à publier votre fenêtre contextuelle de formulaire de contact.

Pour ce faire, allez dans l'onglet « Publier » en haut. Cliquez ensuite sur le bouton « Aperçu » pour voir à quoi ressemble votre popup avant sa mise en ligne.

Lorsque vous êtes satisfait de l'apparence de votre campagne, changez le « Statut de publication » de « Brouillon » à « Publier ».

Une fois terminé, vous pouvez quitter le constructeur de campagnes OptinMonster et vérifier le statut de votre campagne depuis votre tableau de bord WordPress.

Accédez à OptinMonster » Campagnes et cliquez sur le menu déroulant « Statut ». Vous pouvez ensuite le changer de « En attente » à « Publier ».

OptinMonster mettra automatiquement à jour les modifications.

Ensuite, vous devrez accéder à l'endroit où vous affichez le bouton « Contactez-nous » avec l'intégration MonsterLink et voir le formulaire de contact apparaître en action.

Et voilà !

Vous avez créé avec succès un popup de formulaire de contact dans WordPress. Mieux encore, vous l'avez fait d'une manière qui rend votre formulaire de contact facile d'accès sans être intrusif.

Conseils bonus pour augmenter vos inscriptions par popup

Maintenant que vous savez comment créer un formulaire de contact popup, la prochaine étape consiste à vous assurer qu'il améliore l'expérience utilisateur au lieu de faire en sorte que les visiteurs rebondissent de votre site.

Pour maximiser les inscriptions, vous devriez vous concentrer sur la création de popups utiles et pertinents plutôt que sur des popups intrusifs :

En combinant ces stratégies, vous pouvez créer des pop-ups qui attirent l'attention, établissent un lien avec votre public et incitent à l'action sans paraître insistants.

Pour plus de détails et d'exemples, vous pouvez consulter notre guide sur comment utiliser la psychologie des pop-ups pour augmenter les inscriptions de 250%.

FAQ : Comment ajouter une fenêtre contextuelle de formulaire de contact dans WordPress

Vous avez des questions sur les popups de formulaire de contact ? Voici des réponses rapides pour vous aider à les configurer correctement.

Comment m'assurer que mon popup de formulaire de contact n'est pas agaçant ?

Tout est une question de timing et de contexte. Pour éviter de frustrer les visiteurs, affichez les popups en fonction de leur comportement, par exemple après quelques secondes sur la page ou lorsqu'ils font défiler vers le bas. Des outils comme OptinMonster vous permettent d'affiner ces réglages afin que votre popup soit utile et non intrusive.

Puis-je utiliser un popup de formulaire de contact pour les visiteurs mobiles ?

Oui, mais soyez attentif à l'espace de l'écran. WPForms et OptinMonster sont adaptés aux mobiles, ce qui signifie que vos popups s'adapteront aux écrans plus petits. Assurez-vous simplement que le design est épuré et facile à fermer sur les appareils mobiles.

Comment puis-je suivre les performances de mes popups de formulaire de contact ?

Vous pouvez utiliser MonsterInsights pour suivre les métriques importantes de vos formulaires comme les vues, les clics et les conversions, le tout depuis votre tableau de bord WordPress. Cela vous aide à comprendre ce qui fonctionne et où vous pouvez vous améliorer.

Un popup de formulaire de contact ralentira-t-il mon site ?

Pas s'il est construit et configuré correctement. Des outils légers comme WPForms et OptinMonster sont optimisés pour la performance, ils ne ralentiront donc pas visiblement votre site lorsqu'ils sont utilisés correctement.

Tutoriel vidéo

Avant de partir, nous avons préparé un tutoriel vidéo sur l'ajout d'un popup de formulaire de contact à votre site WordPress. Assurez-vous de le regarder !

Explorez nos guides sur les formulaires WordPress

Nous espérons que cet article vous a aidé à apprendre comment ajouter un pop-up de formulaire de contact dans WordPress.

Ensuite, vous voudrez peut-être aussi consulter nos guides sur :

• Comment utiliser les formulaires de contact pour développer votre liste d'e-mails dans WordPress
• Comment envoyer des e-mails de confirmation après la soumission de formulaires WordPress
• Comment suivre et réduire l'abandon de formulaire
• Le formulaire WordPress ne fonctionne pas : conseils de dépannage
• Le guide ultime pour utiliser les formulaires WordPress

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.