Champs obligatoires ou optionnels : comment les signaler dans un formulaire

Sur un formulaire de landing page, chaque champ pose silencieusement une question au visiteur : « dois-je vraiment remplir ça ? ». Mal signaler ce qui est obligatoire produit deux erreurs symétriques — des visiteurs qui abandonnent devant un formulaire qui paraît plus long qu'il ne l'est, et des soumissions rejetées pour champ manquant, avec le message d'erreur et la friction qui vont avec. La convention de l'astérisque règle une partie du problème ; elle en masque une autre, plus importante.

Ce que disent les études d'utilisabilité

Le marquage des champs fait partie des vingt recommandations formalisées par Javier Bargas-Avila et ses collègues dans « Simple but Crucial User Interfaces in the World Wide Web: Introducing 20 Guidelines for Usable Web Form Design » (2010), l'une des synthèses les plus citées sur la conception de formulaires : si le formulaire mélange champs requis et optionnels, le marquage doit être explicite et systématique, et l'astérisque n'est compris que parce qu'il est devenu conventionnel — pas parce qu'il est évident. Une partie des utilisateurs, notamment les moins habitués du web, ne sait pas ce qu'il signifie.

La suite de ces travaux, « Designing Usable Web Forms: Empirical Evaluation of Web Form Improvement Guidelines » (Seckler, Heinz, Bargas-Avila, Opwis et Tuch, conférence CHI 2014), a testé empiriquement ces recommandations en les appliquant à des formulaires réels : les versions conformes aux guidelines ont produit des remplissages plus rapides, moins d'erreurs et une satisfaction supérieure. Autrement dit, ces détails — marquage, ordre des champs, position des libellés — ne relèvent pas du goût : ils se mesurent.

La règle n° 1 : réduire le problème avant de le signaler

Le meilleur marquage des champs optionnels est de ne pas avoir de champs optionnels. Un champ facultatif est un aveu : l'information est assez utile pour être demandée, pas assez pour être exigée. Sur une landing page — où chaque champ supplémentaire coûte des conversions, comme le montre notre article sur le nombre de champs idéal — ce compromis se tranche presque toujours dans le même sens : supprimez le champ, ou rendez-le obligatoire s'il conditionne vraiment le traitement de la demande. Les informations « bonus » se collectent plus tard, une fois la relation engagée, par email ou lors du premier échange.

Trois stratégies de marquage, par ordre de préférence

1. Tout obligatoire : ne rien marquer, le dire une fois

Si tous les champs sont requis — le cas idéal d'un formulaire court — les marquer individuellement n'apporte que du bruit visuel. Une simple mention en tête (« tous les champs sont requis ») suffit, et le formulaire y gagne en propreté. C'est la configuration des formulaires réduits à l'essentiel : prénom, email, et éventuellement le champ de qualification indispensable.

2. Mixte : marquer l'optionnel, pas l'obligatoire

Si un champ facultatif doit rester, la mention explicite « (facultatif) » à côté de son libellé est plus claire que l'astérisque sur tous les autres : elle marque l'exception plutôt que la règle, se comprend sans légende, et allège le formulaire quand l'obligatoire est majoritaire — ce qui devrait toujours être le cas sur une landing page. Cette logique du mot explicite plutôt que du symbole rejoint ce que nous détaillons dans notre article sur la microcopie de formulaire.

3. L'astérisque : acceptable, à condition d'être rigoureux

L'astérisque reste défendable sur des formulaires longs de type devis ou inscription, où la convention est bien installée. Trois conditions : la légende (« * champ obligatoire ») doit être visible avant le premier champ, le symbole doit être accolé au libellé (pas flottant en bout de ligne), et il doit être doublé d'un marquage accessible aux lecteurs d'écran (attribut required et aria-required), un point développé dans notre guide de l'accessibilité RGAA.

Les erreurs qui coûtent des soumissions

• Marquer à la fois l'obligatoire et l'optionnel — doubler astérisques et mentions « facultatif » force le visiteur à décoder deux systèmes ; choisissez-en un.
• Révéler l'obligation à la soumission — un champ requis découvert via un message d'erreur après clic est la pire des frictions ; l'exigence doit se voir avant la saisie.
• Compter sur la couleur seule — un libellé rouge n'est ni compris de tous ni perçu par les personnes daltoniennes ; le marquage doit passer par le texte ou le symbole, pas uniquement par la couleur.
• Placer la légende de l'astérisque en pied de formulaire — elle doit précéder les champs, là où le visiteur en a besoin.
• Oublier le cas RGPD — la case de consentement facultative (newsletter) doit être clairement distincte du consentement nécessaire au traitement de la demande, comme l'exige la conformité détaillée dans notre article RGPD et formulaires.

Sur une landing page, la question se pose à peine

Tout ce qui précède vaut pour les formulaires en général. Sur une landing page de capture, la conclusion pratique est plus radicale : un formulaire de 2 à 4 champs tous obligatoires, sans astérisque ni mention, avec une phrase d'introduction si nécessaire. C'est la configuration des templates LanderKit — du formulaire d'appel découverte du template Coach & Consultant à l'estimation en deux étapes du template Immobilier, qui déplace les questions optionnelles vers une seconde étape au lieu d'encombrer la première, sur le modèle du formulaire multi-étapes. Pour la vision d'ensemble — position, libellés, validation, bouton — voir notre guide complet du formulaire de landing page.