Comment afficher un formulaire de contact flottant dans WordPress (3 méthodes)

Craignez-vous que les visiteurs souhaitent vous contacter mais ne sachent pas comment faire ?

Un formulaire de contact caché sur une page WordPress est facile à manquer. Les clients potentiels pourraient partir sans poser de question, partager des commentaires ou effectuer un achat. Cela peut entraîner des opportunités manquées et une expérience utilisateur moins conviviale.

La bonne nouvelle est qu'il existe une solution simple : ajouter un formulaire de contact flottant qui suit vos visiteurs pendant qu'ils naviguent. Ainsi, ils peuvent vous contacter à tout moment sans avoir à le chercher.

C'est un moyen facile d'améliorer l'engagement et de renforcer la confiance, sans être intrusif. Mieux encore, vous n'avez besoin d'aucune compétence en codage. Avec les bons plugins, vous pouvez en configurer un en quelques clics.

Dans ce guide, nous vous présenterons trois méthodes rapides pour ajouter un formulaire de contact flottant à votre site WordPress.

Qu'est-ce qu'un formulaire de contact flottant et pourquoi l'utiliser ?

Un formulaire de contact flottant reste à l'écran, par exemple dans un coin inférieur ou un panneau latéral, pendant que les visiteurs naviguent sur un site Web WordPress. Il apparaît généralement sous la forme d'un petit bouton ou d'une icône qui se développe en un formulaire complet lorsqu'on clique dessus ou qu'on le survole.

Voici quelques avantages de l'utilisation d'un formulaire de contact flottant sur votre site WordPress :

• Accessibilité. Comme le formulaire flotte et reste fixe, les visiteurs du site peuvent y accéder depuis n'importe quelle page Web à tout moment.
• Intrusion minimale. Contrairement aux pop-ups qui peuvent interrompre l'expérience utilisateur, les formulaires flottants sont généralement moins perturbateurs tout en étant visibles.
• Appel à l'action. La présence constante d'un formulaire flottant rappelle gentiment aux utilisateurs de s'engager, ce qui contribue à augmenter les conversions.

En tant que propriétaire de site web, vous pouvez utiliser un formulaire de contact flottant pour le support client, les demandes de vente et la collecte de commentaires.

En permettant aux visiteurs d'obtenir de l'aide instantanément pendant qu'ils naviguent, de poser des questions sans quitter la page et de partager des suggestions à tout moment, vous créez une expérience utilisateur plus fluide et plus agréable.

Heureusement, WordPress facilite l'ajout d'un formulaire de contact flottant de différentes manières. Dans les sections suivantes, nous vous présenterons trois méthodes simples pour en configurer un :

• Méthode 1 : Créer un formulaire de contact flottant dans WordPress avec UserFeedback (Facile)
• Méthode 2 : Créer un formulaire de contact flottant dans WordPress avec WPForms et OptinMonster (Le plus personnalisable)
• Méthode 3 : Créer un formulaire de contact flottant dans WordPress avec un plugin gratuit (Gratuit + Facile)
• Méthode alternative : Utiliser un chatbot sur votre site web
• FAQ sur les formulaires de contact flottants dans WordPress
• Ressources supplémentaires sur les formulaires WordPress

Commençons !

Méthode 1 : Créer un formulaire de contact flottant dans WordPress avec UserFeedback

Si vous souhaitez créer un formulaire de contact flottant simple avec des options de personnalisation claires, cette méthode est faite pour vous.

UserFeedback est le meilleur plugin de feedback WordPress qui peut vous aider à créer des formulaires de feedback personnalisables, des formulaires de contact flottants et des sondages pop-up. Il est livré avec des modèles et des questions intégrés, y compris pour les formulaires de sondage sur l'expérience du site Web et les boutiques e-commerce.

En utilisant UserFeedback, vous pouvez améliorer votre site Web en fonction des commentaires réels des utilisateurs, augmenter la satisfaction de vos clients et résoudre rapidement tout problème.

