![formulaire : comment générer plus de leads](/sites/default/files/styles/thumbnail_header_image/public/uploads/office-3309862_1280_23.jpg?itok=5dhJG8Wp)
16 étapes pour générer plus de leads sur vos formulaires
Le formulaire est le lieu qui permet aux visiteurs de renseigner leurs informations personnelles en échange d'un produit/service : inscription sur le site, à la newsletter, à un événement, abonnement, commande, demande de contact, concours, enquête, paiement en ligne, réclamation, demande de renseignement, etc.
Un formulaire non optimisé est une barrière pour vos taux de conversion. Il peut ralentir vos visiteurs et créer de l’incertitude si les informations demandées ne sont pas nécessaires, voire de la frustration s’il est trop long à remplir.« Côté visiteur, un formulaire optimisé ne doit pas être perçu comme une barrière, mais comme un échange naturel entre l'internaute et vous. -Anaïs Rousseau, Kameleoon.
1. Pour commencer, qu’est-ce qu’un bon formulaire ?
Il n’y a pas de règles fixes concernant les formulaires : ce qui marche pour certains ne fonctionne pas forcément pour d’autres. Il faut donc garder à l’esprit les points que je développe dans cet article sans pour autant perdre de vue vos objectifs, les intérêts de vos visiteurs et le contexte dans lequel vous proposez le formulaire. Ce ne sera pas une mince affaire ! ? Pour commencer, voici quelques questions à vous poser avant de créer un formulaire :- Pour qui ? Quels individus sont visés par votre formulaire ? Quelles sont leurs attentes et leurs besoins ? Ont-ils des habitudes concernant le remplissage de formulaire ?
- Pourquoi ? Le but de votre formulaire est-il intéressant pour vos visiteurs ? Que leur donnez-vous en échange de leurs informations personnelles ?
- Où ? A quel endroit est positionné votre formulaire ? Comment apparaît-t-il ?
- Quand ? A quel moment de leur navigation sur le site les internautes accèdent-ils au formulaire ?
- Pourquoi devrais-je donner mes informations personnelles ?
- Qu’est-ce que je gagne à remplir ce formulaire ?
- Que va-t-il se passer si je complète le formulaire ?
- Puis-je faire confiance à ce site ?
2. Quel taux de conversion viser pour mon formulaire ?
Pour vous donner une idée du taux de conversion moyen en fonction du type de formulaire, voici quelques chiffres issus d’une étude réalisée par Formstack :![formulaire : optimiser la conversion](/sites/default/files/uploads/Graph11-1024x541.png)
3. 16 étapes pour optimiser vos formulaires
Quelle est la bonne longueur pour un formulaire ?
Vous avez certainement déjà entendu ce principe bien connu : « less is more ». On peut lire dans de nombreux articles que plus le formulaire est court, plus le taux de conversion est élevé. En effet, de nombreux tests démontrent cette hypothèse. Pourtant, il ne s’agit pas d’une vérité absolue et la quantité de leads obtenus n’en garantit pas la qualité. Le nombre de champs dépend du but de votre formulaire. Si vous voulez faire une enquête ou enregistrer un paiement, vous demanderez forcément plus d’informations aux internautes que s’il s’agit d’une prise de contact ou d’un concours.![taux de conversion et champs du formulaire](/sites/default/files/uploads/GRAPH-1024x404.png)
- Ne gardez que les champs essentiels.
- Utilisez des champs conditionnels, c’est-à-dire qui s’affichent seulement une fois un autre champ rempli.
- Avertissez clairement les internautes qu’ils ne sont pas obligés de remplir les champs optionnels.
- Réunissez les questions liées pour obtenir une meilleure visibilité.
![test a/b formulaire](/sites/default/files/uploads/Capture-d’écran-2018-09-26-à-10.22.18.png)
Réduire la taille d’un formulaire ne conduit pas toujours à une augmentation des conversions. Un formulaire à 5 entrées libres peut moins convertir qu’un formulaire à 10 champs de type menus déroulants. Pour le découvrir, rien de tel qu'un test A/B ! -Frédéric de Todaro, Head of Consulting, Kameleoon.
Formulaire en colonne ou formulaire par étape, que choisir ?
Intimement lié à la longueur, parlons maintenant de la forme du formulaire : en colonne ou sur plusieurs pages, quelle forme convertit le mieux ?![optimisation formulaire 1 colonne](/sites/default/files/uploads/visuel2.png)
- Les champs à remplir sont regroupés par catégorie ce qui rend la progression des internautes plus naturelle.
- La barre de progression permet de guider les internautes
- Les formulaires en plusieurs étapes sont moins chargés et laissent plus de place au design : images, grands titres, barre de progression…
![Formulaire en une colonne](/sites/default/files/uploads/visuel-blog-formulaire_visuel6-2-1024x576.png)
Utiliser des éléments visuels pour guider les internautes
En matière de design, et comme pour tous vos autres supports sur le web, l’important est de respecter la hiérarchie visuelle : elle permet de guider vos visiteurs durant la lecture et de mettre en évidence les éléments importants de la page. Plusieurs éléments sont à étudier lorsque l’on aborde la question du design :- Jouer sur le contraste des couleurs
- Utiliser des éléments visuels (flèches ➡ , symbole de validation ✔, CTA ? )
- Mettre des images, des illustrations
- Aérer le formulaire avec des espaces négatifs (espaces vides)
![conversion et design du formulaire](/sites/default/files/uploads/Capture-d’écran-2018-09-28-à-15.24.21.png)
Adapter les champs du formulaire aux réponses
Sur un formulaire, les internautes peuvent répondre de deux manières : en écrivant dans un champ ou en sélectionnant des réponses.Champs à remplir
Deux recommandations sont à garder à l’esprit concernant les champs à remplir :- Ajustez la taille des champs en fonction de l’information demandée
![taille des champs et conversion](/sites/default/files/uploads/Sans-titre-7-1024x268.png)
- Utilisez un système de focus (cadre de couleur quand l’internaute clique sur un champ) qui permet aux internautes de se repérer dans le formulaire
![focus des champs et conversion](/sites/default/files/uploads/Capture-d’écran-2018-09-27-à-18.08.20.png)
Réponses à sélectionner
Si vous proposez des réponses à sélectionner dans votre formulaire, plusieurs solutions sont possibles :- Les boutons radio
- Les cases à cocher (plusieurs choix possibles)
- Les menus déroulants
- Le remplissage automatique des champs (possible avec des navigateurs comme Google Chrome ou Firefox).
![boutons de sélection formulaire](/sites/default/files/uploads/bloggif_5bb77be02bf01.gif)
- S’il n’y a que quelques réponses possibles (entre 2 et 6), choisissez les boutons radio ou les cases à cocher.
- Si vous avez plus de 6 réponses possibles, optez pour le menu déroulant ou le remplissage automatiques de champs. La meilleure solution reste le remplissage automatique car les menus déroulants perturbent la navigation des utilisateurs.
Choisir un titre pour votre formulaire
Le titre est le premier élément que rencontrent les internautes et qui leur donne envie (ou non) de compléter le formulaire. Vous devez toujours garder à l’esprit qu’un formulaire est un échange : les internautes vous livrent des informations personnelles et vous devez leur offrir quelque chose qui a de la valeur : téléchargement de ressources, offre promotionnelle, etc.![pourquoi améliorer le titre d'un formulaire](/sites/default/files/uploads/Capture-d’écran-2018-09-28-à-11.53.42-1024x597.png)
![optimiser le titre de mon formulaire](/sites/default/files/uploads/Capture-d’écran-2018-09-26-à-18.03.31-1024x259.png)
Où placer le libellé des champs ?
L’une des frictions les plus courantes vient de la place des libellés dans le formulaire puisque cela perturbe la progression des internautes s’ils ne sont pas positionnés au bon endroit. Mais quel est le bon endroit ? UX Matters a mené une étude pour observer le déplacement des regards d’utilisateurs alors qu’ils étaient occupés à remplir un formulaire. En proposant trois types de formulaire, ils ont pu déterminer lequel était le plus naturel pour les internautes. Les résultats montrent que la meilleure position pour les libellés est au-dessus du champs et alignés à gauche car c’est la seule disposition qui permet aux utilisateurs de voir le libellé et le champ en même temps.![libellé des champs et conversion](/sites/default/files/uploads/Capture-d’écran-2018-10-03-à-10.51.46.png)
![placeholder formulaire et conversion](/sites/default/files/uploads/visuel-blog-formulaire_visuel6-1024x459.png)
![libellé flottant et conversion](/sites/default/files/uploads/bloggif_5bb731e9dd47c.gif)
Comment optimiser le CTA de votre formulaire ?
Le bouton d’incitation à l’action (CTA) est l’élément final de votre formulaire et doit donc rassurer les internautes : ce n’est pas le moment de faire marche arrière. Concernant l’aspect visuel du CTA, choisissez une couleur qui contraste avec le reste du formulaire pour pouvoir être repéré du premier coup d’œil, comme ici avec nos formulaires de téléchargement de succès story.![optimiser la conversion : texte CTA formulaire](/sites/default/files/uploads/CTAformulaire-1024x687.png)
![Exemple de texte CTA](/sites/default/files/uploads/visuel-blog-formulaire_visuel5-1-1024x555.png)
Quelles informations demander à vos visiteurs ?
Il ne faut garder que les champs essentiels. Mais quels sont les champs essentiels me direz-vous ? Les informations que vous demandez doivent être en adéquation avec ce que vous proposez :- Avez-vous déjà ces informations ? Pouvez-vous les obtenir autrement ?
- Ces informations sont-elles utiles ? Si vous ne comptez pas appeler les internautes, ne demandez pas leur numéro de téléphone, si vous n’envoyez pas de courriers, ne demandez pas l’adresse postale, etc.
Les champs à bannir :
- La confirmation de mot de passe : Ne demandez pas aux internautes de remplir deux fois leur mot de passe mais proposez de l'afficher pour vérifier qu’ils n’ont pas commis d’erreurs de frappe.
![champ mot de passe et conversion](/sites/default/files/uploads/motdepasse-1.gif)
- La validation par captcha : Quelle meilleure façon de dire à vos visiteurs que vous avez un problème de spam ? Outre ce fait, le système peut s’avérer très décourageant lorsqu’après plusieurs tentatives, le site vous affiche un nouveau code à recopier. Si vous ne voulez pas vous passer d’un outil de vérification, optez pour des alternatives plus ludiques (choisir une image, jeux) ou pour le captcha en un clic de Google.
![capcha google et conversion](/sites/default/files/uploads/Captcha_google_checkbox.gif)
Bannir les formats de réponse imposés
Quoi de plus énervant que de devoir respecter un format précis pour entrer une réponse ? Qu’il s’agisse du numéro de téléphone, de carte de crédit ou de la date d’anniversaire, laissez les internautes séparer les chiffres par des points, des slash ou des espaces et acceptez tous les formats pour les dates (JJ/MM/AA ou MM/JJ/AA). Même combat concernant les majuscules :![auto correction formulaire et conversion](/sites/default/files/uploads/Capture-d’écran-2018-09-27-à-14.56.11-1024x242.png)
![masque de saisie et conversion](/sites/default/files/uploads/bloggif_5bb730b4074d8.gif)
Aider vos visiteurs au remplissage des champs
Pour faciliter la tâche à vos visiteurs et réduire le nombre de champs à remplir manuellement, voici quelques astuces :- Proposez de se connecter avec les réseaux sociaux. Précisez néanmoins qu’aucune publication ne sera mise en ligne sans leur accord.
![booster la conversion : connexion via réseaux sociaux](/sites/default/files/uploads/Capture-d’écran-2018-09-28-à-11.39.23-1024x828.png)
- Pour le paiement en ligne, proposez aux internautes d’enregistrer leur carte pour qu'ils puissent payer en un clic la prochaine fois.
![enregistrer CB pour améliorer la conversion](/sites/default/files/uploads/Capture-d’écran-2018-10-03-à-09.44.27-1024x948.png)
- Proposez un calendrier où les internautes peuvent se déplacer de mois en mois et sélectionner une date.
![calendrier dynamique et conversion](/sites/default/files/uploads/Capture-d’écran-2018-09-28-à-12.07.44-1024x381.png)
- Utilisez des solutions de recherches prédictives : il suffit d’entrer une lettre pour que des choix de réponses apparaissent.
![optimiser expérience utilisateur avec la recherche prédictive](/sites/default/files/uploads/bloggif_5bb734501f503.gif)
- Appuyez-vous sur l’auto remplissage des champs grâce aux navigateurs (Google Chrome, Firefox…). Il faut pour cela choisir des libellés qui correspondent à ceux du navigateur et la réponse enregistrée est proposée à l’internaute lorsqu’il clique dans le champ.
![auto remplissage des champs et conversion](/sites/default/files/uploads/smart-autofill.png)
- Mémorisez les informations que vous possédez déjà sur vos visiteur et pré-remplissez les champs pour lesquels vous possédez déjà les informations. Si vous avez déjà téléchargé des ressources sur Hubspot, vous avez pu noter que les informations enregistrées lors d’un premier contact ont été sauvegardées pour pré-remplir les champs. Cette méthode permet aussi de remplacer des champs déjà remplis par d’autre pour obtenir de nouvelles informations.
![pré remplissage des champs et conversion](/sites/default/files/uploads/Capture-d’écran-2018-10-02-à-12.00.50-1024x643.png)
Valider ou corriger les réponses de vos visiteurs en temps réel.
Quoi de plus énervant que de voir des messages d’erreur s’afficher après avoir validé ses réponses ? Vous alliez obtenir ce pourquoi vous avez complété le formulaire et… retour à la case départ. Pour résoudre ce problème, il suffit de mettre en place un système de validation ou de correction en temps réel. Ainsi, dès qu’un champ est rempli, un signal visuel indique à l’internaute si sa réponse convient ou non.![validation visuelle des réponses sur un formulaire](/sites/default/files/uploads/bloggif_5bb736217dd34.gif)
- Affichez des ❓ à côté des champs où vous voulez aider les visiteurs
![Eviter les erreurs](/sites/default/files/uploads/image_preview-1024x132.png)
- Afficher des encarts visibles sans avoir à cliquer sur un bouton
![optimisation de la conversion : formulaire mad lib](/sites/default/files/uploads/image_preview-2-1024x321.png)
Utiliser des formulaires ludiques
Malgré toutes les optimisations possibles, certains internautes seront toujours réticents pour remplir un formulaire. Pourquoi ne pas tester une forme plus ludique ?Mad lib :
Vous rappelez-vous de l’époque où votre professeur vous proposait des textes à trous pour vos exercices de grammaire ? Il n’y avait que quelques mots à écrire et cela était beaucoup plus simple… Vous voyez où je veux en venir ? Le but est de rendre votre formulaire plus vivant et interactif comme le fait le site de partage audio Huffduffer :![Formulaire mad lib](/sites/default/files/uploads/Capture-d’écran-2018-09-28-à-10.38.23-1024x394.png)
Chatbot :
Jetons maintenant un œil à une campagne menée par Meetic pour transformer plus de visiteurs en clients : l’usage d’un formulaire camouflé et interactif par le biais d’un chatbot. Le chatbot est une fonctionnalité adaptée au contexte car il permet aux visiteurs de discuter avec Lara, qui les accompagne dans la création de leur compte et les rassure en répondant à leurs questions.![booster taux de conversion : formulaire chatbot](/sites/default/files/uploads/1_KmRCXk3gM7aY1S1YSqShNQ-1024x708.png)
Diffuser le formulaire à la bonne cible
Lorsque vous proposez un formulaire à vos visiteurs, vous recherchez soit à collecter un maximum de données, soit à récolter des leads qualifiés (quantité vs qualité).Obtenir un maximum de contact :
Si votre but est de partager votre formulaire au plus grand nombre :- Faîtes en sorte de rendre votre formulaire accessible depuis toutes les pages de votre site : utilisez les barres latérales, les encarts de haut de page (header) ou de bas de page (footer) ou des pop-in.
- Créez une landing page et partagez-la sur les réseaux sociaux pour atteindre les internautes qui ne sont pas sur votre site.
Obtenir des leads qualifiés :
Vous pouvez choisir de faire apparaître le formulaire à un public en particulier grâce au ciblage de votre audience. Avec cette méthode, le but est d’obtenir des leads plus qualifiés. C’est notamment ce qu’a entrepris Routard.com qui voulait augmenter le nombre d’inscription à sa newsletter tout en la dirigeant vers des contacts vraiment intéressés et non pas à l’ensemble des visiteurs. Initialement, le formulaire s’affichait en bas de page dans le footer. Désormais, il s’affiche sous forme de pop-in uniquement aux visiteurs ayant consulté au moins 3 pages.![formulaire : obtenir des leads qualifiés avec un bon ciblage](/sites/default/files/uploads/Capture-d’écran-2018-09-27-à-15.54.14.png)
Optimiser le formulaire sur mobile
Comme pour votre site web, vous devez adapter le format de vos formulaires pour les appareils mobiles. Ce n’est plus un secret pour personne : aujourd’hui plus de 60 % du trafic d’un site a lieu sur mobile (SalesForce Report). De nombreux éléments peuvent perturber la navigation sur mobile si votre formulaire n’est pas adapté : texte trop petit, menus compliqués, contenu non-centré, etc.![formulaire : optimiser la conversion sur mobile](/sites/default/files/uploads/visuel-blog-formulaire_visuel7-1024x703.png)
- Adaptez la taille des champs et des boutons de votre formulaire : ils doivent être cliquables avec le doigt !
![optimiser la taille des champs sur mobile](/sites/default/files/uploads/visuel-blog-formulaire_visuel8-1024x608.png)
- Optimisez le clavier des utilisateurs en ajoutant des raccourcis sur le clavier principal : caractères spéciaux pour l’adresse e-mail, clavier à chiffres pour les réponses chiffrées , sélection de date, etc.
![optimisation mobile pour la saisie et conversion](/sites/default/files/uploads/Sans-titre-10-1024x642.png)
- Simplifiez la saisie au maximum : proposez aux internautes de se connecter avec les réseaux sociaux, utilisez des solutions d’auto-remplissage, proposez la géolocalisation pour l’adresse ou la prise de photo pour joindre des documents ou renseigner les chiffres de carte bancaire.
![formulaire : simplifier la saisie sur mobile](/sites/default/files/uploads/MOBILES-1024x658.png)
Anticiper les inquiétudes de vos visiteurs
Remplir un formulaire, c’est une forme d’engagement, et si vos visiteurs ne se sentent pas en sécurité ils se détourneront immédiatement. Pour rassurer vos visiteurs, l’idéal est d’insérer un lien vers votre politique de confidentialité. Vous pouvez également inclure une phrase leur indiquant qu’ils ne recevront pas de spam.![Anticiper les inquiétudes](/sites/default/files/uploads/Capture-d’écran-2018-09-27-à-17.07.20.png)
Utiliser le social proof pour convaincre vos visiteurs
Avant d’être un levier marketing, le social proof est un puissant phénomène sociologique. Il s’agit du fait qu’un individu est fortement influencé par le comportement et les choix du plus grand nombre. Si l’on en revient aux formulaires, vous pouvez par exemple mettre en avant le nombre d’abonnés à votre newsletter pour défendre sa qualité ou le nombre d’acheteur d’un produit pour le mettre en avant.![social proof et taux de conversion](/sites/default/files/uploads/image_preview-3-1024x355.png)
4. A/B testez vos formulaires !
![A/B testing](/sites/default/files/uploads/image_preview-4-1024x321.png)
- Quels champs causent le plus de rebond ?
- Quels sont ceux qui génèrent le plus d’erreurs ?
- Quels sont les plus longs à compléter ?
- Lesquels doit-on rendre obligatoires ?
Autant de questions que de réponses que vous obtiendrez via votre audit.
Dernier conseil du jour : Remettez toujours en question ce que vous faites, même si ça fonctionne. Les goûts et les tendances évoluent, si votre page convertit aujourd’hui, ce ne sera peut-être plus le cas demain. Grâce à notre éditeur graphique intelligent pour l'A/B testing, faire des modifications sur vos formulaires sera simple et rapide. Et si les formulaires vous effraient, vous pouvez toujours nous passer un coup de fil ! Et vous ? Avez-vous des bonnes pratiques à partager ? N’hésitez pas à partager vos réussites, vos échecs et comment vous les avez surmontés dans la zone de commentaires !