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 fenêtre contextuelle de formulaire de contact permet aux visiteurs de vous contacter plus facilement, sans avoir à chercher votre page de contact ou à quitter la page sur laquelle ils se trouvent.

Chaque site Web WordPress a besoin d'un formulaire de contact pour que les utilisateurs puissent soumettre des questions, des commentaires ou des problèmes.

Cependant, si votre formulaire de contact n'est que sur une seule page, il est difficile pour les gens de le trouver. Par conséquent, vos utilisateurs peuvent finir par quitter votre site avant de vous contacter, et vous pourriez perdre des prospects et des conversions potentiels.

Une fenêtre contextuelle de formulaire de contact aide à résoudre ce problème en permettant à vos visiteurs de visualiser rapidement le formulaire en cliquant sur un bouton. De cette façon, ils peuvent vous contacter depuis n'importe quelle page sur laquelle ils se trouvent.

Ce type de formulaire de contact aide également à retenir les visiteurs sur votre site web, car ils n'ont pas besoin de quitter la page qu'ils consultent. De plus, vous pouvez développer votre liste d'e-mails à l'aide d'une fenêtre contextuelle de formulaire de contact.

Cela dit, vous devrez d'abord créer un formulaire de contact et l'afficher dans une fenêtre contextuelle sur vos pages web.

Mais ne vous inquiétez pas. Dans les sections suivantes, nous vous guiderons dans la création d'un formulaire de contact et son ajout à une fenêtre contextuelle 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 :

1. Étape 1 : Créer un formulaire de contact WordPress
2. Étape 2 : Ajouter une fenêtre contextuelle de formulaire de contact à votre site WordPress
3. Astuce bonus : Augmentez vos inscriptions via fenêtre contextuelle
4. FAQ : Comment ajouter une fenêtre contextuelle de formulaire de contact dans WordPress
5. Tutoriel vidéo
6. Explorez nos guides sur les formulaires WordPress

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 parmi lesquelles vous pouvez choisir, mais nous vous recommandons d'utiliser WPForms, car c'est le meilleur constructeur de formulaires pour les débutants.

Nous l'utilisons nous-mêmes sur notre site web pour afficher des formulaires de contact, des enquêtes annuelles auprès des utilisateurs et des formulaires de migration de site. Pour plus de détails sur notre expérience avec le plugin, consultez notre avis complet sur WPForms.

WPForms est un plugin de formulaire convivial pour les débutants qui offre un constructeur par glisser-déposer pour créer des formulaires de contact dans WordPress en quelques clics. Il propose également des modèles de formulaires préconçus et de nombreuses options de personnalisation.

Pour ce tutoriel, nous utiliserons la version WPForms Lite, qui est gratuite et propose un modèle de formulaire de contact.

Cependant, vous pouvez également utiliser sa version premium pour débloquer plus de fonctionnalités. Par exemple, WPForms Pro offre plus de 2 000 modèles de formulaires, plus d'options de personnalisation, des modules complémentaires puissants et la possibilité de collecter des paiements en ligne sans frais de transaction supplémentaires.

Pour commencer, vous devrez d'abord installer et activer le plugin WPForms Lite. Si vous avez besoin d'aide, vous pouvez consulter notre guide étape par étape sur comment installer un plugin WordPress.

Une fois le plugin actif, vous êtes prêt à créer votre formulaire de contact. Il vous suffit d'aller dans WPForms » Ajouter nouveau depuis votre tableau de bord WordPress.

Sur l'écran suivant, vous pouvez entrer un nom pour le 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 la position de chaque champ 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 obtiendrez différentes options, comme la modification de son libellé et de son format. Vous pouvez même ajouter une description ou marquer un champ comme obligatoire.

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, modifier le texte du bouton d'envoi, 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 utilisera « Message » comme type de confirmation par défaut. Après la soumission d'un formulaire, cela affichera un message de remerciement à vos visiteurs.

Cependant, vous pouvez changer le type de message et rediriger les utilisateurs vers une page spécifique de votre site lorsqu'ils complètent un formulaire.

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'une nouvelle 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 garder cet onglet/cette fenêtre ouverts, car vous en aurez besoin à l'étape suivante, où nous vous montrerons comment ajouter votre formulaire de contact dans une fenêtre contextuelle.

