17 éléments clés pour un formulaire de page de destination à haute conversion [prouvé]

Dans quelle mesure les formulaires de page de destination peuvent-ils avoir un impact sur vos résultats ?

Regardons Expedia : en 2010, Expedia a découvert qu'un champ de formulaire facultatif intitulé « Société » lui coûtait 12 millions de dollars par an.

Quoi?!

Ouais.

Les visiteurs qui appuyaient sur le bouton "Réserver maintenant" remplissaient un champ optionnel "Société" avec le nom de leur banque, puis ajoutaient l'adresse de leur banque au lieu de leur adresse personnelle, entraînant ainsi des centaines de transactions échouées.

Après avoir supprimé le champ de formulaire supplémentaire, les ventes ont grimpé en flèche du jour au lendemain.

Ouais.

En ce qui concerne les formulaires de page de destination, de petits accidents contribuent constamment à des conversions massives.

C'est l'une des raisons pour lesquelles les formulaires de page de destination sont l'un des éléments les plus étudiés de tout le marketing.

Bonne nouvelle : après des années de conception de pages de destination et d'optimisation de la conversion, nous avons distillé le formulaire de page de destination parfait en 17 éléments basés sur des données. Dans cet article, nous allons détailler comment optimiser chacun (avec des exemples).

Obtenez-les correctement et vous avez de l'or de conversion.

Si vous vous trompez, vous pourriez vous retrouver avec des conversions hémorragiques comme Expedia.

Tout d'abord, avant de passer aux bonnes pratiques et aux exemples, dissipons toute confusion quant à savoir si toutes les pages de destination ont besoin ou non de formulaires.

Réponse courte : Oui et non.

Laisse-moi expliquer…

Deux types de landing pages existent : les pages de capture de leads et les pages de clics.

Les pages de capture de leads (pages de génération de leads AKA) incluent des formulaires directement sur la page de destination. Après tout, sans formulaire, comment allez-vous capturer les informations sur les prospects afin que les ventes puissent suivre ?

Par exemple, la page de destination de l'automatisation du marketing de Blueshift comporte un formulaire de contact demandant des informations de contact. Une fois que les prospects ont soumis leurs informations de contact, l'équipe commerciale de Blueshift assurera le suivi du prospect pour planifier une démonstration. Simple.

Les pages cliquables, en revanche, n'incluent pas de formulaires sur la page de destination. Au lieu de cela, lorsque vous cliquez sur un bouton d'appel à l'action (CTA), il ouvre (ou clique sur) une page de conversion où les prospects peuvent atteindre votre objectif de conversion immédiatement (c'est-à-dire qu'aucune information de prospect n'est nécessaire).