Chez WPBeginner, nous avons effectivement utilisé UserFeedback sur nos propres sites Web et en avons eu une excellente expérience. Pour plus d'informations sur le plugin, n'hésitez pas à consulter notre avis complet sur UserFeedback.

Tout d'abord, installons et activons le plugin UserFeedback. Si vous ne savez pas comment installer un plugin, vous pouvez suivre notre guide sur comment installer un plugin WordPress.

Une fois que UserFeedback est activé sur votre site web, vous pouvez commencer à créer votre premier formulaire de sondage.

Depuis votre tableau de bord WordPress, naviguez vers UserFeedback » Sondages » Créer un nouveau.

Une fois que vous aurez fait cela, vous arriverez à la section « Configuration ».

Avec UserFeedback, vous pouvez commencer avec une page vierge avec l'option « Commencer à partir de zéro » ou utiliser un modèle prédéfini. Dans ce guide, nous utiliserons le modèle « Commentaires sur le site web ». 

Pour choisir le modèle, cliquez simplement dessus.

Ensuite, modifions le texte. Dans cet exemple, nous changeons l'étiquette « Commentaires sur le site web » en « Avez-vous des commentaires ? ».

Ensuite, vous voudrez peut-être cliquer sur le menu déroulant « Type de question » pour choisir comment les visiteurs peuvent répondre à cette question. Dans cet exemple, nous choisirons « Champ de texte unique ».

Après cela, vous pouvez changer la question en « Nom ».

Maintenant, vous aurez besoin d'un autre champ de question pour l'adresse e-mail de l'utilisateur.

Vous pouvez faire défiler un peu vers le bas et cliquer sur le bouton « Ajouter une question ».

Une fois que vous avez fait cela, continuez et configurez votre type de question et votre titre comme vous l'avez fait à l'étape précédente.

L'étape suivante consiste à configurer les paramètres du formulaire.

Dans l'onglet « Paramètres », vous pouvez activer le suivi des vues et des réponses de votre formulaire à l'aide de Google Analytics et MonsterInsights.

Activez simplement le suivi Google Analytics pour utiliser cette fonctionnalité.

Après cela, vous voudrez peut-être faire défiler l'onglet pour configurer le ciblage et le comportement.

Dans la section « Ciblage », vous pouvez choisir le type d'appareil et la page Web qui afficheront votre formulaire de sondage.

Les options de type d'appareil incluent ordinateur de bureau, tablette et mobile. Si vous souhaitez que le formulaire s'affiche sur tous ces appareils, vous pouvez sélectionner les trois.

Ensuite, vous pouvez choisir toutes les pages sur lesquelles vous souhaitez afficher le formulaire flottant. Nous vous recommandons de choisir l'option « Toutes les pages » afin que les visiteurs puissent accéder à votre formulaire n'importe où sur votre site Web.

Une fois terminé, faisons défiler et configurons le comportement du formulaire. Ici, vous définirez :

• Délai d'affichage. Choisissez quand votre formulaire apparaîtra sur vos pages.
• Durée d'affichage. Définissez la fréquence à laquelle votre formulaire sera montré aux visiteurs.
• Durée de validité du sondage. Spécifiez combien de temps votre formulaire apparaîtra sur les pages désignées.

Voici notre configuration pour votre référence : « Délai d'affichage : Immédiatement », « Durée d'affichage : Toujours, jusqu'à ce que le sondage UserFeedback soit terminé » et « Durée de validité du sondage : Indéfiniment ».

Maintenant, vous êtes prêt à passer à l'étape suivante.

Dans l'onglet « Notifications », vous saisirez l'adresse e-mail qui recevra les notifications de soumission de formulaire. Vous pouvez ajouter plusieurs destinataires, mais vous devrez vous assurer d'utiliser une virgule pour les séparer.

Enfin, vous voudrez peut-être prendre un peu de temps pour vérifier votre formulaire une dernière fois avant de le finaliser.

