Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coupe WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Comment ajouter une fenêtre surgissante de formulaire de contact dans WordPress

Note éditoriale : Nous percevons une commission sur les liens des partenaires sur WPBeginner. Les commissions n'affectent pas les opinions ou les évaluations de nos rédacteurs. En savoir plus sur Processus éditorial.

Les formulaires de contact sont essentiels pour communiquer avec les internautes sur votre site. En les plaçant dans une fenêtre surgissante, vous permettez aux clients/clientes potentiels de vous contacter plus facilement au sujet de vos produits et services.

Lorsque le formulaire de contact est facilement accessible et facile à utiliser, les internautes sont plus enclins à le remplir. Cela peut conduire à davantage de demandes de renseignements, de retours et de conversions potentielles.

Cependant, les fenêtres surgissantes peuvent être intrusives si elles ne sont pas utilisées à bon escient. Les utilisateurs/utilisatrices peuvent être frustrés s’ils en abusent ou s’ils les affichent au mauvais moment. Il est donc important de trouver le bon équilibre pour que votre formulaire de contact pop-up soit utile et non dérangeant.

Dans cet article, nous vous guiderons à travers les étapes sur la façon d’ajouter un formulaire de contact popup dans WordPress.

Nous partagerons également nos astuces d’experts sur la façon de créer une fenêtre surgissante qui attire l’attention sans être intrusive. Cette approche permet de s’assurer que votre site WordPress reste simple/simple d’utilisation tout en maximisant les opportunités d’interaction.

How to add a contact form popup in WordPress

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

Tout site ou blog WordPress a besoin d’un formulaire de contact pour que les utilisateurs/utilisatrices puissent envoyer leurs questions, leurs commentaires ou leurs problèmes.

Cependant, si votre formulaire de contact se trouve uniquement sur une seule page, les internautes auront du mal à le trouver. Par conséquent, vos utilisateurs/utilisatrices peuvent finir par quitter votre site avant de vous contacter, et vous risquez de perdre des prospects et des conversions potentiels.

Une fenêtre surgissante de formulaire de contact aide à résoudre ce problème en permettant à vos internautes d’afficher rapidement le formulaire en cliquant sur un bouton. Ils peuvent ainsi prendre contact avec vous quelle que soit la page sur laquelle ils se trouvent.

Ce type de formulaire de contact aide également les internautes à rester sur votre site, car ils n’ont pas besoin de quitter la page qu’ils sont en train de voir. De plus, vous pouvez développer votre liste d’e-mails à l’aide d’un formulaire surgissant.

Cela dit, vous devrez d’abord créer un formulaire de contact et l’afficher dans une fenêtre surgissante 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 surgissante sur WordPress :

Vous êtes prêts ? Premiers pas.

Tutoriel vidéo

Subscribe to WPBeginner

Si vous préférez des instructions écrites, continuez à lire.

Comment créer un formulaire de contact WordPress

Tout d’abord, vous devrez sélectionner une extension de formulaire de contact WordPress.

Il existe de nombreuses facultés gratuites et payantes que vous pouvez choisir, mais nous vous recommandons d’utiliser WPForms, car c’est la meilleure option.

WPForms est une extension de formulaire conviviale pour les débutants qui offre un Constructeur Avancée pour créer des formulaires de contact dans WordPress en quelques clics. Il offre également des modèles de formulaires préconstruits 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éverrouiller plus de fonctionnalités. Par exemple, WPForms Pro offre plus de 1 800 modèles de formulaires, plus d’options de personnalisation, de puissants modules complémentaires et la possibilité de collecter des paiements en ligne sans frais de transaction supplémentaires.

Pour commencer, vous devrez d’abord installer et activer l’extension WPForms Lite. Si vous avez besoin d’aide, vous pouvez consulter notre guide étape par étape sur l’installation d’une extension WordPress.