Par exemple, Norton utilise une page de destination de clics pour réchauffer les prospects avant de vendre leur logiciel antivirus. Étant donné que les prospects peuvent acheter directement sur le site Web (aucune équipe de vente n'est nécessaire), ils n'ont pas besoin d'un formulaire de contact.

Donc, en ce qui concerne les formulaires sur les pages de destination, techniquement, seules les pages de capture de prospects incluent des formulaires.

Cependant, même si une page de destination n'inclut pas de formulaire sur la page de destination, il est fort probable qu'elle redirige vers une page qui en contient, comme une page de création de compte, une page d'inscription ou une page de paiement.

Par exemple, même la page de clic de Norton inclut éventuellement un formulaire de paiement :

À emporter : toutes les pages de destination n'incluent pas de formulaires, mais à un moment donné, chaque chemin de conversion passe par un formulaire. Vous ne pouvez pas les éviter. Et à tout le moins, chaque site Web a besoin d'un formulaire de contact. Alors écoutez !

Sans plus tarder, explorons les 17 éléments d'une conception de formulaire de page de destination à conversion élevée (sans ordre particulier) :

1. Mise en page du formulaire
2. Technique du fil d'Ariane (multi-étapes)
3. Indicateurs de progrès
4. nombre de champs
5. Étiquettes de champ
6. Texte d'espace réservé
7. Cliquez sur les déclencheurs
8. Microcopie
9. Appel à l'action (CTA)
10. Formulaire contextuel vs intégration
11. Remplissage automatique
12. Format automatique
13. La preuve sociale
14. Obligatoire vs facultatif
15. Adapté aux mobiles
16. Logique conditionnelle
17. Boutons radio vs listes déroulantes

En ce qui concerne les formulaires, vous disposez de trois options de mise en page : colonne simple, colonne double ou hybride.

Un formulaire à une seule colonne est un formulaire linéaire avec des champs de formulaire organisés en ligne droite de haut en bas. Par exemple, ce formulaire de contact d'Hellosign présente une mise en page à une seule colonne :

Un formulaire à double colonne, en revanche, comporte deux colonnes de champs de formulaire organisés en rangées de haut en bas. Par exemple, ce formulaire de prospect de Hubspot présente une disposition à deux colonnes :

Et enfin, un formulaire hybride est un formulaire avec à la fois des colonnes simples et des colonnes doubles. Par exemple, ce formulaire Oscar présente une mise en page hybride :

Pendant des années, les formulaires à une seule colonne ont été considérés comme la meilleure disposition de formulaire pour des conversions plus élevées.

Par exemple, Peep de CXL a déclaré dans le passé que les formulaires à une seule colonne étaient plus performants que les formulaires à deux colonnes. Ben Labay (designer UX et directeur marketing de Speero) a même publié une étude déclarant que les formes linéaires étaient plus rapides et donc meilleures.

Mais tout le monde n'est pas d'accord.

Par exemple, Hubspot a testé le formulaire à une colonne et a découvert que leur formulaire à double colonne surpassait de 57 % leur formulaire à colonne unique.

Pourquoi? Plus de champs de formulaire.

Le formulaire de Hubspot comporte 13 champs de formulaire ; une mise en page à une seule colonne semblait et se sentait intimidante. C'est probablement pourquoi la forme plus courte à double colonne a converti plus haut.

À retenir : En ce qui concerne la mise en page du formulaire, tenez compte du nombre de champs de formulaire avant de choisir une option.

Si vous avez huit champs de formulaire ou moins, un formulaire à une seule colonne peut mieux fonctionner. Il existe une tonne de preuves qui prouvent que les formulaires plus courts et à une seule colonne sont plus faciles et plus rapides à remplir car ils ne perturbent pas l'élan vertical de haut en bas.

Si vous avez plus de 10 champs de formulaire comme Hubspot, un formulaire à double colonne fonctionnera probablement mieux. Dans ce cas, le formulaire à double colonne rend la longueur du formulaire plus courte et moins écrasante.

Pour tirer le meilleur parti des deux mondes, expérimentez un formulaire hybride : utilisez quelques lignes à double colonne pour raccourcir le formulaire, mais quelques lignes à une seule colonne pour maintenir l'élan.

Et si vous voulez vraiment augmenter les conversions de formulaires, envisagez un formulaire à une seule colonne divisé en plusieurs étapes. Cela nous amène à notre point suivant…

Un formulaire en plusieurs étapes (AKA The Breadcrumb Technique) divise les longs formulaires en plusieurs étapes, chaque étape ne comportant pas plus de 3-4 champs de formulaire (de préférence dans une seule colonne).

Mais ce n'est pas tout.

Les formulaires en plusieurs étapes utilisent la psychologie comportementale pour micro-convertir les prospects d'une étape à l'autre en posant d'abord des questions faciles, en gardant les questions intimidantes pour la fin.

Hein?

La psychologie comportementale nous dit que les gens aiment terminer les choses qu'ils ont commencées. La magie de la technique du fil d'Ariane leur permet de commencer en posant d'abord des questions sur le softball.

Par exemple, notre propre formulaire de contact utilise un formulaire en plusieurs étapes divisé en quatre étapes. Mais au lieu de demander une adresse e-mail et un numéro de téléphone en premier (très intimidant), nous le demandons en dernier. En fait, les trois premières étapes posent des questions non menaçantes :

Résultats? Plus de conversions.

Regardons les données…

Nous avons converti le formulaire pour un de nos clients en deux étapes (et avons demandé le nom, le téléphone et l'e-mail en dernier). Ce faisant, nous avons obtenu :

• Une baisse du CPA de 800 $+ à 35 $
• Une augmentation du volume de conversion de 6 à 135/mois
• Une augmentation du taux de conversion de 1% à près de 20%

Voici le formulaire :

Et voici les résultats:

Nous avons fait de même avec un autre client et avons obtenu une augmentation de 74 % des conversions ainsi qu'une baisse de 51 % du CPA.

Mais nous ne sommes pas les seuls à utiliser des formulaires en plusieurs étapes. Les meilleures pages de destination de génération de leads et SaaS utilisent également des formulaires en plusieurs étapes.

Par exemple, le suivi des véhicules Lytx utilise un formulaire en plusieurs étapes sur sa page de destination :

Et ADP utilise un formulaire en plusieurs étapes sur sa page de destination :

À retenir : les seuls cas où les formulaires en plusieurs étapes n'ont pas été convertis plus que les formulaires en une étape concernaient les offres à faible valeur et à faible demande telles que les guides, les livres blancs ou les livres électroniques. Pour toutes les autres pages de destination standard de génération de leads (c'est-à-dire demander une démo ou une consultation gratuite), les formulaires en plusieurs étapes convertissent plus que les formulaires en une seule étape.

Si vous optez pour des formulaires en plusieurs étapes, n'oubliez pas les indicateurs de progression (surtout pour les formulaires plus longs).

Les indicateurs de progression (ou barres de progression), comme leur nom l'indique, utilisent des marqueurs visuels pour indiquer aux visiteurs où ils en sont dans le formulaire et combien de temps ils ont jusqu'à l'achèvement.

Par exemple, ADP indique la progression en numérotant chaque étape de son formulaire et en surlignant l'étape en cours en bleu :

Deux autres types de barres de progression incluent le pourcentage d'avancement et les étapes étiquetées (sans chiffres) :

Pourcentage achevé

Pas restants (pas de chiffres)

À emporter : lorsqu'il s'agit d'indicateurs de progrès, utilisez-les généreusement. Des études ont montré que la visualisation d'un chemin clair vers l'achèvement peut augmenter les conversions de formulaires et réduire l'abandon du panier. Enfin, n'oubliez pas de faciliter le basculement entre les étapes.

La question à un million de dollars : combien de champs de formulaire dois-je inclure dans mes formulaires de page de destination ?

Selon Hubspot, le formulaire de génération de leads typique se compose de cinq champs de formulaire :

Et selon Hubspot encore , plus le formulaire est long, moins les conversions sont importantes :

Cela semble logique, non ?

Pas si vite.

Oui, il est vrai que des champs de formulaire plus courts entraînent généralement des conversions plus élevées, mais pas toujours.

Par exemple, dans une célèbre expérience de Michael Aagaard (anciennement de Unbounce), il a découvert que la suppression de trois champs de formulaire (de 9 à 6) réduisait en fait les conversions de 14 %.

Qu'est-il arrivé? Michael a conclu que les trois domaines qu'il avait éliminés étaient en fait les trois domaines avec lesquels les prospects étaient le plus engagés. Il les a donc rajoutés et mis à jour la copie pour limiter les frictions à la place, et a connu une augmentation des conversions de 19 % par rapport à l'original.

Dans un autre exemple, CXL a découvert qu'en demandant simplement un e-mail, les conversions étaient inférieures de 13,56 % à celles lorsqu'ils demandaient également le nom, l'état et l'expérience de conduite :

En matière de génération de leads, si vous ne faites que supprimer des champs de formulaire, que reste-t-il à vos prospects ?

Soit rien d'autre que des questions intimidantes comme le nom, le numéro de téléphone et l'e-mail. Dans ce cas, la peur seule peut vous faire perdre des conversions.

Ou pas assez de questions pour que les prospects aient l'impression que vous allez répondre correctement à leurs questions.

De plus, des formulaires plus courts peuvent augmenter les conversions en réduisant les champs de formulaire, mais en même temps diminuer la qualité des prospects. Pas de bono.

À emporter : tout le monde s'accorde à dire que vous devez éliminer les champs de formulaire inutiles (c'est-à-dire les questions auxquelles vous n'avez pas besoin de réponses). Que vous deviez ou non ajouter plus de champs ou éliminer des champs dépend du contexte.

• Motivation : les prospects plus proches de l'achat ont une propension plus élevée à remplir des formulaires plus longs, car ils sont très motivés à acheter (c'est-à-dire que rien ne les gênera). Par exemple, si je veux une estimation de prêt hypothécaire, je remplirai 20 champs du formulaire pour la recevoir. Pas tellement pour un ebook gratuit.
• Objectif de conversion : un abonnement par e-mail ou une inscription à un webinaire à la demande nécessite beaucoup moins de champs qu'un formulaire de génération de prospects. Deux objectifs différents, deux tailles de formulaire différentes. Pas besoin de plusieurs étapes, un simple opt-in par e-mail.
• Qualité des prospects : si la qualité des prospects compte plus que le volume des prospects, ajoutez plus de champs de formulaire et collectez plus d'informations. Mais si la qualité des prospects n'a pas plus d'importance que le volume des prospects (c'est-à-dire que vous collectez des données de première partie pour créer une audience publicitaire personnalisée), alors moins de champs de formulaire pour la victoire.
• Structure : si vous faites une demande sérieuse, comme planifier une démonstration ou rencontrer un représentant commercial, un formulaire en plusieurs étapes est comme un code de triche. Vous pouvez vous en sortir en posant plus de questions simplement en les divisant en étapes plus petites.

