Comment ajouter un formulaire de contact coulissant dans WordPress (Tutoriel facile)

Il peut être frustrant lorsque des personnes visitent votre site Web WordPress mais ne vous contactent jamais. Elles parcourent peut-être vos pages, passent même quelques minutes à lire, mais votre formulaire de contact ne reçoit aucune soumission.

Souvent, ce n'est pas que les visiteurs ne veulent pas vous contacter. Ils ne voient tout simplement pas de moyen facile ou invitant de le faire.

C'est là qu'un formulaire de contact déroulant peut faire une grande différence. Il apparaît doucement sur le côté, offrant de l'aide juste au moment où les visiteurs en ont besoin, sans interrompre leur expérience.

Dans ce guide, nous vous montrerons comment ajouter un formulaire de contact déroulant à votre site WordPress étape par étape, en utilisant une méthode fiable et testée. 🧑‍💻

Pourquoi ajouter un formulaire de contact déroulant dans WordPress ? 💭

Un formulaire de contact déroulant permet aux visiteurs de vous contacter plus facilement sans quitter la page sur laquelle ils se trouvent. Il glisse doucement sur le côté, attire l'attention et permet aux utilisateurs d'envoyer un message rapide juste quand ils ont besoin d'aide.

De nombreux propriétaires de petites entreprises ajoutent une page de contact, espérant que les visiteurs l'utiliseront et que cela aidera à développer leur entreprise.

Mais en réalité, la plupart des gens partent sans jamais prendre contact. C'est pourquoi vous verrez des sites Web populaires utiliser des popups de contact, des sliders ou des boutons flottants pour faciliter la communication.

Ces options animées et interactives attirent l'attention sur le formulaire de contact, rendant votre site plus interactif et accessible. Ainsi, vous pouvez plus facilement transformer des visiteurs occasionnels en prospects ou clients réels.

Cela étant dit, nous allons vous expliquer comment créer un formulaire de contact déroulant dans WordPress. Voici un aperçu rapide de tout ce que nous allons couvrir dans ce guide :

• Ajouter un formulaire de contact déroulant dans WordPress
• Étape 1 : Créer un formulaire de contact dans WordPress
• Étape 2 : Créer une campagne déroulante dans OptinMonster
• Étape 3 : Afficher le formulaire de contact déroulant dans WordPress
• FAQ : Ajouter un formulaire de contact coulissant dans WordPress
• Ressources bonus pour l'utilisation des formulaires WordPress

Commençons.

Ajouter un formulaire de contact déroulant dans WordPress

Pour ce tutoriel, vous aurez besoin de WPForms. C'est le meilleur plugin de formulaire de contact WordPress du marché car il est à la fois simple et puissant.

ℹ️ Remarque : WPForms alimente tous nos formulaires chez WPBeginner, y compris notre formulaire de contact. Il est facile à utiliser, hautement personnalisable, et les nouveaux outils d'IA rendent la création de formulaires plus rapide que jamais.

Curieux de savoir comment ça marche ? Consultez notre avis complet sur WPForms pour découvrir tout ce qu'il peut faire.

Pour suivre ce tutoriel, vous pouvez utiliser la version gratuite du plugin de formulaire de contact WPForms si vous n'avez pas besoin de ses fonctionnalités premium (logique conditionnelle, intégrations avancées, etc.).

Ensuite, vous connecterez votre formulaire avec OptinMonster. C'est le logiciel d'optimisation de conversion le plus puissant, et il vous aide à convertir les visiteurs de site web abandonnés en clients.

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

Tout d'abord, vous devez installer et activer le plugin WPForms. Depuis votre zone d'administration WordPress, allez dans Plugins » Ajouter un nouveau plugin pour commencer.

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

Dans le résultat de recherche, cliquez simplement sur « Installer maintenant » puis sur « Activer » pour terminer le processus.

Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress

Après activation, vous devez visiter la page WPForms » Ajouter un nouveau pour créer un nouveau formulaire de contact. Cela lancera l'interface du constructeur WPForms.

Entrez un nom pour votre formulaire de contact en haut de la page.

Ensuite, vous devez survoler le modèle « Formulaire de contact simple » avec votre souris et cliquer sur le bouton « Utiliser le modèle ».

WPForms créera un nouveau formulaire basé sur le modèle de formulaire de contact simple.