Dans la partie supérieure de l'onglet « Publier », vous verrez « Résumé des commentaires du site web ». Vous pouvez parcourir les points un par un pour voir si les configurations de votre formulaire sont correctes.

Si tout semble correct, vous pouvez faire défiler vers le bas jusqu'à la section « Publier ».

Là, vous pouvez changer le statut de « Brouillon » à « Publier ».

Alternativement, vous pouvez planifier un lancement en activant l'option « Planifier pour plus tard » et en définissant la date et l'heure.

Une fois terminé, cliquez simplement sur « Enregistrer et publier » pour afficher votre formulaire.

Et c’est tout !

Vous avez réussi à afficher un formulaire de contact flottant sur votre site WordPress en utilisant UserFeedback.

Méthode 2 : Créer un formulaire de contact flottant dans WordPress en utilisant WPForms et OptinMonster

Si vous souhaitez plus de contrôle sur la conception de votre formulaire de contact flottant, alors c'est la méthode qu'il vous faut. Nous utiliserons WPForms pour créer le formulaire et OptinMonster pour le faire flotter sur votre site WordPress.

WPForms est le meilleur constructeur de formulaires de contact pour WordPress avec une interface simple de glisser-déposer. Avec plus de 2 000 modèles et des outils alimentés par l'IA, vous pouvez créer un formulaire WordPress en quelques clics.

Chez WPBeginner, nous utilisons WPForms pour collecter les contacts, les commentaires et les demandes de migration des utilisateurs. Découvrez pourquoi nous aimons ce plugin dans notre avis détaillé sur WPForms.

Pour créer des formulaires avec WPForms, la première chose à faire est d'installer et d'activer le plugin sur votre site web. Si vous avez besoin d'aide supplémentaire, vous pouvez lire notre guide sur comment installer un plugin WordPress.

Après l'activation, vous pouvez naviguer vers WPForms » Ajouter nouveau depuis votre tableau de bord WordPress.

Cela vous redirigera vers l'interface du constructeur de formulaires.

Là, tout ce que vous avez à faire est de taper le nom de votre formulaire et de sélectionner un modèle. Dans cet exemple, créons un formulaire de contact et nommons-le « Formulaire de contact ».

Après avoir nommé votre formulaire, vous pouvez faire défiler le panneau pour créer votre formulaire avec l'IA ou sélectionner un modèle.

L'IA de WPForms vous aide à créer des formulaires rapidement. Tout ce que vous avez à faire est de décrire ce dont vous avez besoin. Au lieu d'ajouter des champs manuellement, l'IA le fait pour vous en quelques secondes.

Que vous ayez besoin d'un simple formulaire d'inscription d'utilisateur, d'un formulaire de candidature interactif, ou d'une enquête détaillée, l'IA de WPForms rend le processus rapide.

Dans ce guide, cependant, nous allons utiliser le modèle « Formulaire de contact simple ».

Pour commencer à construire, vous pouvez survoler la boîte du modèle et cliquer sur « Utiliser le modèle ».

Cela vous redirigera vers le panneau « Champs » du constructeur de formulaires.

À partir d'ici, vous voudrez peut-être examiner votre formulaire de contact et ajuster le contenu pré-fait. Si tout semble déjà bon, vous pouvez cliquer sur le bouton « Enregistrer ».

Pour des instructions détaillées, n'hésitez pas à consulter notre guide étape par étape sur comment créer un formulaire de contact.

Une fois que vous avez terminé de créer votre formulaire, il est temps d'ajuster ses paramètres pour qu'il s'affiche sous forme de formulaire flottant.

Pour cela, vous devrez installer OptinMonster, le meilleur plugin de génération de prospects pour WordPress.

L'outil peut vous aider à créer et gérer des campagnes pour convertir les visiteurs en abonnés et en clients payants. Vous pouvez consulter notre guide détaillé sur la façon de créer une liste d'e-mails avec OptinMonster.