Enfin, nous avons contacté Oli Gardner, PDG et fondateur d'Unbounce, pour obtenir ses commentaires sur la longueur du formulaire. Voici ce qu'il a dit :

"J'ai commencé avec la même mentalité que la plupart des gens, à savoir que moins de champs de formulaire fonctionnent mieux.

Du point de vue de la conversion, cela est toujours vrai. Mais vous seriez surpris de voir à quel point l'ajout de quelques champs supplémentaires peut avoir un impact sur les résultats.

Parfois, la longueur de la forme ne fait pas beaucoup de différence, et si vous êtes intéressé par la qualité plutôt que par la quantité, la friction supplémentaire peut être une bonne chose.

Mais choisissez ces champs avec soin, sinon la friction créera de fausses données.

Par exemple, j'ai vu un formulaire proposant un rapport sur une nouvelle technologie de paiement par puce et code PIN. Le formulaire comprenait un champ de bouton radio à côté de l'appel à l'action qui me demandait si j'étais un employeur ou un demandeur d'emploi, aucun des deux n'ayant aucun rapport avec l'offre - et c'était un champ obligatoire !

Des questions inutiles feront fuir certaines personnes, et les autres cliqueront simplement au hasard pour contourner la question, polluant les données et les rendant sans valeur.

Les étiquettes de champ font référence à la microcopie au-dessus, à côté ou à l'intérieur du champ de formulaire qui indique le nom de chaque champ de formulaire respectif.