Vous verrez un aperçu du formulaire dans le volet droit du constructeur de formulaires. Vous pouvez cliquer sur n'importe quel champ pour le modifier ou ajouter de nouveaux champs de formulaire depuis la colonne de gauche.

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

Une fois que vous avez terminé de modifier le formulaire, cliquez simplement sur le bouton « Enregistrer » pour sauvegarder vos modifications.

Ensuite, vous devez cliquer sur le bouton « Intégrer » en haut pour obtenir le code d'intégration de votre formulaire.

Cela ouvrira une fenêtre contextuelle montrant plusieurs façons d'intégrer votre formulaire. Cliquez simplement sur le lien « utiliser un shortcode », puis copiez le shortcode. Vous en aurez besoin à l'étape suivante.

Étape 2 : Créer une campagne déroulante dans OptinMonster

Maintenant, nous allons créer une campagne déroulante qui affichera le formulaire de contact que vous avez créé à la première étape.

Vous devez installer et activer le plugin gratuit OptinMonster. Ce plugin sert de connecteur entre votre site Web et votre compte OptinMonster.

ℹ️ Remarque : Nous utilisons OptinMonster chez WPBeginner pour promouvoir des offres exclusives via des pop-ups, des slide-ins et des bannières. C'est un outil polyvalent qui stimule l'engagement et développe notre liste d'e-mails sans effort.

Vous voulez en savoir plus ? Consultez notre critique complète d'OptinMonster pour explorer ses fonctionnalités.

Pour commencer, créons votre compte OptinMonster. Sur leur site Web, cliquez sur le bouton « Obtenir OptinMonster maintenant », sélectionnez un plan et terminez le processus d'inscription.

Une fois cela fait, vous serez redirigé vers votre tableau de bord OptinMonster.

Maintenant, allez dans Extensions » Ajouter une nouvelle extension dans votre tableau de bord WordPress pour installer l'extension OptinMonster.

Ensuite, utilisez simplement la fonction de recherche pour trouver rapidement l'extension OptinMonster.

Une fois que vous l'avez trouvée, cliquez sur le bouton « Installer maintenant », puis sur « Activer ».

Pour plus de détails, vous pouvez vous référer à notre guide sur comment installer un plugin WordPress.

Lors de l'activation, l'assistant de configuration d'OptinMonster démarrera automatiquement. Cela vous permettra de créer un nouveau compte ou de connecter un compte existant.

Après avoir créé ou connecté votre compte OptinMonster, vous pouvez créer une nouvelle campagne d'inscription.

Naviguez simplement vers la page OptinMonster » Campagnes et cliquez sur le bouton « Ajouter nouveau ». Si vous n'avez pas encore de campagnes, vous pouvez également cliquer sur le bouton « Créer votre première campagne ».

OptinMonster propose différents types de campagnes dynamiques.

Pour ce tutoriel, nous utiliserons la campagne « Slide-in ».

Cliquez pour sélectionner « Slide-in » comme type de campagne.

Ensuite, vous devez sélectionner le modèle. OptinMonster propose plusieurs modèles prêts à l'emploi.

Pour ce tutoriel, vous devez choisir « Canvas ».

Vous pouvez le trouver facilement en utilisant la fonction de recherche, puis cliquez sur le bouton « Utiliser le modèle » qui apparaît lorsque vous passez votre souris dessus.

Dès que vous sélectionnez le modèle, il vous sera demandé de fournir un nom pour votre campagne. Cela vous aidera à localiser facilement la campagne dans votre tableau de bord OptinMonster.

Ensuite, cliquez sur le bouton « Commencer la construction ».

Maintenant, OptinMonster chargera son interface de création de campagne.

Vous verrez un aperçu en direct de votre campagne à droite et les différents blocs dans le menu à votre gauche.

Trouvez simplement le bloc WPForms, puis faites-le glisser et déposez-le dans la zone d'aperçu.

Maintenant, le bloc WPForms apparaîtra sur le modèle, et vous verrez ses paramètres à gauche.

Vous devrez cliquer sur le menu déroulant « Sélection du formulaire » dans les paramètres du bloc du menu de gauche et sélectionner l'option « Ajouter le shortcode manuellement ».

Cela vous permettra de coller votre shortcode de formulaire de contact WPForms shortcode de formulaire de contact dans le bloc. Vous l'avez copié plus tôt dans le tutoriel.