Chez WPBeginner, nous utilisons OptinMonster pour promouvoir des offres spéciales via des pop-ups et des bannières d'en-tête. Consultez notre avis complet sur OptinMonster pour en savoir plus sur ce logiciel.

Après l'activation, vous pouvez cliquer sur l'élément de menu « OptinMonster » depuis votre tableau de bord WordPress.

Vous verrez alors l'écran de bienvenue, où vous pourrez cliquer sur « Connecter votre compte existant » pour commencer avec le plugin.

Une nouvelle fenêtre s'ouvrira, et ici, vous pourrez cliquer sur « Se connecter à WordPress ».

OptinMonster vous demandera alors les détails de votre compte pour finaliser le processus.

Une fois vérifié, vous êtes prêt à créer votre première campagne.

Pour commencer, naviguez simplement vers OptinMonster » Campagnes depuis votre zone d'administration WordPress.

Une fois dans « Campagnes », vous êtes prêt à créer et configurer votre formulaire flottant.

Pour commencer, cliquez simplement sur le bouton « Créer votre première campagne ».

Il est maintenant temps de sélectionner un type de campagne.

OptinMonster propose différents types de campagnes, y compris une barre flottante. Bien que cela puisse sembler être le type de campagne idéal, une barre flottante a un espace limité. Vous voudrez donc l'utiliser pour d'autres cas comme l'annonce de promotions de ventes ou le partage de codes de réduction.

Si vous souhaitez en savoir plus sur l'utilisation d'une barre flottante, nous vous recommandons de consulter notre guide sur la création d'une barre de pied de page flottante « collante » dans WordPress.

Pour garder votre design soigné, vous pouvez opter pour « Slide-in » comme type de campagne pour ajouter votre formulaire de contact WPForms.

Un slide-in flottant restera dans le coin inférieur droit de l'écran de l'utilisateur. Ainsi, il peut aider à garder votre contenu lisible, votre conception Web organisée et l'expérience utilisateur excellente.

Vous pouvez simplement cliquer sur le type de campagne pour l'utiliser.

Ensuite, faisons défiler le panneau et sélectionnons un modèle.

Pour utiliser un modèle, survolez simplement le bloc de modèle et cliquez sur « Utiliser le modèle ». Ici, nous choisissons « S'abonner à la newsletter (Léger) ».

Une fois que vous avez choisi votre type de campagne et votre modèle, une fenêtre contextuelle apparaîtra.

Il vous suffira de donner un nom à votre campagne. Dans cet exemple, nous nommerons notre campagne « Formulaire de contact flottant ».

Après avoir décidé du nom, vous pouvez cliquer sur « Commencer la création ».

OptinMonster vous redirigera alors vers le constructeur de campagne.

L'interface de création de campagne comporte deux sections. Le côté gauche contient toutes les fonctionnalités que vous pouvez ajouter à votre campagne, et le côté droit est l'aperçu en direct.

Pour plus d'informations, vous pouvez consulter notre tutoriel sur comment ajouter un formulaire de contact sortant dans WordPress.

Pour ajouter votre formulaire de contact WPForms, vous pouvez faire défiler le panneau de gauche pour localiser le bloc WPForms.

Une fois que vous l'avez trouvé, faites simplement glisser et déposez le bloc WPForms dans l'aperçu en direct du panneau de droite.

Ensuite, vous verrez un menu déroulant « Sélection du formulaire ». Vous pouvez cliquer dessus, puis choisir « Formulaire de contact ». Le bloc dans l'aperçu en direct chargera alors le shortcode du formulaire.

Après cela, vous voudrez peut-être passer à l'onglet « Règles d'affichage ». C'est dans cet onglet que vous pouvez définir le moment et les pages d'affichage du formulaire de contact flottant.

Pour vous assurer que votre formulaire flotte et reste fixe dès la première seconde, nous vous recommandons de régler les deux premiers menus déroulants sur « temps sur la page » et « est immédiat ».

Ensuite, pour afficher le formulaire sur toutes les pages, vous pouvez définir les listes déroulantes suivantes sur « chemin d'URL actuel » et « n'importe quelle page ».

