Vous testez votre formulaire sur ordinateur et il est parfait. Pleine largeur, deux colonnes, aéré. Vous envoyez un test sur mobile et vous voyez tout de suite que quelque chose cloche. Les champs sont minuscules. Le clavier cache la moitié du formulaire. Vous touchez le mauvais champ. Toute l'expérience paraît cassée.
La moitié de vos visiteurs sont sur mobile. Si votre formulaire n'est pas responsive, vous perdez la moitié de vos envois. Cet article explique comment concevoir des formulaires qui fonctionnent sur téléphone, tablette et ordinateur.
Les formulaires mobiles diffèrent des formulaires sur ordinateur
Les utilisateurs mobiles remplissent les formulaires autrement. Sur ordinateur, vous avez de la place. Vous pouvez utiliser plusieurs colonnes. Vous pouvez placer les libellés à côté des champs. Sur mobile, chaque pixel compte.
Les claviers mobiles sont énormes. Quand le clavier s'ouvre, il couvre la moitié de l'écran. Votre formulaire défile. L'utilisateur perd le contexte. Un bouton qui était visible se retrouve caché derrière le clavier.
Les zones de toucher doivent être plus grandes. Une zone cliquable de 14 par 14 pixels convient à une souris. Un doigt a besoin d'au moins 48 par 48 pixels, sinon l'utilisateur la manque.
Les utilisateurs mobiles ont souvent un réseau instable. Chaque chargement ou image en plus ajoute du temps. La vitesse compte encore plus que sur ordinateur.
La mise en page du formulaire sur une seule colonne
Le formulaire responsive le plus sûr tient sur une seule colonne. Un champ par ligne, quelle que soit la taille de l'écran.
Les mises en page à une colonne sont simples, fonctionnent sur tous les écrans, offrent une expérience cohérente et sont très prévisibles. Le principal inconvénient : les formulaires paraissent plus longs sur ordinateur et demandent plus de défilement.
La plupart des formulaires devraient tenir sur une seule colonne. Avec cinq champs, une seule colonne est même plus courte qu'une mise en page à deux colonnes sur ordinateur. L'utilisateur défile moins et voit plus de contexte.
Pour créer une mise en page à une colonne, utilisez input, textarea, select { display: block; width: 100%; margin-bottom: 1rem; }. Tout s'empile à la verticale à tous les points de rupture.
Deux colonnes sur ordinateur, une seule sur mobile
Pour utiliser l'espace horizontal des grands écrans, utilisez une grille avec .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } et une media query @media (max-width: 768px) { .form-row { grid-template-columns: 1fr; } }. Sur ordinateur, cela crée deux colonnes ; sur mobile, tout s'empile en une seule, ce qui garde une mise en page simple et responsive.
Ne regroupez que les champs vraiment liés. Les champs « Prénom » et « Nom » côte à côte ont du sens. Les champs « Adresse » et « Pays » côte à côte, non.
Zones de toucher et conception adaptée au doigt
La zone de toucher minimale sur mobile est de 44 par 44 pixels (selon les consignes de conception d'un grand constructeur de smartphones) ou de 48 par 48 pixels (Android). Visez au moins 44.
Cette taille s'applique aux champs de saisie, qui doivent être assez hauts pour être touchés facilement (40 à 50 pixels, c'est bien), aux cases à cocher et aux boutons radio, qui font 13 par 13 pixels par défaut et doivent être agrandis à au moins 44 par 44 avec du CSS ou du JavaScript, aux boutons, qui doivent faire au moins 44 par 44 pixels avec du remplissage ajouté, et aux libellés, qui doivent aussi faire 44 par 44 pixels s'ils sont cliquables via l'attribut for. Parfois, le libellé et le champ forment ensemble la zone de toucher complète.
Pour agrandir les champs et les rendre plus faciles à toucher, utilisez input[type="text"], input[type="email"], textarea { padding: 0.75rem; font-size: 1rem; }. Le remplissage rend le champ plus haut et améliore la facilité de toucher.
Gestion du clavier
Sur mobile, le clavier du navigateur couvre la moitié basse de l'écran. Si votre formulaire est en bas de la page, le bouton d'envoi est caché. L'utilisateur doit défiler ou fermer le clavier pour voir le bouton.
Gardez votre formulaire près du haut de la page. Ou placez le bouton d'envoi en haut comme en bas. Ne cachez pas les boutons essentiels sous le clavier.
Le type de clavier compte aussi. Pour un champ e-mail, utilisez <input type="email"> pour afficher un clavier e-mail avec une touche @. Pour un champ téléphone, utilisez <input type="tel"> pour afficher un clavier numérique. Pour une saisie numérique, utilisez <input type="number"> pour afficher un clavier de chiffres. Avec le bon type de champ, le navigateur choisit automatiquement le clavier.
Quand l'utilisateur touche un champ, le navigateur le fait défiler dans la zone visible. C'est bien : le champ est visible quand il faut écrire. Mais il arrive qu'il dépasse d'autres éléments de contexte. Testez votre formulaire sur un vrai téléphone pour voir le comportement.
Position des libellés sur mobile
Sur ordinateur, les libellés peuvent être au-dessus, à côté ou dans les champs. Sur mobile, au-dessus est presque toujours le mieux.
Un libellé au-dessus du champ est clair. L'utilisateur voit le libellé, puis le champ. Sur un écran étroit, un libellé à côté du champ gaspille de la place en largeur. Un texte indicatif dans le champ disparaît dès qu'on commence à écrire.
Bonne pratique : placez toujours les libellés au-dessus des champs.
<label for="email">E-mail</label>
<input type="email" id="email">
Espacement et remplissage
Les formulaires responsives ont besoin de plus d'espace sur mobile, pas de moins. Votre instinct est de tout comprimer pour faire tenir l'écran. Résistez.
Utilisez des marges et des remplissages généreux : au moins 1rem (16 pixels) entre les champs, au moins 0.75rem (12 pixels) de chaque côté pour le remplissage des champs, et au moins 1rem (16 pixels) de chaque côté pour le remplissage des boutons. Un espacement généreux rend les formulaires plus faciles à utiliser, réduit les erreurs de toucher et améliore la lisibilité. Sur mobile, l'air autour des éléments vaut plus que la place sur l'écran.
Taille du texte sur mobile
Utilisez au moins 16 pixels pour les champs de saisie. Un texte plus petit oblige à zoomer ou à plisser les yeux. 16 pixels est la valeur par défaut, et elle fonctionne.
Les libellés peuvent être plus petits, autour de 14 pixels. Mais les champs de saisie doivent faire 16 pixels minimum.
Certains navigateurs zooment automatiquement quand on touche un champ de moins de 16 pixels, ce qui fait sauter et zoomer le formulaire de façon inattendue. Utilisez input { font-size: 16px; } pour éviter ce comportement.
Erreurs courantes sur les formulaires responsives
Utiliser deux colonnes sur toutes les tailles d'écran
Les formulaires sont écrasés sur mobile. Les champs sont minuscules. Les libellés s'empilent mal. Passez toujours à une seule colonne sur les petits points de rupture.
Des zones de toucher trop petites
Les cases à cocher, les boutons radio et les boutons doivent faire au moins 44 par 44 pixels. Testez sur un vrai téléphone. Si vous devez vous concentrer pour toucher, c'est trop petit.
Utiliser le texte indicatif comme seul libellé
Quand l'utilisateur commence à écrire, le texte indicatif disparaît. Il oublie à quoi sert le champ. Utilisez toujours un vrai élément label. Gardez le texte indicatif si vous voulez, mais ne vous y fiez jamais seul.
Placer le formulaire en bas d'une longue page
L'utilisateur descend jusqu'à un formulaire de contact, touche le champ e-mail, et le clavier mobile couvre le formulaire. Il ne voit plus ce qu'il écrit et ne peut pas atteindre le bouton d'envoi. Placez les formulaires près du haut, ou vérifiez qu'ils tiennent à l'écran avec le clavier.
Ne pas tester sur de vrais appareils mobiles
Votre navigateur d'ordinateur a un mode d'affichage mobile. Il est utile pour une vérification rapide. Mais il ne montre pas comment votre formulaire fonctionne vraiment sur un téléphone. Testez sur de vrais appareils. Empruntez un téléphone si vous n'en avez pas.
Techniques pour des formulaires responsives
CSS Grid pour des mises en page flexibles
Utilisez .form-group { display: grid; gap: 0.5rem; } et .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }. Les valeurs auto-fit et minmax créent une mise en page qui s'adapte à l'espace disponible : les champs s'empilent en largeur étroite et se placent côte à côte en largeur large.
Flexbox pour la mise en page des boutons
Utilisez .form-actions { display: flex; gap: 1rem; flex-wrap: wrap; } et .form-actions button { flex: 1; min-width: 150px; }. Les boutons se placent côte à côte sur ordinateur, passent sur plusieurs lignes sur mobile, et chacun grandit pour remplir l'espace disponible.
Media queries pour des points de rupture précis
Utilisez @media (max-width: 480px) { label { display: block; margin-bottom: 0.5rem; } input { width: 100%; } } pour forcer une mise en page à une colonne sur les écrans de moins de 480 pixels.
Comment les formulaires WEMASY s'adaptent à tous les écrans
Le créateur de formulaires de WEMASY crée automatiquement des formulaires responsives. Vous construisez sur ordinateur, et le mobile est déjà géré. Les formulaires passent sur une colonne sur téléphone. Les zones de toucher sont dimensionnées pour le mobile. Les libellés et les champs sont bien espacés. Aucun travail en plus.
Découvrez comment fonctionne l'adaptation des formulaires dans votre offre WEMASY.