Vous pouvez maintenant supprimer ou personnaliser les autres blocs du formulaire.

Par exemple, vous pouvez changer l'image en cliquant dessus et en utilisant les paramètres à gauche.

Ou vous pouvez simplement le supprimer en survolant le bloc avec votre souris et en cliquant sur l'icône « Corbeille ».

Pour ce tutoriel, nous allons supprimer les autres blocs de l'optin, en ne laissant que le bloc WPForms.

Si vous le souhaitez, vous pouvez également cliquer sur l'arrière-plan et choisir une couleur, un dégradé ou une image pour l'option dans le panneau des paramètres à gauche.

Ensuite, vous devez cliquer sur l'onglet « Règles d'affichage » en haut de la page pour configurer quand et comment l'optin sera affiché.

Vous devriez voir l'onglet « Conditions » en bas de l'écran. Ici, les paramètres par défaut afficheront l'optin sur n'importe quelle page après 5 secondes. Cela devrait fonctionner pour la plupart des sites Web.

Ensuite, vous devez cliquer sur l'onglet « Actions » en bas de la page.

Par défaut, il n'y a pas d'animation ni de son lorsque l'optin est affiché. Si vous le souhaitez, vous pouvez sélectionner une option dans le menu déroulant « Animer avec MonsterEffects », telle que « Glisser (vers la gauche) ».

Lorsque vous avez terminé de configurer les règles d'affichage, vous devez cliquer sur le bouton « Enregistrer » en haut pour sauvegarder vos paramètres, puis cliquer sur le bouton « Publier ».

Sur l'écran suivant, vous devez changer le statut de publication en « Publié ». Cela rendra l'optin disponible sur votre blog WordPress ou votre site Web.

Étape 3 : Afficher le formulaire de contact déroulant dans WordPress

Maintenant que vous avez créé le formulaire de contact et la campagne déroulante, vous êtes prêt à les afficher sur votre site web.

Vous pouvez fermer la page de statut de publication en cliquant sur l'icône « X » en haut à droite. Vous devriez maintenant voir une page qui vous permet de configurer les « Paramètres de sortie WordPress » et la « Visibilité et statut » de l'optin.

Lorsque vous faites défiler la section « Visibilité et statut », vous voudrez normalement que « Tous les visiteurs et utilisateurs connectés » voient la campagne. Cependant, il existe des options pour « Visiteurs uniquement » et « Utilisateurs connectés uniquement ».

Une fois que vous avez fait cela, vous devriez cliquer sur le bouton « Enregistrer les modifications » pour sauvegarder vos paramètres.

Vous pouvez maintenant visiter votre site web pour voir le formulaire de contact déroulant en action :

FAQ : Ajouter un formulaire de contact coulissant dans WordPress

Maintenant que vous savez comment ajouter un formulaire de contact déroulant dans WordPress, passons en revue quelques questions courantes que les utilisateurs posent souvent.

Quelle est la taille idéale pour une boîte déroulante ?

Environ 400 à 600 px de large et 300 à 400 px de haut fonctionne généralement bien. Elle doit se démarquer sans couvrir trop de la page.

Quelle est la différence entre un élément déroulant, une fenêtre pop-up et un overlay ?

Un élément déroulant glisse depuis le côté, une fenêtre pop-up apparaît au centre et un overlay couvre tout l'écran. Les éléments déroulants sont généralement moins intrusifs, mais chaque option peut vous aider à augmenter l'engagement – choisissez simplement ce qui correspond le mieux au style de votre site.

Quelles sont certaines des meilleures alternatives aux formulaires pop-up ?

Vous pouvez utiliser des formulaires en ligne, des barres flottantes ou des formulaires déroulants pour une expérience utilisateur plus fluide et moins perturbatrice.

Ressources bonus pour l'utilisation des formulaires WordPress

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

Vous voudrez peut-être aussi consulter certains de nos autres guides sur les formulaires WordPress :

• Comment afficher un formulaire de contact flottant dans WordPress
• Comment ajouter un popup de formulaire de contact dans WordPress
• Meilleures pratiques pour la conception de pages de formulaire de contact (avec exemples)
• Comment utiliser les formulaires de contact pour développer votre liste d'e-mails dans WordPress
• Comment bloquer le spam des formulaires de contact dans 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.