Une fois l’extension activée, vous êtes prêt à créer votre formulaire de contact. Tout ce que vous avez à faire est d’aller sur WPForms  » Ajouter une nouvelle depuis votre Tableau de bord WordPress.

Add a new form

Après cela, WPForms vous demandera de nommer votre formulaire et de sélectionner un modèle.

Après avoir saisi/saisie le nom du formulaire, sélectionnez le modèle « Formulaire de contact simple ».

The WPForms Simple Contact template

Ensuite, vous pouvez ajouter des champs dans le formulaire à l’aide du Constructeur par glisser-déposer.

Il vous suffit de faire glisser les champs que vous souhaitez ajouter au formulaire à partir des options proposées dans le menu de gauche. Vous pouvez également réorganiser la position de chaque champ dans le formulaire.

A contact form template

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, telles que la modification de son libellé et de son format. Vous pouvez même ajouter une description ou marquer un champ comme étant nécessaire.

Edit each field in the contact form

Une fois que vous avez terminé, cliquez sur l’option « Réglages » 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, etc.

Editing the WPForms settings

Ensuite, vous pouvez accéder à l’option de réglages  » Notifications « . Par défaut, les notifications sont envoyées à l’e-mail de l’expéditeur qui est configuré sur votre site WordPress.

Toutefois, vous pouvez envoyer la notification de votre formulaire de contact à l’adresse e-mail de votre choix. Si vous souhaitez recevoir les notifications du 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 saisi/saisie plus tôt. Cependant, vous pouvez modifier le texte de la ligne objet comme vous le souhaitez.

Edit notification settings

Passons maintenant à l’option « Confirmations ».

WPForms utilise ‘Message’ comme type de confirmation par défaut. Cela affichera à vos internautes un message de remerciement lorsqu’ils auront envoyé un formulaire.

Edit form confirmation settings

Vous pouvez toutefois modifier le type de message et rediriger les utilisateurs/utilisatrices vers une page spécifique de votre site lorsqu’ils/elles terminent un formulaire.

Une fois que vous avez créé un formulaire de contact, n’oubliez pas de cliquer sur le bouton « Enregistrer » en haut à droite pour enregistrer vos modifications.

Embed your form

Ensuite, vous pouvez cliquer sur l’option « Contenu embarqué » dans le coin supérieur à côté du bouton « Enregistrer » pour obtenir le code court du formulaire. Vous aurez besoin de ces informations pour afficher votre formulaire dans une fenêtre surgissante.

Lorsqu’une nouvelle fenêtre apparaît, vous pouvez sélectionner l’option « utiliser un code court ».

Click the use a shortcode link

WPForms affichera alors le code court pour votre formulaire de contact dès que vous cliquerez sur le lien. Nous vous suggérons de garder cet onglet/fenêtre ouvert car vous en aurez besoin à l’étape suivante, où nous vous afficherons comment ajouter votre formulaire de contact dans une fenêtre surgissante.

Ajouter une fenêtre surgissante de formulaire de contact à votre site WordPress

Pour créer une fenêtre surgissante de formulaire de contact, vous aurez besoin d’une extension de fenêtre surgissante WordPress.

Nous vous recommandons d’utiliser OptinMonster, car c’est la meilleure extension de génération de prospects et d’optimisation des conversions pour WordPress. C’est également l’un des plus populaires, avec plus de 1,2 million de sites utilisant ce puissant outil.

Pour ce tutoriel, nous utiliserons la version OptinMonster Pro, qui comprend un Modèle sans encombrement et des règles d’affichage avancées pour afficher la fenêtre surgissante.

Tout d’abord, ouvrons un compte en allant sur le site d’OptinMonster. Il suffit de se rendre sur le site et de cliquer sur le bouton  » Get OptinMonster Now « .

OptinMonster

Ensuite, vous devrez installer et activer l’extension gratuite OptinMonster sur votre site. Pour plus de détails, vous pouvez suivre notre guide sur l’installation d’une extension WordPress.

