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

De nombreux propriétaires de sites trouvent difficile de fournir un accès facile aux options de contact sans encombrer la conception de leur site. Les formulaires de contact flottants offrent une solution en permettant aux utilisateurs/utilisatrices de vous contacter facilement, quel que soit l’endroit où ils/elles se trouvent sur votre site.

Nous avons utilisé cette stratégie sur nos propres sites Web pour recueillir les retours des utilisateurs/utilisatrices et permettre aux internautes de nous contacter facilement. Heureusement, il existe de nombreuses extensions WordPress qui peuvent vous aider à faire de même sur votre site.

Dans cet article, nous allons vous montrer comment afficher un formulaire de contact flottant dans 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 le coin inférieur ou le panneau latéral, lorsque les internautes naviguent sur un site. Il apparaît généralement sous la forme d’un petit bouton ou d’une icône qui se déploie 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 :

• Accessibilité. Comme le formulaire flotte et reste corrigé, les internautes peuvent y accéder à partir de n’importe quelle page web et à n’importe quel moment.
• Intrusion minimale. Contrairement aux fenêtres surgissantes qui peuvent interrompre l’expérience de l’utilisateur, les formulaires flottants sont généralement moins dérangeants tout en restant perceptibles.
• Appel à action. La présence constante d’un formulaire flottant rappelle doucement aux utilisateurs/utilisatrices de s’engager, ce qui aide à augmenter les conversions.

En tant que propriétaire de site, vous pouvez utiliser un formulaire de contact flottant pour le support client/cliente, les demandes de renseignements sur les ventes et la collecte de retours.

En permettant aux visiteurs d’obtenir de l’aide instantanément lorsqu’ils naviguent sur votre site, de poser des questions sans quitter la page ou de faire part de leurs suggestions à tout moment, un formulaire de contact flottant peut améliorer l’expérience des utilisateurs/utilisatrices sur votre site.

Avec WordPress, vous pouvez afficher un formulaire de contact flottant de plusieurs façons.

Dans les sections suivantes, nous partagerons trois méthodes faciles pour afficher un formulaire de contact flottant sur un site WordPress. Il suffit d’utiliser les liens rapides ci-dessous pour choisir la méthode que vous souhaitez utiliser :

Premiers pas !

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

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

UserFeedback est une extension WordPress qui peut vous aider à créer des formulaires de retour d’information personnalisables, des formulaires de contact flottants et des enquêtes pop-up. Cette extension est livrée avec des modèles et des questions intégrés, y compris pour les formulaires d’enquête sur l’expérience des sites Web et des magasins d’e-commerce.

Nous utilisons UserFeedback sur nos propres sites, et vous pouvez en savoir plus dans notre avis complet sur UserFeedback.

En utilisant UserFeedback, vous pouvez améliorer votre site sur la base des commentaires des utilisateurs, augmenter la satisfaction des clients/clientes et résoudre promptement tout problème.

Tout d’abord, vous devez installer et activer l’extension UserFeedback. Si vous ne savez pas comment installer une extension, vous pouvez suivre notre guide sur l’installation d’un plugin WordPress.

Une fois que UserFeedback est activé sur votre site, vous pouvez commencer à créer votre premier formulaire d’enquête. Depuis votre Tableau de bord WordPress, naviguez vers UserFeedback  » Enquêtes  » Créer une nouvelle.

Une fois cette étape franchie, vous accédez à la section « Configuration ».

Avec UserFeedback, vous pouvez commencer avec une page vierge grâce à l’option ‘Start from Scratch’ ou utiliser un modèle prédéfini. Dans ce guide, nous utiliserons le modèle « Site Retour ».

Pour choisir le modèle, il suffit de cliquer dessus.

Modifions ensuite le texte. Dans cet exemple, nous modifions le libellé « Retour sur le site » en « Avez-vous un retour sur le site ?

Ensuite, vous pouvez cliquer sur le menu déroulant « Type de question » pour choisir la façon dont les internautes peuvent répondre à cette question. Dans cet exemple, nous choisirons « Champ de texte unique ».

Ensuite, vous pouvez modifier la question en « Nom ».