Par exemple, dans le formulaire ci-dessous, les deux libellés de champ indiquent « E-mail » et « Mot de passe » (placés au-dessus des champs du formulaire) :

En ce qui concerne le placement des étiquettes, vous avez trois options principales :

• En haut (aligné à gauche)
• En ligne (aligné à gauche)
• Champ à gauche (aligné à droite)

Passons en revue chacun.

En haut (aligné à gauche)

L'étiquette est placée au- dessus de la zone de champ de formulaire et poussée à gauche.

Par exemple, le formulaire de création de compte SEMRush que nous venons de montrer (ci-dessus) place les étiquettes de formulaire au-dessus des champs, alignées à gauche.

En ce qui concerne les conversions, les recherches montrent que les étiquettes alignées à gauche en haut du champ de formulaire convertissent le plus. Pourquoi? Parce qu'ils sont les plus faciles et les plus rapides à remplir.

Par exemple, en utilisant un logiciel de suivi oculaire, vous pouvez voir que les étiquettes alignées à gauche en haut du champ de formulaire gardent les yeux du visiteur concentrés sur les champs de formulaire et les étiquettes avec une charge cognitive limitée :

Inline ou "infield" (aligné à gauche)

L'étiquette est placée dans la zone du champ de formulaire et poussée à gauche.

Par exemple, le formulaire Bob HR ci-dessous place les étiquettes de champ dans la zone de champ :

Les étiquettes de champ en ligne fonctionnent bien pour les formulaires courts comme celui-ci, surtout si vous ne demandez que des informations de base comme le nom ou le numéro de téléphone.

Mais pour les formulaires plus longs avec des champs de formulaire plus complexes, les formulaires en ligne créent un cauchemar pour l'expérience utilisateur, en particulier sur mobile.

Pourquoi?

Une fois que vous avez cliqué sur une case, l'étiquette disparaît. Si vous oubliez ce que dit l'étiquette, la seule façon de le savoir à nouveau est de supprimer toute votre entrée et de recommencer. Ouais.

Champ à gauche (aligné à droite)

L'étiquette est placée à gauche de la zone de champ (à l'extérieur de celle-ci).

Bien qu'elles ne soient pas aussi efficaces que les étiquettes placées au-dessus des champs de formulaire (car les visiteurs doivent déplacer leurs yeux de gauche à droite, de haut en bas), les étiquettes placées à gauche des champs de formulaire nécessitaient également une charge cognitive limitée.

À emporter : placez les étiquettes de champ au-dessus des champs du formulaire (alignés à gauche) pour de meilleurs résultats. Et si vous voulez le meilleur des deux mondes, essayez des étiquettes de formulaire en ligne qui se déplacent en haut du champ de formulaire une fois que quelqu'un commence à taper, comme ceci :

Quelle que soit l'option que vous choisissez, tenez compte des points suivants :

