Autocomplétion de formulaire : la conversion que vous laissez au clavier

La saisie est la partie la plus coûteuse d'un formulaire, surtout sur mobile : taper une adresse email sans faute sur un clavier de téléphone demande plus d'effort et de temps que tout le reste de la visite. Or les navigateurs savent depuis des années remplir ces champs en un tap, à partir des données que l'utilisateur a déjà enregistrées. Quand ça ne marche pas — le champ email qui ne propose rien, le clavier numérique qui n'apparaît pas pour le téléphone — ce n'est presque jamais le navigateur : c'est le formulaire qui est mal balisé. La bonne nouvelle, c'est que ce chantier se règle en une heure et ne demande aucune refonte. Il complète directement les fondamentaux de notre guide du formulaire de landing page.

L'attribut autocomplete : dire au navigateur ce que contient chaque champ

Le standard HTML définit l'attribut autocomplete, qui indique explicitement au navigateur la nature de chaque champ : autocomplete="given-name" pour le prénom, family-name pour le nom, email, tel, organization pour l'entreprise, street-address, postal-code, address-level2 pour la ville. Correctement renseigné, il permet au navigateur de proposer le remplissage complet du formulaire en un seul tap. Sans lui, le navigateur devine à partir du nom du champ — et se trompe dès que vos champs s'appellent input_23 ou votre-mail. La règle est simple : chaque champ de coordonnées de votre landing page doit porter son attribut autocomplete standard. C'est aussi un des critères d'accessibilité du RGAA, comme le rappelle notre article sur l'accessibilité d'une landing page.

Le bon clavier mobile pour chaque champ

Second chantier, complémentaire : le type de champ et l'attribut inputmode déterminent le clavier affiché sur mobile. Un type="email" affiche le @ en accès direct ; un type="tel" ouvre le pavé numérique ; un inputmode="numeric" convient au code postal. Chaque clavier inadapté ajoute des allers-retours entre les modes de saisie, donc des fautes, donc des messages d'erreur — le tout sur le terminal où se joue la majorité de votre trafic payant. Le trio type correct + inputmode + autocomplete constitue le socle technique de tout champ de formulaire ; le reste (nombre de champs, labels visibles, validation en temps réel) relève de la conception.

L'autocomplétion d'adresse : l'API gratuite que les sites français sous-utilisent

Pour les formulaires qui demandent une adresse — devis à domicile, estimation immobilière, livraison —, la saisie assistée change la donne : l'utilisateur tape trois mots, sélectionne son adresse dans une liste, et le formulaire remplit rue, code postal et ville d'un coup, sans faute de frappe. La solution la plus connue est l'API Google Places (payante au-delà d'un quota) ; pour les adresses françaises, l'API Adresse de la Base Adresse Nationale (adresse.data.gouv.fr) rend le même service gratuitement, sans clé d'API, avec une excellente couverture du territoire. Pour une landing page d'estimation immobilière ou d'artisan local, c'est probablement le meilleur rapport effort/impact de tout le formulaire : un champ intelligent remplace quatre champs à taper.

Ce que dit la recherche sur l'effort de saisie

La conception de formulaires est l'un des rares sujets du web à disposer d'une littérature scientifique solide. Javier Bargas-Avila et ses collègues de l'université de Bâle ont synthétisé en 2010 vingt recommandations de conception de formulaires web fondées sur l'état de la recherche (Bargas-Avila et al., 2010), parmi lesquelles la réduction de l'effort de saisie et l'exploitation des mécanismes du navigateur. Quatre ans plus tard, Mirjam Seckler et la même équipe ont testé empiriquement ces recommandations dans une étude contrôlée publiée à la conférence CHI (Seckler et al., 2014) : les formulaires conformes aux recommandations sont remplis significativement plus vite, avec moins d'erreurs et une satisfaction supérieure — l'écart se creusant précisément sur les formulaires les plus longs, ceux où l'assistance à la saisie a le plus de matière. Autrement dit : l'autocomplétion n'est pas un gadget de confort, c'est un des leviers documentés de réduction de l'abandon de formulaire.

Les erreurs qui cassent l'autocomplétion

• autocomplete="off" posé « par sécurité » sur tout le formulaire — sauf cas très particuliers (données sensibles, back-office), c'est de la friction pure infligée à chaque visiteur.
• Des champs découpés exotiquement (téléphone en trois cases, adresse éclatée en cinq champs sans attributs) que le remplissage automatique ne sait pas cibler.
• Un formulaire reconstruit en JavaScript qui ne déclenche pas les événements standard : le navigateur remplit les champs, mais votre code ne « voit » pas les valeurs — testez toujours la soumission après un remplissage automatique.
• La validation qui rejette les valeurs auto-remplies (espaces dans le numéro de téléphone, majuscules dans l'email) au lieu de les normaliser silencieusement.
• Des champs cachés qui se remplissent à l'insu de l'utilisateur — outre l'aspect déloyal, plusieurs navigateurs pénalisent ces formulaires.

Un exemple concret avec les templates LanderKit

Les formulaires des 10 templates LanderKit appliquent ce socle : types de champs corrects, attributs autocomplete standard, claviers mobiles adaptés. Le template Immobilier (démo) illustre le cas du formulaire d'adresse en deux étapes, directement compatible avec une autocomplétion Base Adresse Nationale, et le template Agence locale (démo) le cas du devis local. 89 € l'unité, 229 € le pack complet.