Une fois terminé, vous pouvez accéder à l'onglet « Publier ».

Sur cet onglet, la première chose à faire est de changer le statut de publication de votre campagne en « Publier » ou « Planifier ».

L'étape suivante consiste à utiliser la fonctionnalité « Inspecteur de site en direct » pour tester l'apparence de votre campagne sur votre page web. Pour ce faire, tapez simplement l'URL de votre site dans la zone de texte et cliquez sur « Tester ».

Cela vous redirigera vers un nouvel onglet.

Si tout vous convient, vous pouvez retourner dans le générateur de campagnes OptinMonster et enregistrer votre campagne.

Et voilà ! Vous avez créé avec succès un formulaire de contact flottant à l'aide de WPForms et d'OptinMonster.

Méthode 3 : Créer un formulaire de contact flottant dans WordPress à l'aide d'un plugin gratuit de formulaire flottant

Notre dernière méthode vous permettra d'afficher une icône flottante qui redirige vers votre page de formulaire de contact. Cette approche est légèrement différente, mais elle peut être efficace.

Plusieurs plugins gratuits vous permettent d'ajouter des icônes de contact flottantes à votre site WordPress. Parmi les options populaires, citons Simple Floating Menu et Float Menu. Ces plugins vous demandent généralement d'intégrer une URL dans leurs paramètres.

Dans ce tutoriel, nous allons vous montrer comment faire cela en utilisant Simple Floating Menu. Si vous avez besoin d'aide pour installer le plugin, vous pouvez consulter notre guide sur comment installer un plugin WordPress.

Avant d'accéder à la zone de réglages du plugin Simple Floating Menu, copions l'URL de la page où vous affichez votre formulaire de contact.

Pour ce faire, accédez à la page en question et copiez l'URL depuis la barre d'URL.

Vous pouvez maintenant ouvrir Simple Floating Menu depuis votre tableau de bord WordPress.

Une fois dans la zone des paramètres du plugin, vous voudrez activer l'icône de formulaire flottante. Vous pouvez le faire en activant le curseur « Activer le menu flottant ». Il passera alors du gris au vert ou de désactivé à activé.

Ensuite, trouvez le champ « URL du bouton » pour y coller l'URL.

Une fois que vous avez entré l'URL du bouton, vous devriez voir une notification si vos paramètres ont été enregistrés avec succès.

À ce stade, votre icône flottante devrait être active sur votre site Web WordPress. Cependant, vous pouvez personnaliser davantage la position et l'apparence du bouton.

Au-dessus du champ « URL du bouton », vous pouvez changer l'icône par défaut pour quelque chose de plus pertinent. Ce plugin offre des dizaines d'options d'icônes, donc si vous vous sentez bloqué, il est conseillé d'utiliser la fonction de filtre.

« Texte de l'infobulle » apparaîtra lorsque les visiteurs du site survoleront l'icône flottante. Nous recommandons de remplir ce champ pour donner aux visiteurs un contexte sur l'endroit où l'icône les mènera.

Ensuite, si vous souhaitez rediriger les visiteurs vers une nouvelle page après avoir cliqué sur l'icône, cochez simplement la case du champ « Ouvrir dans un nouvel onglet ».

Vous pouvez modifier les couleurs de l'icône flottante en faisant défiler l'écran. N'hésitez pas à faire preuve de créativité avec les couleurs d'arrière-plan, d'icône et d'effet de survol tant qu'elles correspondent à votre marque ou à la personnalité de votre site Web.

Lorsque vous avez terminé, cliquez sur « Enregistrer les paramètres ».

Ensuite, vous pouvez passer à l'onglet « Paramètres » pour plus de fonctionnalités de personnalisation.

Sur cet onglet, vous pouvez choisir où vous souhaitez que le formulaire apparaisse sur votre site, par exemple en haut à gauche, au milieu à droite ou en bas à droite.