• Utilisez des libellés en texte brut : les libellés en gras peuvent sembler attrayants, mais ils sont plus difficiles à lire
• Espace blanc : assurez-vous que vos champs de formulaire et vos étiquettes disposent d'un espace blanc suffisant entre eux
• Alignement du texte : pour réduire la charge cognitive, alignez le texte à droite lorsque vous placez les étiquettes de champ à gauche des champs, et alignez le texte à gauche lorsque vous placez les étiquettes de champ en haut ou en ligne
• Proximité : quoi que vous fassiez, gardez les étiquettes à proximité de leurs champs de formulaire

Le texte d'espace réservé est un indice, une description ou un exemple placé dans le champ du formulaire (généralement en gris clair) qui disparaît une fois que quelqu'un commence à taper. Le texte d'espace réservé est comme une étiquette en ligne, seulement au lieu d'un nom d'étiquette, c'est un exemple d'une soumission réelle.

Par exemple, Oscar utilise un texte d'espace réservé dans chacun de ses champs de formulaire de capture de prospects :

Étude après étude confirme que l'utilisation de texte d'espace réservé en ligne crée une mauvaise expérience utilisateur et réduit les conversions de formulaires.

Pourquoi? C'est un fardeau inutile, vraiment.

• Comme les étiquettes en ligne, le texte de l'espace réservé disparaît une fois que vous commencez à taper, obligeant les visiteurs à supprimer leur entrée s'ils oublient le texte d'indication de l'espace réservé
• Si un message d'erreur apparaît, les visiteurs ne savent pas comment résoudre le problème
• Les espaces réservés en ligne rendent les champs vides moins visibles. Un logiciel de suivi oculaire a montré que les yeux des gens sont attirés par les boîtes vides, pas celles qui sont remplies
• Un mauvais contraste des couleurs les rend difficiles à lire, en particulier pour les malvoyants

Que faire à la place ?

Si vous ressentez le besoin de fournir des instructions pour chaque formulaire (ce qui peut être parfaitement logique), placez les instructions sous les étiquettes des champs, mais au-dessus du champ du formulaire. Par example:

Un déclencheur de clic est une courte copie attrayante placée sous ou autour d'un formulaire CTA ou d'un bouton de soumission conçu pour éliminer le doute et inciter les visiteurs à une conversion.

Par exemple, cette page de destination Lusha utilise son nombre d'étoiles et un nombre total d'avis, ainsi que "Aucune carte de crédit requise", pour rappeler aux visiteurs pourquoi ils doivent cliquer sur le bouton "Commencer gratuitement".

Ou cet exemple plus ancien de ContentVerve a vu une augmentation de 87 % des abonnements à la newsletter par e-mail en ajoutant quelques points liés aux avantages à leur formulaire d'inscription :

À retenir : utilisez des déclencheurs de clic pour anticiper et gérer les objections de votre prospect concernant ce qui se trouve de l'autre côté de votre formulaire.

La microcopie est un terme général qui fait référence aux petits extraits de copie dans votre formulaire utilisés pour instruire ou informer les visiteurs.

Techniquement, les déclencheurs de clic, les étiquettes de champ et les espaces réservés sont tous des exemples de microcopie de formulaire, mais dans ce cas, nous parlons spécifiquement de microcopie qui aide à réduire les frictions en indiquant aux visiteurs pourquoi vous avez besoin de certaines informations ou comment vous allez utilise le.

Bien que minuscule en présence, la microcopie peut avoir un impact énorme sur les conversions de formulaires.

Par exemple, vous trouverez ci-dessous un exemple de microcopie de formulaire qui indique aux visiteurs pourquoi ils ont besoin d'un numéro de téléphone pour finaliser leur achat en ligne (car beaucoup pourraient trouver ces informations inutiles et les abandonner) :

Un autre type courant de microcopie consiste en des messages d'erreur comme celui ci-dessous :

La microcopie convertit-elle ? Tu paries.

Par exemple, étant donné que le coût est la première raison pour laquelle les gens abandonnent les paniers, Yoast a ajouté la phrase "il n'y aura pas de frais supplémentaires" à leur formulaire de paiement et a augmenté les conversions de 11,30 %.

Ou cet exemple d'un ancien concepteur UX de Hubspot qui a découvert que les transactions n'étaient pas terminées parce que les gens saisissaient les mauvaises adresses. En ajoutant une ligne de microcopie, il a considérablement augmenté les conversions de formulaires (et réduit les coûts de support client).

À retenir : les visiteurs ne savent pas toujours pourquoi vous avez besoin d'informations, comment vous utiliserez ces informations ou l'importance de saisir les bonnes informations à moins que vous ne leur disiez. Introduisez la microcopie dans l'interface du formulaire pour vous prémunir contre les prospects perplexes ou inquiets.