É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 inclut un modèle épuré et des règles d'affichage avancées pour afficher la fenêtre contextuelle.

Tout d'abord, inscrivons-nous pour un compte en allant sur le site Web d'OptinMonster. Visitez simplement le site Web et cliquez sur le bouton « Obtenir OptinMonster maintenant ».

Ensuite, vous devrez installer et activer le plugin gratuit OptinMonster sur votre site Web. Pour plus de détails, vous pouvez suivre notre guide sur comment installer un plugin WordPress.

Une fois le plugin actif, 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. Localisons le bloc « WPForms », puis faisons-le glisser sur votre modèle.

Après cela, vous devrez cliquer sur le menu déroulant « Sélection du formulaire » dans les paramètres du bloc du menu de gauche.

Ensuite, sélectionnez l'option « Ajouter un shortcode manuellement ».

À partir de là, vous pouvez entrer le shortcode de votre formulaire de contact WPForms dans le bloc. Pour trouver le code, retournez aux paramètres d'intégration de WPForms et copiez 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 suggérons d'utiliser le ciblage MonsterLink (Au clic). De cette façon, votre popup apparaîtra lorsqu'un visiteur cliquera sur un lien ou un bouton.

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> 

Cependant, pour intégrer le lien dans votre article ou page WordPress, vous avez juste besoin de l'URL du code.

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 un texte pour votre bouton et cliquer sur l'icône de lien. Par exemple, nous utilisons « Contactez-nous » comme texte du bouton.

Il est maintenant temps d'ajouter l'URL MonsterLink à votre bouton. Cliquez sur le bouton, puis sur le bouton d'insertion de lien, et collez l'URL.

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.

Vous pouvez faire preuve de créativité et expérimenter différents réglages. Lorsque vous êtes satisfait de la configuration, cliquez sur le bouton « Suivant ».

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.

Vous êtes maintenant prêt à lancer votre campagne et à publier votre fenêtre contextuelle de formulaire de contact. Pour ce faire, vous devrez aller dans l'onglet « Publier » en haut.

Ensuite, vous pouvez cliquer sur le bouton « Aperçu » avant de publier votre campagne. Cela vous montrera un aperçu en direct de l'apparence de votre fenêtre contextuelle sur votre site Web.

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.

Pour ce faire, vous devrez naviguer vers OptinMonster » Campagnes. À partir de là, cliquez simplement sur le menu déroulant « Statut » et changez-le 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 plugin de formulaire de contact dans WordPress. De plus, vous l'avez fait en veillant à ce que le formulaire ne soit pas intrusif.

Astuce bonus : Augmentez vos inscriptions via fenêtre contextuelle

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.

Premièrement, le timing est essentiel. Les popups qui apparaissent trop tôt peuvent frustrer les utilisateurs, alors essayez de les afficher après qu'un visiteur a fait défiler ou a passé un certain temps sur votre site.

La personnalisation est un autre facteur décisif. Pour que vos popups semblent plus pertinents, vous devriez les adapter à ce que font les utilisateurs, comme offrir une réduction sur un produit qu'ils consultent.

Pour encourager une action rapide, créez un sentiment d'urgence avec des phrases comme « Offre à durée limitée » ou exploitez la peur de manquer quelque chose (FOMO) en soulignant ce qu'ils pourraient gagner en agissant maintenant.

L'ajout de preuve sociale, comme des avis ou des statistiques, peut également renforcer la confiance et rendre vos popups plus convaincants. N'oubliez pas le rôle de la couleur : des teintes audacieuses peuvent attirer l'attention, tandis que des tons plus doux renforcent la confiance et l'harmonie.

En combinant ces stratégies, vous pouvez créer des popups qui attirent l'attention, établissent un lien avec votre public et incitent à l'action sans paraître insistants. Pour plus d'informations sur ce sujet, vous pouvez consulter notre guide sur comment utiliser la psychologie des popups 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 popup 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 créer un formulaire de contact avec plusieurs destinataires
• 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.