Il existe également des paramètres d'orientation des boutons. Vous pouvez choisir vertical ou horizontal.

Vous pourriez également vouloir changer le style des boutons. La forme par défaut est un rectangle, mais vous pouvez opter pour un rond, un triangle, ou même une étoile.

Vous trouverez d'autres paramètres de personnalisation dans le panneau. N'hésitez pas à ajuster la taille, les styles d'ombre, la typographie, et plus encore de votre icône flottante pour la rendre plus unique.

Une fois terminé, il ne vous reste plus qu'à enregistrer pour ne pas perdre votre progression.

Maintenant, vous pouvez continuer et voir à quoi ressemble l'icône flottante sur votre site web.

Voici à quoi ressemble notre icône flottante pour votre référence :

Méthode alternative : Utiliser un chatbot sur votre site web

Un formulaire de contact flottant est un excellent moyen de permettre aux visiteurs de vous contacter. Mais si vous souhaitez fournir des réponses immédiates à vos utilisateurs, alors il peut être utile d'installer un chatbot à la place.

Un chatbot peut être alimenté par l'IA ou géré directement par votre équipe de support. Par exemple, un outil comme ChatBot peut puiser des informations sur votre site web et votre centre d'aide pour fournir des réponses immédiates alimentées par l'IA à vos visiteurs.

Pour plus de détails sur la façon de configurer cela, vous pouvez consulter notre tutoriel sur comment ajouter un chatbot dans WordPress. Et pour en savoir plus sur le logiciel, consultez notre critique complète de ChatBot.

FAQ sur les formulaires de contact flottants dans WordPress

Voici les réponses aux questions les plus fréquentes concernant la configuration et la personnalisation des formulaires de contact flottants.

Quel est le meilleur plugin pour créer un formulaire de contact flottant ?

Si vous recherchez une solution simple et tout-en-un, UserFeedback est un excellent choix. Il est conçu pour une configuration et une personnalisation faciles, ce qui le rend idéal pour des formulaires flottants simples sans aucun codage.

Pour plus de contrôle sur l'apparence et le comportement de votre formulaire, envisagez de combiner WPForms avec OptinMonster.

WPForms offre un constructeur convivial par glisser-déposer avec plus de 2 000 modèles et de nombreux outils d'IA. OptinMonster ajoute des options de ciblage avancées et une flexibilité de conception, vous permettant d'afficher votre formulaire exactement quand et où vous le souhaitez.

Puis-je personnaliser le design de mon formulaire de contact flottant ?

Absolument. Les trois méthodes permettent une personnalisation. Vous pouvez personnaliser les couleurs, le texte et le positionnement pour qu'ils correspondent à l'image de marque de votre site.

OptinMonster va encore plus loin dans la personnalisation, offrant des options de conception avancées et des règles de ciblage. Cela signifie que vous pouvez affiner chaque détail de votre campagne de formulaire flottant pour répondre à vos besoins spécifiques.

Un formulaire de contact flottant ralentira-t-il mon site web ?

Pas du tout. Les plugins présentés dans ce guide sont bien codés et optimisés pour les performances. Ils se chargent de manière asynchrone, s'assurant qu'ils ne bloquent pas le chargement du contenu principal de votre page. Cela permet de maintenir une expérience utilisateur rapide et fluide sur votre site.

Ressources supplémentaires sur les formulaires WordPress

Nous espérons que ce guide vous a aidé à ajouter un formulaire de contact flottant à votre site. Maintenant qu'il est configuré, vous voudrez peut-être consulter ces autres articles utiles pour tirer encore plus parti de vos formulaires :

• Comment intégrer des formulaires dans WordPress
• Comment personnaliser et styliser vos formulaires WordPress
• Comment créer des formulaires multilingues dans WordPress
• Comment créer des formulaires plus interactifs dans WordPress
• Le guide ultime pour utiliser les formulaires WordPress
• Meilleurs constructeurs de formulaires en ligne (Sélections d'experts)

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.