Aucun formulaire n'est complet sans un CTA convaincant et attrayant qui motive l'action.

Lorsqu'il s'agit de former des boutons d'appel à l'action, deux choses comptent par-dessus tout : la copie et le contraste.

Tout d'abord, les CTA génériques comme envoyer, soumettre, démarrer, payer ou activer sont ce que nous appelons des "boutons d'effort" ; ils donnent aux visiteurs l'impression que quelque chose de laborieux les attend. A éviter à tout prix.

Au lieu de cela, optez pour des boutons basés sur la valeur comme recevoir, obtenir, profiter, afficher ou découvrir, qui donnent tous aux visiteurs l'impression qu'une récompense (et non un effort) attend de l'autre côté du formulaire.

Par exemple, Jarvis propose un CTA clair, convaincant et orienté vers l'action sur lequel vous ne pouvez pas vous empêcher de cliquer :

Intéressé par plus? Nous avons 61 idées supplémentaires pour les boutons basés sur la valeur.

Et deuxièmement, l'augmentation des conversions de formulaires a moins à voir avec la couleur du bouton qu'avec le contraste de couleur du bouton et de l'arrière-plan.

Par exemple, dans cette étude de cas de notre client, Darwin Homes, le test A/B de la couleur du bouton CTA a permis de réduire le CPA de 45 % et d'augmenter leur taux de conversion de 22 %.

À emporter : Ajoutez un avantage clair à la copie CTA de votre bouton de formulaire (et évitez complètement les CTA génériques), et assurez-vous que votre bouton attire l'attention en le contrastant avec l'arrière-plan.

Vous vous souvenez quand nous avons parlé des formulaires en plusieurs étapes et comment ils micro-convertissent les visiteurs d'une étape à l'autre en facilitant le démarrage du formulaire ?

Il en va de même pour votre bouton de formulaire.

Au lieu d'intégrer un formulaire dans votre page de destination, essayez de placer un bouton CTA à sa place, puis d'ouvrir le formulaire dans une fenêtre contextuelle ou d'envoyer du trafic vers une page de conversion une fois cliqué dessus.

Dans une étude Aweber, ils ont découvert que placer leur formulaire derrière un bouton contextuel au lieu de l'intégrer sur la page de destination augmentait les conversions de 1 375 %.

Dans une étude Hubspot, ils ont découvert que le remplacement de leur formulaire par un bouton CTA menant à une page d'opt-in dédiée augmentait les taux de conversion de 0,4 % (de 2,4 % à 2,8 %). Cela peut sembler peu, mais au cours de milliers de visites, cela représente des centaines de conversions supplémentaires.

Par exemple, Intercom et AllHands (ci-dessous) placent leur formulaire de page de destination derrière un bouton contextuel :

A emporter : Comme toujours, testez tout. Mais cacher un formulaire intimidant derrière un bouton permettra aux visiteurs de faire le premier pas plus facilement. Et une fois que nous avons fait le premier pas, nous avons une plus grande propension à passer à l'étape suivante .

Les formulaires de remplissage automatique font référence à des formulaires qui utilisent les données du navigateur de vos visiteurs pour remplir automatiquement (ou compléter automatiquement) des champs tels que le nom, le numéro de téléphone, les informations de carte de crédit et l'adresse, plutôt que de forcer les visiteurs à les remplir eux-mêmes.

Selon Google, le remplissage automatique peut accélérer le remplissage de vos formulaires jusqu'à 30 %, augmentant ainsi les conversions en cours de route.

À emporter : personne n'aime remplir un formulaire Web, en particulier sur les appareils mobiles. Utilisez le remplissage automatique pour réduire les frictions et augmenter les conversions.

Avez-vous déjà rempli un formulaire pour découvrir que vous avez oublié de mettre des parenthèses autour de votre indicatif régional ou que vous avez ajouté trop d'espaces entre les numéros de carte de crédit, alors vous avez dû recommencer ?

Même.

Pour faciliter le remplissage de vos formulaires (et réduire la charge cognitive et limiter les erreurs de format), ne faites pas deviner à vos prospects s'ils doivent ou non ajouter un tiret, des parenthèses, une virgule, une barre oblique ou ni l'un ni l'autre : formatez automatiquement vos champs pour ne pas quelle que soit la façon dont les visiteurs saisissent les informations, le format se corrige de lui-même.

Par exemple, ce champ de formulaire formate automatiquement la valeur en dollars à mesure que vous ajoutez des nombres :