Vous avez maintenant besoin d’un autre champ de questions pour l’adresse e-mail du compte.

Vous pouvez défiler un peu vers le bas et cliquer sur le bouton « Ajouter une question ». Une fois que vous avez fait cela, allez-y et configurez votre type de question et votre titre comme vous l’avez fait à l’étape précédente.

L’étape suivante consiste à définir les réglages du formulaire.

Dans l’onglet  » Réglages « , vous pouvez activer le suivi des vues et des réponses de vos formulaires à l’aide de Google Analytics et de MonsterInsights. Il vous suffit de cocher la case « Activer le suivi de Google Analytics » pour utiliser cette fonctionnalité.

Si vous souhaitez en savoir plus sur l’utilisation de Google Statistiques pour le suivi, vous pouvez lire notre guide sur la façon de découvrir comment configurer les objectifs Google Analytics pour votre site WordPress.

Ensuite, vous pouvez défiler vers le bas de 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 affichera votre formulaire d’enquête.

Les options de type d’appareil comprennent l’ordinateur de bureau, la tablette et le 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 internautes puissent accéder à votre formulaire partout sur votre site.

Une fois cela fait, défilons vers le bas et configurons le comportement du formulaire. Ici, vous définirez :

• Délai d’affichage. Choisissez le moment où votre formulaire apparaîtra sur vos pages.
• Durée d’affichage. Définissez la fréquence à laquelle votre formulaire sera affiché aux internautes.
• Durée de l’enquête. Indiquez la durée pendant laquelle votre formulaire apparaîtra sur les pages désignées.

Vous êtes maintenant prêt à passer à l’étape suivante.

Dans l’onglet « Notifications », saisissez l’adresse e-mail qui recevra les entrées du formulaire. Vous pouvez ajouter plusieurs destinataires, mais vous devrez veiller à utiliser une virgule pour séparer chacun d’entre eux.

Dernier point, vous pouvez prendre le temps de vérifier une dernière fois votre formulaire avant de le finaliser.

Dans la partie supérieure de l’onglet « Publier », vous verrez « Récapitulatif des retours sur le site ». Vous pouvez passer en revue les puces une par une pour vérifier si les configurations de votre formulaire sont correctes.

Si tout semble correct, vous pouvez défiler jusqu’à la section « Publier ».

Vous pouvez y modifier l’état de « brouillon » à « publier ». Vous pouvez également planifier un lancement en commutant l’option « Planifier ultérieurement » et en définissant la date et l’heure.

Une fois cela fait, il suffit de cliquer sur « Enregistrer et publier » pour afficher votre formulaire.

Et c’est tout ! Vous avez bien affiché 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 voulez plus de contrôle de conception sur votre formulaire de contact flottant, alors c’est la méthode pour vous. Nous utiliserons WPForms pour créer le formulaire et OptinMonster pour le faire flotter sur votre site WordPress.

WPForms est une extension facile à utiliser, par glisser-déposer, pour la construction de formulaires WordPress. Avec plus de 1 800 modèles disponibles, vous pouvez rapidement configurer un formulaire en quelques clics. Pour en savoir plus, vous pouvez consulter notre Avis complet sur WPForms.

Pour créer des formulaires avec WPForms, la première chose à faire est d’installer et d’activer l’extension sur votre site. Si vous avez besoin d’aide supplémentaire, vous pouvez consulter notre guide sur l’installation d’une extension WordPress.

Une fois activé, vous pouvez naviguer vers WPForms  » Ajouter une nouvelle 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 donné un nom à votre formulaire, vous pouvez défiler vers le bas du panneau pour sélectionner un modèle.

Dans cet exemple, nous allons utiliser l’option « Formulaire de contact simple ». Pour commencer la construction, il suffit de survoler le formulaire et de cliquer sur « Utiliser le Modèle ».

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

À partir de là, vous pouvez revoir votre formulaire de contact et ajuster le contenu prédéfini. Si tout semble déjà correct, vous pouvez aller de l’avant et cliquer sur le bouton « Enregistrer ».

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