Une fois l’extension activée, vous verrez apparaître l’assistant de configuration. Cliquez sur le bouton « Connecter votre compte existant ».

Connect your existing account

Une fenêtre surgissante apparaît alors, et OptinMonster vous demande de vous connecter à votre compte.

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

Connect OptinMonster to WordPress

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

Vous pouvez commencer par vous rendre sur OptinMonster  » Campagnes et cliquer ensuite sur le bouton  » Créer votre première campagne « .

Create first OptinMonster campaign

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

Sélectionné pour créer une fenêtre surgissante de formulaire de contact, sélectionnez « Popup » comme type de campagne.

Choose a campaign type and template

Ensuite, vous devez défiler vers le bas de la page pour choisir un modèle.

OptinMonster propose plus de 75 designs attrayants et hautement convertibles pour vos fenêtres surgissantes. Vous pouvez sélectionner le modèle de votre choix.

Une fois que vous avez choisi le Modèle, il vous suffit de saisir un nom pour votre campagne et de cliquer sur le bouton « Commencer la Version ».

Enter a name for your campaign

Maintenant, en utilisant le constructeur par glisser-déposer dans OptinMonster, vous pouvez modifier votre modèle de fenêtre surgissante.

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

Add the WPForms block in popup

Après cela, vous devrez cliquer sur le menu déroulant ‘Form Selection’ à partir des Réglages du bloc dans le menu de gauche. Sélectionnez ensuite l’option « Ajouter un code court manuellement ».

À partir de là, vous pouvez saisir votre code court de formulaire de contact WPForms dans le bloc. Pour trouver le code, vous devrez retourner dans vos Réglages d’intégration de WPForms et copier le code court.

Enter contact form shortcode

Il est important de noter que vous ne verrez pas de prévisualisation du formulaire de contact dans le Modèle lorsque vous ajoutez le code court.

C’est normal, car votre formulaire de contact apparaîtra lors de la publication de la campagne.

See contact form shortcode

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

Par défaut, OptinMonster le définira lorsque le temps sur la page est de 5 secondes, et la fenêtre surgissante apparaîtra sur n’importe quelle page. Cependant, vous pouvez modifier les Réglages de la règle d’affichage et sélectionner différents déclencheurs et options de ciblage.

Nous vous suggérons d’utiliser le ciblage MonsterLink (On Click). De cette façon, votre fenêtre surgissante apparaîtra lorsqu’un internaute cliquera sur un lien ou un bouton.

Select MonsterLink display rule

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

Pour plus de détails, vous pouvez suivre notre guide du débutant sur l’ajout d’un lien dans WordPress.

Copy the MonsterLink code

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 embarquer le lien sur votre publication ou page de blog WordPress, il vous suffit d’avoir l’URL du code.

Voici à quoi devrait ressembler l’URL :

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

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

Dans ce cas, vous pouvez commencer par modifier n’importe quelle page ou publication et aller dans votre éditeur WordPress. Ensuite, vous voudrez cliquer sur le signe (+) plus en haut et ajouter un bloc  » Boutons « .

Add a button block

Vous pouvez ensuite saisir/saisir le texte de votre bouton et cliquer sur l’icône du lien. Par exemple, nous utilisons « Contactez-nous » comme texte du bouton.

Il est maintenant temps d’ajouter l’URL de MonsterLink à votre bouton. Vous cliquez sur le bouton puis sur le bouton d’insertion de liens et vous collez l’URL.

Enter the MonsterLink in the button

Une fois que vous avez fait cela, allez de l’avant et publiez votre publication ou page WordPress. Le MonsterLink sera maintenant ajouté à votre bouton « Contactez-nous ».

Titre, retournons à 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 de page.

Complete display rules setup