Mieux encore, vous pouvez utiliser une fonctionnalité appelée "masquage de texte" qui non seulement formatera automatiquement les valeurs correctement, mais fournira également des espaces réservés en ligne qui vous indiqueront combien vous devez encore saisir.

À emporter : utilisez le format automatique pour les dates, les numéros de téléphone, les numéros de carte de crédit ou toute autre valeur numérique (par exemple, le prix, le revenu) qui pourrait nécessiter un formatage spécifique. Non seulement cela réduira les erreurs de formatage et augmentera les conversions, mais cela garantira également que les données de soumission du formulaire se ressembleront toutes.

La preuve sociale fait référence aux avis, témoignages, classements par étoiles de tiers ou à tout autre badge crédible indiquant que d'autres personnes ont eu du succès avec vos produits ou services.

Pourquoi la preuve sociale est-elle importante ? 66 % des clients déclarent que la présence d'une preuve sociale a augmenté leur probabilité d'achat.

Pourquoi la preuve sociale fonctionne-t-elle si bien ? Parce que lorsque les gens ont des doutes sur l'engagement ou des incertitudes sur le choix, ils recherchent l'inspiration auprès de personnes qui ont déjà fait le même choix. Et le plus souvent, ils choisissent ce que les autres choisissent.

Si vous pensiez que vous n'aviez besoin que d'une preuve sociale sur votre page de destination réelle, détrompez-vous.

Placez des preuves sociales comme des étoiles, des témoignages ou des logos de clients à proximité ou autour de vos formulaires pour rappeler aux gens qu'ils prennent la bonne décision.

Pour les pages cliquables en particulier (c'est-à-dire les pages de destination qui redirigent vers une page de conversion comme une page de paiement ou une page de création de compte), placez également la preuve sociale à côté de votre formulaire.

Par exemple, Jarvis place le nombre de clients et les logos des clients à côté de leur formulaire de création de compte :

InvisionApp propose également une preuve sociale à côté de leur formulaire, cette fois sous la forme d'un témoignage d'un de leurs clients (Uber) :

À emporter : poivrez la preuve sociale autour ou à proximité de votre formulaire pour rappeler aux visiteurs pourquoi ils doivent continuer.

Si un champ de formulaire n'est pas obligatoire, demandez-vous si vous en avez réellement besoin ou non, pour commencer. Si vous ne le faites pas, éliminez complètement les champs inutiles.

Toutefois, si vous jugez le champ facultatif nécessaire et que vous devez le juxtaposer à des champs obligatoires, suivez ces bonnes pratiques :

• Étiquetez les champs obligatoires avec un astérisque rouge : Doit-il être un astérisque rouge ? Non. Mais un astérisque rouge est la norme pour les champs obligatoires, et vos utilisateurs s'y attendront.
• Placer des astérisques à gauche des étiquettes : En plaçant des astérisques avant les étiquettes, il est facile pour les visiteurs de scanner le côté gauche du formulaire, de haut en bas, pour les champs obligatoires.
• Envisagez une étiquette "obligatoire" : si vous souhaitez ajouter une étiquette "obligatoire" en plus de l'astérisque, il est préférable de placer le texte en dehors du champ (c'est-à-dire en haut du champ de formulaire) plutôt qu'en ligne.
• Étiquetez également les champs facultatifs : l'étiquetage des champs facultatifs peut également aider à réduire la charge cognitive, car les visiteurs n'auront pas besoin de déduire l'optionnalité ; à la place, le formulaire le leur dira explicitement. Pas nécessaire, mais un joli bonus.
• Évitez de ne pas étiqueter les champs obligatoires : dans certains cas, vous pourriez penser qu'il n'est pas nécessaire d'étiqueter les champs obligatoires. Ne le faites pas. Étiquetez toujours les champs obligatoires.

À retenir : il n'y a rien de sexy dans les étiquettes de champ obligatoires, et c'est précisément pourquoi vous ne devriez pas être mignon avec elles. Selon la loi de Jakob, étant donné que les visiteurs de votre site Web passent la plupart de leur temps sur d'autres sites Web, ils s'attendent à ce que votre site Web suive les mêmes principes de base d'expérience utilisateur que tout le monde. Toute déviation et vous jetez une clé dans leur modèle mental.

Cela devrait aller de soi, mais comme plus de 50 % du trafic Internet provient désormais d'un appareil mobile, si votre formulaire n'est pas optimisé pour un écran plus petit (réactif mobile), vous risquez de provoquer une hémorragie des conversions.

À quoi ressemble un formulaire optimisé pour les mobiles ? Que diriez-vous de quatre robinets et d'un balayage pour réserver un hôtel ?