Une fois votre formulaire défini, il est temps d’en régler les Réglages pour qu’il s’affiche comme un formulaire flottant.

Pour cela, vous devrez installer OptinMonster et connecter votre site WordPress à l’extension.

OptinMonster est une puissante extension de génération de prospects et de fenêtres surgissantes. Il peut vous aider à créer et à gérer des campagnes pour convertir les visiteurs en abonnés/abonnées et en clients/clients payants.

Vous pouvez consulter notre guide détaillé sur la façon de construire une liste d’e-mails avec OptinMonster.

Une fois activé, 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 pouvez cliquer sur « Connecter votre compte existant » pour Premiers pas avec l’extension.

Une nouvelle fenêtre s’ouvre, dans laquelle vous pouvez cliquer sur « Se connecter à WordPress ».

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

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

Pour Premiers pas, naviguez simplement vers OptinMonster  » Campagnes depuis votre Tableau de bord WordPress.

Une fois que vous avez accédé aux « Réglages », vous êtes prêt à créer et à configurer votre formulaire flottant.

Pour Premiers pas, il vous suffit de cliquer 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, dont une barre flottante. Bien qu’elle puisse sembler être le type de campagne parfait, une barre flottante a un espace limité. Il est donc préférable de l’utiliser dans d’autres cas, par exemple pour annoncer des promotions ou partager des 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 épinglée dans WordPress.

Pour conserver un design soigné, vous pouvez choisir le type de campagne « Diapositive » pour ajouter votre formulaire de contact WPForms.

Une diapositive flottante reste dans le coin inférieur droit de l’écran du compte. Il peut donc aider à préserver la lisibilité du contenu, l’organisation de la conception du site web et l’expérience de l’utilisateur.

Il vous suffit de cliquer sur le type de campagne pour l’utiliser.

Ensuite, défilons vers le bas du panneau et sélectionnons un modèle.

Pour utiliser un modèle, il suffit de survoler le bloc du modèle et de cliquer sur « Utiliser le modèle ». Ici, nous choisissons « S’abonner à la lettre d’information (légère) ».

Une fois que vous avez choisi votre type de campagne et votre Modèle, une fenêtre pop-up apparaît.

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

Après avoir choisi le nom, vous pouvez cliquer sur « Démarrer la Version ».

OptinMonster vous redirigera ensuite vers le constructeur de campagne.

L’interface de création de campagne comporte deux sections. La partie gauche contient toutes les fonctionnalités que vous pouvez ajouter à votre conteneur, et la partie droite est la prévisualisation en direct.

En savoir plus, vous pouvez consulter notre module sur l ‘ajout d’un formulaire de contact diapositif dans WordPress.

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

Une fois que vous l’avez trouvé, il vous suffit de faire glisser le bloc WPForms vers la Prévisualisation en direct dans le panneau de droite.

Vous verrez alors apparaître un menu déroulant « Sélection du formulaire ». Vous pouvez cliquer dessus et choisir « Formulaire de contact ». Le bloc dans la Prévisualisation directe chargera alors le code court du formulaire.

Ensuite, vous pouvez passer à l’onglet « Règles d’affichage ». C’est dans cet onglet que vous pouvez définir le calendrier et les pages d’affichage du formulaire de contact flottant.

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

Ensuite, pour afficher le formulaire sur toutes les pages, vous pouvez définir les menus déroulants suivants : « chemin URL actuel » et « n’importe quelle page ».

Une fois cette étape franchie, vous pouvez accéder à l’onglet « Publier ».

Dans cet onglet, la première chose à faire est de modifier l’état de publication de votre campagne en  » Publier  » ou  » Planifier « .

L’étape suivante consiste à utiliser la fonctionnalité « Inspecteur de site en direct » pour tester l’aspect de votre campagne sur votre page web. Pour ce faire, il vous suffit de saisir l’URL de votre site dans la zone de texte et de cliquer sur « Test ».

Cela vous redirigera vers un nouvel onglet.

Si tout se présente comme vous le souhaitez, vous pouvez retourner dans le Constructeur de campagne OptinMonster et enregistrer votre campagne.

