10+ Meilleurs exemples de formulaires à plusieurs étapes et pourquoi ils fonctionnent
Mise à jour 2023 : nous avons ajouté d’autres exemples de formulaires en plusieurs étapes, supprimé d’anciens exemples et mis à jour certains liens.
La puissance des formulaires à plusieurs étapes n’est pas un secret – un bon formulaire à plusieurs étapes peut augmenter votre taux de conversion de plus de 100 % dès le départ.
Selon Klientboost, une agence de premier plan spécialisée dans l’optimisation des taux de conversion (CRO), il s’agit de l’une des expériences de CRO ayant le plus d’impact que vous puissiez mener actuellement.
De plus, les formulaires à plusieurs étapes vous permettent de poser plus de questions sans que vos utilisateurs ne se lassent, ce qui vous permet de collecter des prospects plus détaillés et plus qualifiés.
Mais comment savoir à quoi ressemble un bon formulaire en plusieurs étapes ?
Nous avons passé des années à construire et à étudier ces formes, et nous avons rassemblé nos 10 meilleurs exemples de formes à plusieurs étapes sur Internet.
Il n’y a aucun doute : ces formulaires à plusieurs étapes convertissent comme des fous.
Table des matières
11 – “Post a job?”, par Khoros
Ce formulaire de Khoros n’entre que de justesse dans la liste, mais nous tenions à souligner quelques éléments UX qui nous ont séduits :
Ce que nous avons aimé :
- La progression entre les différentes étapes est évidente.
- Les étapes s’allongent au fur et à mesure que le formulaire progresse (en raison de l’erreur des coûts irrécupérables).
Ce que nous testerions :
- Le fait de demander l’adresse électronique dès la première étape constitue une menace assez élevée et pourrait rebuter certains visiteurs. Nous devrions plutôt essayer de placer l’adresse électronique en dernier et de recibler les visiteurs qui n’ont pas franchi la première étape.
- Le formulaire transmet mal la valeur : “Êtes-vous prêt pour une démonstration ?” est un titre peu convaincant.
En plus d’être un bon exemple de formulaire en plusieurs étapes, il s’agit également d’un bon exemple d’onboarding axé sur le produit.
10 – “Want more SEO traffic ?”, par Neil Patel
Il n’est pas surprenant que Neil Patel fasse partie de la liste – il est une puissance marketing depuis des années, et ne laisse jamais un seul visiteur ou une seule opportunité de conversion se perdre !
Neil et son équipe nous donnent une bonne raison de commencer à remplir le formulaire en plusieurs étapes : un plan d’action SEO de 7 semaines, livré directement dans notre boîte de réception.
La première information qui nous est demandée est notre site web – une demande agréable et peu contraignante, puisqu’elle sera nécessaire pour fournir le rapport gratuit.
Remarquez que le formulaire pose souvent des questions sur les avantages que nous espérons recevoir et que la collecte d’informations est toujours justifiée :
Ce que nous avons aimé :
- Un design très épuré
- Excellente justification de la collecte des données
- Les questions permettent à la fois de rassurer l’utilisateur et de fournir des informations utiles sur le budget et la qualification.
Ce que nous testerions :
- Demander un numéro de téléphone est un peu effronté, mais nous parions que cela a été testé !
Vous souhaitez créer un formulaire de ce type ? Growform rend les choses faciles – essayez un essai gratuit 14 jours d’essai gratuit .
9 – “2 steps away”, par TeamGantt
Plutôt qu’un formulaire d’enregistrement autonome, ce formulaire semble faire partie intégrante du produit. L’arrière-plan flou montre clairement qu’il n’y a qu’une seule chose qui se trouve entre vous et votre nouveau diagramme de Gannt, et que vous devez le faire maintenant.
Les rédacteurs savaient aussi ce qu’ils faisaient – chaque information que vous donnez a un but et un avantage clairs – par exemple, lors de l’ajout d’un mot de passe, “Protégez votre compte avec un mot de passe et obtenez un planning” :
Ce que nous avons aimé :
- Belle validation en ligne. Il n’y aura pas de barrage de messages d’erreur à la fin du formulaire !
- Une microcopie forte et axée sur les avantages
- Un design épuré, simple et réfléchi
Ce que nous testerions :
- Les utilisateurs qui s’inscrivent à votre produit sont assez motivés. TeamGantt aurait probablement pu s’en tirer en demandant plus d’informations entre les étapes 1 et 2.
8 – Devis d’assurance facile de Lemonade.com
Nous sommes partagés sur les formes conversationnelles. Mal exécutées, elles peuvent être perçues comme condescendantes, déplacées et… tellement 2017.
Mais s’ils sont bien utilisés, ils peuvent transformer votre site web en une expérience et faire en sorte qu’une marque vous parle littéralement – comme une armée de vendeurs sympathiques et accessibles.
Si tout cela vous semble absurde, jetez un coup d’œil à cet exemple : Le formulaire conversationnel en plusieurs étapes de Lemonade :
Ce que nous avons aimé :
- Une approche fraîche et conversationnelle qui s’inscrit dans le cadre de la marque.
- Un bon rappel clair de l’avantage que l’utilisateur reçoit (“Je vous obtiendrai un prix exceptionnel en quelques minutes”).
- Bonne utilisation des champs de formulaire non standard, comme l’autocomplétion de l’adresse Google
- Les questions à haut risque sont les dernières (adresse électronique, date de naissance, cases à cocher pour les conditions d’utilisation).
Ce que nous testerions :
- Améliorer la perception de la progression au fur et à mesure que l’on franchit les étapes : il n’est pas évident de savoir s’il reste 4 étapes ou 40.
7 – L’onboarding stylé de Thread.com
L’équipe de Thread rend l’inscription à leur service simple, attrayante et amusante. L’interface utilisateur de ce formulaire est particulièrement soignée, avec des boutons et des champs clairs et précis.
On ne nous demande jamais trop d’informations, les chiffres étant demandés sous forme de fourchettes plutôt que de chiffres exacts.
Lorsque Thread veut connaître la couleur de nos yeux, il nous demande de toucher la représentation visuelle de la couleur, plutôt que de nous faire lire une longue liste :
Ce que nous avons aimé
- On nous explique exactement pourquoi chaque information est importante
- Le fait de remplir le formulaire a un résultat (lire : un avantage) clair : une nouvelle garde-robe !
- Excellente utilisation des composants sur mesure (sélecteurs de couleurs)
Ce que nous testerions
- La progression n’est pas évidente et le formulaire donne l’impression d’être “sans fin” – essayez une barre de progression ou des indicateurs.
- La validation doit indiquer à l’utilisateur l’endroit exact où il a oublié un champ, plutôt que de l’obliger à deviner.
6 – Offre spéciale Hello Fresh
Le formulaire de Hello Fresh est une leçon de copywriting et de conception de formulaire. Ils formulent clairement la proposition de valeur à l’étape 1, de manière à ce que les utilisateurs n’aient aucun doute sur ce que fait le service.
Les calculs effectués dans le formulaire lui-même indiquent à l’utilisateur le montant exact des économies réalisées, ce qui l’incite à augmenter son panier :
Ce que nous avons aimé
- Il s’agit d’un formulaire complexe bien conçu – l’utilisateur pourrait choisir parmi 12 combinaisons de “nombre de personnes” et de “recettes par semaine”, mais il n’y a pas de surenchère.
- L’équipe de Hello Fresh a certainement testé des remises et sait ce qui fonctionne.
Ce que nous testerions
- Nous serions tentés d’essayer des représentations visuelles des boîtes : “recettes par semaine” pourrait très bien se prêter à une illustration montrant les différences entre les cases.
- Sur mobile (probablement plus de 50 % de leur trafic), il n’y a pas de représentation graphique de ce qu’est une boîte à recettes – ce qui peut entraîner un manque de clarté et une baisse des taux de conversion.
5 – “Commençons à embaucher”, par Toptal
Ce formulaire existe depuis quelques années, et c’est en fait l’un des premiers formulaires qui nous a inspirés. Il apparaît en surimpression de l'”intention de sortie”, comme une ultime tentative pour inciter les utilisateurs à s’engager.
Il est clair, accessible et comporte une excellente barre de progression qui rassure l’utilisateur sur le fait qu’il se rapproche de la fin. Les logos des clients en niveaux de gris renforcent la crédibilité de la marque sans être trop distrayants :
Ce que nous avons aimé
- Un formulaire simple et efficace à plusieurs étapes avec de belles transitions et un design solide
Ce que nous testerions
- La raison pour laquelle Toptal nous demande des informations à chaque étape n’est pas toujours claire.
- Le texte de fermeture sarcastique (“Non merci – je n’embauche pas”) nous rappelle ces fenêtres contextuelles agaçantes –“Non, je déteste économiser de l’argent ! Nous n’avons pas encore vu d’étude montrant que ces fenêtres améliorent le taux de conversion. Un simple “X” dans le coin supérieur droit suffirait donc.
4 – Le générateur de conditions générales de Termly
L’un des grands avantages des formulaires à plusieurs étapes est qu’ils permettent de réduire une demande d’informations écrasante, presque ingérable, en quelque chose de presque joyeux.
Il n’y a rien de plus aride et de plus difficile à gérer que de poser des questions juridiques pour générer une politique de conditions générales – et Termly a fait un excellent travail.
Il est agréable de présenter un formulaire aussi complexe, car nous savons que la plupart des formulaires seront beaucoup plus faciles et simples à construire que celui-ci !
Ce que nous avons aimé
- Hiérarchie claire des informations.
- Des résultats clairs (l’utilisateur peut voir un aperçu de son document au fur et à mesure qu’il progresse).
- Une interface utilisateur agréable, simple et cohérente.
Ce que nous testerions
- Ajoutez une validation au formulaire pour vous assurer que les utilisateurs remplissent chaque étape au fur et à mesure qu’ils progressent. Le fait de forcer les utilisateurs à tout faire à la fin augmente le risque de distraction.
- Nous nous attendons à ce que les éléments situés à gauche de la page deviennent une “liste de contrôle” au fur et à mesure que l’utilisateur progresse dans le formulaire.
Ce que nous testerions
- Il n’est pas possible de revenir en arrière, ce qui gênera un petit pourcentage d’utilisateurs.
- La mention “Presque là” comme CTA est ludique et donne une impression de progrès, mais ne permet pas de savoir ce que fait le bouton. Nous remplacerions ce bouton par un bouton cohérent et ajouterions une barre de progression.
3 – “Trouver le professionnel idéal”, par Bark
Le secteur de la construction n’est pas réputé pour construire de belles formes, ce qui rend peut-être la forme en plusieurs étapes de Bark si merveilleusement rafraîchissante. Bark s’est emparé d’un secteur jonché de sites web non réactifs et difficiles à utiliser et a créé quelque chose de magnifique.
Ce formulaire sur mesure fait bon usage de l’autocomplétion, de la recherche de codes postaux, etc. Même l’effet d’assouplissement de la barre de progression est un délice !
Ce que nous avons aimé
- Une interface propre et agréable
- Un sens aigu du progrès
- Pratiquement sans distraction
- Il se passe beaucoup de choses sous le capot ici : ce formulaire est très certainement chargé à partir d’un backend qui fournit la bonne question à poser ensuite – astucieux !
Ce que nous testerions
- Il serait agréable de voir une meilleure utilisation de l’iconographie / des images, mais nous comprenons pourquoi elles n’ont pas été incluses !
- Il est difficile de suggérer quoi que ce soit d’autre – c’est presque la perfection de la forme en plusieurs étapes !
2 – KlientBoost : “Quel est votre besoin d’aide ?”
Klientboost a été l’un des premiers défenseurs de la forme en plusieurs étapes, il n’est donc pas surprenant qu’ils figurent sur cette liste.
Dans ce formulaire, un copywriting intelligent rencontre un design magnifique – c’est un exemple stupéfiant – l’un des meilleurs formulaires à étapes multiples que nous ayons vus :
Ce que nous avons aimé :
- Des titres et des textes clairs, axés sur les avantages. Le formulaire demande aux utilisateurs comment il peut les aider, et non l’inverse. Elle suit le principe du quid pro quo.
- Utilisation intelligente de la technologie pour pré-remplir les informations lorsque cela est possible.
- Permet aux utilisateurs de se retirer s’ils préfèrent appeler. Si nous connaissons Klientboost, ces appels seront également suivis.
Ce que nous testerions :
- Nous sommes prêts à parier que quelques visiteurs ont tapé leur nom dans l’adresse électronique, pour finalement la voir invalidée. Envisagez d’utiliser une case “prénom + nom” ou de ne demander que le prénom.
1 – “Construisez votre Boxt”, par Boxt
Si vous avez déjà essayé de commander un chauffe-eau de remplacement, vous savez à quel point cela peut être frustrant. Vous pouvez passer des heures à demander des devis à des installateurs et à les relancer pour obtenir des dates de livraison. Boxt a changé tout cela, en rendant la commande d’une nouvelle chaudière super facile grâce à son formulaire en plusieurs étapes.
Nous apprécions la façon dont ce formulaire fournit “juste assez” d’informations en un coup d’œil pour paraître simple et intuitif – tout en fournissant toujours plus d’informations à un clic, un tapotement ou un survol de la souris.
Il est clair que l’équipe s’est penchée sur chaque partie du processus, éliminant les frictions et les doutes dans la mesure du possible et apportant de la clarté. Boxt va à contre-courant en affichant un prix “sur le mur” dans sa forme, plutôt qu’un prix qui augmentera plus tard.
Un grand coup de chapeau à Zone Digital, qui a créé ce formulaire !
Ce que nous avons aimé
- Il s’agit d’un formulaire en plusieurs étapes, le meilleur de sa catégorie. Il est clair et facile à parcourir, pose des questions sensées et pertinentes et montre bien les progrès de l’utilisateur.
- Parfaitement réactif – aussi bien sur tablette que sur mobile
- Il s’agissait d’un effort global : Boxt aurait pu créer un fantastique formulaire en plusieurs étapes, mais il n’en aurait pas moins eu des prix mystérieux ou pas de commentaires. Ils ont systématiquement travaillé sur chaque élément de leur proposition de valeur pour offrir une expérience de premier ordre.
Ce que nous testerions
- Plutôt que de demander à l’utilisateur de saisir la “première partie” de son code postal, envisagez d’obtenir le code postal complet et de le diviser pour lui.
- C’est tout !
Vous avez besoin de votre propre formulaire en plusieurs étapes ?
Si ces formulaires vous ont inspiré, vous vous demandez peut-être comment créer votre propre formulaire en plusieurs étapes.
Les formulaires à plusieurs étapes sont traditionnellement très difficiles à construire : si l’on tient compte des règles de validation, des intégrations et de la maintenance, ils peuvent coûter des milliers de dollars en développement personnalisé.
Heureusement, Growform facilite la création de formulaires en plusieurs étapes, sans qu’aucun développeur ne soit nécessaire :
Cet outil a été conçu pour vous aider à créer des formulaires performants en plusieurs étapes. Il est même proposé avec une version d’essai gratuite de 14 jours.