Un champ de formulaire est une zone interactive d’une page web ou d’une application dans laquelle l’utilisateur saisit ou sélectionne une information unique, transmise ensuite avec le reste du formulaire pour être traitée.
Les champs se répartissent en deux familles. Les champs de saisie libre reçoivent du texte : une ligne pour un nom, une zone de plusieurs lignes pour un message, un champ typé pour une adresse électronique, un numéro de téléphone ou une date. Les champs de sélection proposent des valeurs prédéfinies : cases à cocher pour des choix multiples, boutons radio pour un choix unique, listes déroulantes, sélecteurs de date. Le type déclaré dans le code détermine les contrôles que le navigateur peut appliquer et, sur mobile, le clavier proposé.
Un champ complet associe plusieurs éléments : une étiquette qui nomme l’information attendue, une indication de format si nécessaire, la mention de son caractère obligatoire ou facultatif, une règle de validation et un message d’erreur. Dans le code, un nom technique relie la valeur saisie à la donnée enregistrée.
Le champ de formulaire se distingue du champ d’une base de données, qui est l’emplacement où la valeur est stockée : le premier sert à recueillir, le second à conserver. Il se distingue aussi du formulaire, qui réunit les champs, leur ordre et le bouton d’envoi. On le rencontre dans la création de compte, la demande de devis, l’inscription à une lettre d’information, la recherche interne et le tunnel de commande.
Chaque champ demande un effort de lecture, de réflexion et de saisie. Ajouter « juste un champ » paraît anodin : c’est pourtant ainsi que les formulaires s’alourdissent. Nous recommandons de justifier chaque champ par un usage précis : qui exploite la donnée, dans quel délai, pour quelle décision. Un champ sans réponse à ces questions est à supprimer ou à rendre facultatif.
Cette discipline rejoint une obligation. Le principe de minimisation du RGPD, rappelé par la CNIL, limite la collecte aux seules données strictement nécessaires à l’objectif (« Les six grands principes du RGPD », 2019).
Les règles pour l’accessibilité des contenus web du W3C (WCAG) encadrent directement les champs. Le critère 3.3.2, de niveau A, exige des étiquettes ou des instructions lorsque le contenu demande une saisie. La documentation du W3C précise qu’il vaut pour tous les champs, obligatoires comme facultatifs, et que les instructions peuvent préciser le format attendu (« Understanding SC 3.3.2 Labels or Instructions »).
Le critère 1.3.5 de WCAG 2.1, de niveau AA, demande que le but des champs qui recueillent des informations sur l’utilisateur puisse être déterminé par programme. L’attribut HTML autocomplete est la technique suffisante indiquée par le W3C (« Understanding SC 1.3.5 Identify Input Purpose »). Il permet notamment le remplissage automatique par le navigateur, sujet de la fiche autocomplétion formulaire.
Le taux de complétion formulaire global masque l’essentiel. Nous recommandons de suivre, pour chaque champ, le taux d’abandon après la dernière interaction, le nombre d’erreurs de validation et le nombre de corrections. Le champ qui concentre les abandons ou les erreurs est le premier à revoir. Ces mesures passent par le suivi des évènements. Elles ne doivent pas enregistrer le contenu saisi, seulement le fait qu’il y a eu saisie, erreur ou abandon.
Pour aller plus loin sur l’ordre et le regroupement des champs, la fiche ergonomie des formulaires traite le formulaire comme un tout.
Advalians vérifie vos données, mesure quelles actions et quelles pages produisent des contacts et lesquelles n’en produisent pas, et vous dit où déplacer vos moyens.
Advalians, cabinet de conseil indépendant en marketing et communication, vous aide à clarifier vos choix et à décider.
Le champ de formulaire recueille une information, le champ de base de données la conserve. Le premier appartient à l’interface : il a une étiquette, un type de saisie, des règles de validation. Le second appartient au stockage : il a un nom, un type de donnée, une longueur maximale.
Les deux doivent correspondre. Avant de créer un champ de formulaire, vérifiez dans quel champ de votre base de données la valeur sera rangée, avec quel format. Un écart entre les deux produit des données tronquées ou inexploitables.
Signalez l’exception, en toutes lettres. Si la plupart des champs sont obligatoires, ajoutez « facultatif » aux autres. Dans le cas inverse, marquez « obligatoire ». Un astérisque seul suppose une légende que l’utilisateur doit chercher.
La documentation du critère 3.3.2 des WCAG cite l’identification des champs obligatoires parmi les bénéfices attendus des étiquettes. Mieux encore : supprimez les champs facultatifs dont la donnée n’a pas d’usage défini. Un formulaire sans champ facultatif n’a plus besoin de ce marquage.
Mesurez, pour chaque champ, la dernière interaction avant abandon. Le champ où s’arrêtent le plus de sessions abandonnées est le premier suspect. Procédez en trois temps.
Le champ incriminé est souvent intrusif, ambigu ou trop strict sur le format.
Non, c’est une erreur fréquente. Le texte indicatif disparaît dès que l’utilisateur commence à taper. Il ne sait plus ce qu’on lui demande s’il est interrompu, et il ne peut plus vérifier sa saisie avant l’envoi. Sur un formulaire prérempli, aucun champ n’indique plus ce qu’il contient.
Gardez une étiquette visible au-dessus du champ. Réservez le texte indicatif à un exemple de format, comme une date au format jour, mois, année, et répétez cette consigne près du champ si elle est indispensable.
Aucun nombre ne vaut pour tous les sites : mettez le minimum nécessaire pour traiter la demande. Pour un premier contact, un moyen de vous répondre et l’objet de la demande suffisent souvent. Chaque champ ajouté doit répondre à une question simple : qui utilise cette donnée, et pour quoi faire ?
Ajoutez un champ de qualification seulement s’il change le traitement de la demande, par exemple l’orientation vers le bon interlocuteur. Les informations de qualification restantes peuvent attendre le premier échange.
Modèles, grilles et guides prêts à l’emploi pour vos projets marketing et communication.