Lorsqu'il s'agit d'optimiser les formulaires pour mobile, les mêmes règles s'appliquent que celles que nous venons de décrire dans cet article, seul leur impact est plus amplifié.

Par exemple, les gens ont peu de patience pour les étiquettes de champ mal placées sur un bureau, mais ils vous feront une pause car il est facile de comprendre et de naviguer sur un écran plus grand.

Cependant, lorsqu'il s'agit d'un appareil mobile, les gens ont beaucoup moins de tolérance aux frictions d'utilisation, car un pouce maladroit et une forme minuscule constituent déjà une expérience désagréable.

Lors de la conception de vos formulaires pour mobile, appliquez les mêmes bonnes pratiques que celles décrites dans cet article, ainsi que les éléments suivants :

• Texte plus gros
• Bouton CTA plus gros
• Plus d'espace blanc entre les champs et autour des boutons (pour qu'ils soient faciles à toucher)
• Pas de listes déroulantes, optez plutôt pour les boutons radio (les listes déroulantes sont les plus longues à remplir sur mobile)
• Optez pour un formulaire intégré ou une page de formulaire séparée plutôt qu'une fenêtre contextuelle

À emporter : mises en page à une seule colonne, étapes multiples, barres de progression, remplissage automatique, étiquettes de champ… tout cela s'applique également au mobile, uniquement sur un écran plus petit.

La logique conditionnelle vous permet de personnaliser dynamiquement votre expérience de formulaire en fonction des réponses de vos visiteurs.

Bien que tout le monde commence le formulaire sur la même question, selon la façon dont ils répondent, ils peuvent se terminer à deux endroits très différents.

La logique conditionnelle augmente les conversions en raccourcissant les formulaires, en réduisant le nombre de choix par question (c'est-à-dire en éliminant les étapes inutiles) et en créant une expérience de formulaire plus personnalisée.

À emporter : un formulaire de génération de leads de base ne bénéficiera pas de la logique conditionnelle, car il ne nécessitera pas suffisamment d'informations personnalisées. Mais pour les formulaires plus longs, les formulaires de candidature ou les formulaires de qualification de prospects, la logique conditionnelle peut transformer un formulaire autrement cauchemardesque en une expérience agréable.

Moins vos visiteurs ont besoin de travailler pour remplir votre formulaire, plus il est probable qu'ils seront plus nombreux à le remplir. Période.

Selon CXL, après avoir effectué un test pour voir si les boutons radio ou les listes déroulantes étaient plus faciles à remplir, ils ont découvert que les répondants remplissaient les boutons radio 2,5 secondes plus rapidement que les listes déroulantes.

Comme les boutons radio, les cases à cocher sont également plus faciles à remplir.

Quelle est la différence? Les boutons radio servent lorsque plusieurs options s'excluent mutuellement (c'est-à-dire que vous ne pouvez sélectionner qu'un seul choix), les cases à cocher servent lorsque vous pouvez sélectionner plusieurs options.

Nous avions l'habitude d'utiliser également des listes déroulantes sur notre formulaire en plusieurs étapes, puis de les remplacer par des cases à cocher. Désormais, non seulement il est plus facile et plus rapide de remplir notre formulaire (en particulier sur mobile), mais nous obtenons également plus de conversions.

À emporter : dans la plupart des cas, optez pour des boutons radio ou des cases à cocher plutôt que des listes déroulantes. Cependant, faites preuve de bon sens. Si vous avez des dizaines d'options, comme, par exemple, sélectionner un état ou un pays, cela n'a aucun sens d'inclure plus de 50 boutons radio (cela ne réduit pas la charge cognitive de quiconque). Optez plutôt pour une liste déroulante.

Malgré les nombreuses preuves à l'appui des éléments susmentionnés d'un formulaire de page de destination à conversion élevée, vous devez toujours les tester A/B par vous-même.

Pour vous faciliter la vie, il est également utile de former des analyses.

C'est vrai, des analyses réelles qui peuvent mesurer le comportement des utilisateurs lorsqu'ils parcourent votre formulaire en plusieurs étapes.

Certains de nos outils d'analyse de formulaires préférés :

• Flux de souris
• Zuko
• Hotjar
• MonsterInsights (plugin WP)

Créez votre modèle de formulaire de page de destination en utilisant les meilleures pratiques que nous avons décrites dans cet article. Ensuite, comptez sur vos analyses de formulaire pour exposer toute fuite. Testez ensuite différents patchs. Voilà.

Et quoi que vous fassiez, gardez ces champs optionnels hors de votre formulaire à moins que vous n'en ayez vraiment besoin (en vous regardant, Expedia).