Dans l’écran suivant, vous trouverez des options permettant de modifier le type d’affichage de la campagne, d’ajouter une animation MonsterEffect et de diffuser un son lorsque la fenêtre surgissante 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 ».

Setup additional display rule settings

OptinMonster affiche alors un récapitulatif de vos Réglages d’affichage.

Cela vous aide à vous assurer que vous avez correctement configuré le moment où vos campagnes apparaîtront sur votre site.

View display rules summary

En direct, vous êtes maintenant prêt à mettre votre campagne en ligne et à publier votre fenêtre surgissante de formulaire de contact. Pour ce faire, vous devez vous rendre dans l’onglet « Publier » en haut de la page.

Ensuite, vous pouvez cliquer sur le bouton « Prévisualisation » avant de publier votre campagne. Cela vous affichera une Prévisualisation directe de la façon dont votre fenêtre surgissante s’affichera sur votre site.

Lorsque vous êtes satisfait de l’apparence de votre campagne, modifiez l’état de publication de « brouillon » à « publier ».

Change the publish status

Une fois cela fait, vous pouvez quitter le Constructeur de campagne OptinMonster et vérifier l’état de votre campagne depuis votre Tableau de bord WordPress.

Pour ce faire, vous devez naviguer dans OptinMonster «  Campagnes« . Cliquez ensuite sur le menu déroulant  » État  » et modifiez-le de  » En attente  » à  » Publié « .

Change the campaign status

OptinMonster mettra automatiquement à jour les modifications.

Ensuite, vous voudrez aller à l’endroit où vous affichez le bouton  » Contactez-nous  » avec l’intégration MonsterLink et voir la fenêtre surgissante du formulaire de contact en action.

Contact form popup preview

Et voilà !

Vous avez bien créé une extension de formulaire de contact dans WordPress. Plus encore, vous l’avez fait en veillant à ce que le formulaire soit non intrusif.

Nous espérons que cet article vous a aidé à apprendre comment ajouter une fenêtre surgissante de formulaire de contact dans WordPress. Ensuite, vous pouvez également consulter notre guide sur la façon d’envoyer des e-mails de confirmation après les entrées de formulaire WordPress et comment suivre et réduire l’abandon de formulaire.

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.

Divulgation : Notre contenu est soutenu par les lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, nous pouvons gagner une commission. Consultez comment WPBeginner est financé, pourquoi cela compte et comment vous pouvez nous soutenir. Voici notre processus éditorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

L'ultime WordPress Toolkit

Accédez GRATUITEMENT à notre boîte à outils - une collection de produits et de ressources liés à WordPress que tous les professionnels devraient avoir !

Reader Interactions

28 commentairesLaisser une réponse

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Isaac says

    This is nice, but can you explain/show how to do this without OptinMonster? I don’t want to have to buy a second plugin just to show a form in a popup. This should be do-able with WP Forms and a free lightbox plugin.

  3. Ruben says

    Before buying I want to ask, can I have two call-to-action buttons in a popup? I want two buttons one for downloading my app from App Store and second from Play Store.

  4. Jhorene says

    Hello,

    Before I buy Optinmonster, can you tell me if it is fully mobile responsive to have a form inside the canvas popup?

    Thank you.

    Regards,
    Jhorene

  5. Mike Whaling says

    Is there a way to do this in the new version of Optin Monster? This worked great when I was using the local WP plugin, but it doesn’t seem to recognize the Gravity shortcode now that I’ve switched over to the new OM.

    Any tips or suggestions?

  6. Silvan says

    could this work as well in a WordPress navigation? I’m having some trouble adding the data-optin-slug bit via the WP menu system.

Laisser une réponse

Merci d'avoir choisi de laisser un commentaire. Veuillez garder à l'esprit que tous les commentaires sont modérés selon notre politique de commentaires, et votre adresse e-mail ne sera PAS publiée. Veuillez NE PAS utiliser de mots-clés dans le champ du nom. Ayons une conversation personnelle et significative.