Et voilà, c’est fait ! Vous avez bien créé un formulaire de contact flottant en utilisant WPForms et OptinMonster.

Méthode 3 : Créer un formulaire de contact flottant dans WordPress à l’aide d’une extension gratuite 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 extensions gratuites vous permettent d’ajouter des icônes de contact flottantes à votre site WordPress. Parmi les options les plus populaires, citons Simple Floating Menu et Float Menu. Ces extensions nécessitent généralement que vous intégriez une URL dans leurs Réglages.

Dans ce tutoriel, nous allons montrer comment le faire en utilisant Simple Floating Menu. Si vous avez besoin d’aide pour installer l’extension, vous pouvez lire notre guide sur l’installation d’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, naviguez jusqu’à la page en question et copiez l’URL à partir de la barre d’adresse.

Maintenant, vous pouvez ouvrir Simple Floating Menu depuis votre Tableau de bord WordPress.

Une fois que vous êtes dans la zone des Réglages du plugin, vous devez activer l’icône du formulaire flottant. Vous pouvez le faire en activant le Diaporama « Enable Floating Menu ». Il passera alors du gris au vert ou de l’inactif à l’actif.

Trouvez ensuite le champ « URL du bouton » pour y coller l’URL.

Une fois que vous avez saisi l’URL du bouton, vous devriez voir une notification indiquant que vos Réglages ont bien été enregistrés.

À présent, votre icône flottante devrait être en direct sur votre site WordPress. Cependant, vous pouvez personnaliser davantage la position et l’apparence du bouton.

Au-dessus du champ  » URL du bouton « , vous pouvez modifier l’icône par défaut pour quelque chose de plus pertinent. Ce plugin offre des dizaines d’options d’icônes, donc si jamais vous vous sentez épinglé, c’est une bonne idée d’utiliser la fonctionnalité de filtre.

Le texte de l’astuce apparaîtra lorsque les internautes survoleront l’icône flottante. Nous vous recommandons de remplir ce champ afin de donner aux internautes un contexte sur l’utilisation de l’icône.

Ensuite, si vous souhaitez rediriger les internautes vers une nouvelle page après avoir cliqué sur l’icône, il vous suffit de cocher la case du champ « Ouvrir dans un nouvel onglet ».

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

Lorsque vous avez terminé, cliquez sur « Enregistrer les réglages ».

Ensuite, vous pouvez passer à l’onglet  » Réglages  » pour accéder à d’autres fonctionnalités de personnalisation.

Dans cet onglet, vous pouvez choisir l’endroit 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 Réglages pour l’orientation des boutons. Vous pouvez choisir l’orientation verticale ou horizontale. Vous pouvez également modifier le style du bouton. 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 réglages de personnalisation en bas du panneau.

Il vous suffit d’ajuster la taille de votre icône flottante, les tailles des ombres, la typographie et bien plus encore pour la rendre plus unique.

Une fois cela fait, il ne reste plus qu’à enregistrer pour ne pas perdre votre progression.

Vous pouvez maintenant aller de l’avant et voir à quoi ressemble l’icône flottante sur votre site.

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

Alternative : Utilisez un chatbot sur votre site

Un formulaire de contact flottant est un excellent moyen de permettre aux internautes de vous joindre. Mais si vous souhaitez apporter des responsive immédiates à vos utilisateurs/utilisatrices, il peut être intéressant d’installer plutôt un chatbot.

Un chatbot peut être alimenté par l’IA ou pris en charge directement par votre équipe de support. Par exemple, un outil comme Chatbot peut puiser des informations sur votre site et votre centre d’aide pour fournir immédiatement à vos internautes des responsive alimentées par l’IA.

Pour plus de détails sur la façon de le configurer, vous pouvez consulter notre tutoriel sur l ‘ajout d’un chatbot dans WordPress.

Nous espérons que ce guide vous a aidé à créer et à afficher un formulaire de contact WordPress flottant. Ensuite, vous pouvez consulter notre guide sur la façon de créer des formulaires plus interactifs sur WordPress et notre choix d’experts des meilleures extensions de formulaires de contact WordPress.

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.