Un formulaire de contact parfait

Quasiment tous les sites web proposent un formulaire de contact. La plupart du temps il est bien visible mais il est souvent négligé et mal fini. Voici quelques conseils pour en tirer le meilleur parti.

Quoi de plus banal qu’un formulaire de contact ? Et pourtant, je mets au défi quiconque de ne pas avoir pesté contre un formulaire de contact ces derniers mois. Entre les formulaires qui ne fonctionnent pas, ceux qui demandent trop d’informations, ceux ou il est impossible de remplir correctement un champ et qui empêchent de passer à l’étape suivante, ce qui devrait être une simple formalité se transforme facilement en épreuve. Pourtant, il suffit de respecter quelques règles simples pour en tirer le meilleur.

Toujours tester

C’est une évidence mais comme c’est pénible de tester, on se dit que ça marchera. Sauf qu’en informatique, ça ne marche pas à tous les coups. Le formulaire de contact doit être testé à chaque changement. Il doit être rempli avec des données plausibles et il faut bien vérifier que tout le contenu arrive au destinataire. Il faut évidemment tester tous les cas de figure lorsqu’il y a des champs conditionnels et des branchements.

Si le formulaire est relié à un système de tracking (GTM, GA, pixel Facebook…), il faut contrôler que tout fonctionne et que les complétions et les envois sont correctement trackés.

Enfin, derrière la notion de test, il y a aussi les tests A/B et multivariés qui sont surtout utiles lorsqu’on a du volume ou des enjeux financiers non négligeables. C’est le cas pour les campagnes publicitaires qui envoient du trafic sur une landing page comportant un formulaire.

Être accessible

Parlons d’abord de l’accessibilité numérique. Les formulaires doivent être utilisables facilement par les porteurs de handicap. Pas le choix, les champs doivent être correctement intégrés en respectant les règles d’accessibilités HTML WCAG / WAI et RGAA en France. Il y a des aspects très techniques mais il y a aussi du bon sens : écrire gros, utiliser un contraste élevé.

Les agences web et les intégrateurs travaillent depuis un ordinateur. Mais la majorité des internautes utilisent aujourd’hui principalement leur mobile pour accéder au web. Les formulaires se doivent donc d’être faciles à utiliser depuis un smartphone. L’approche mobile-first est ici un impératif. Pour faire simple, sur mobile, les champs doivent être plus gros, suffisamment espacés et utiliser toute la largeur de l’écran.

Le préremplissage des champs est très pratique. Ça fait gagner du temps à l’utilisateur. Si l’intégration HTML est bien pensée, le navigateur est capable d’identifier le type de champ et peut proposer des valeurs déjà renseignées par ailleurs pour le nom, l’adresse, l’email, le téléphone et les coordonnées bancaires…

L’ordre des champs est un détail qui énerve lorsqu’il est mal paramétré : quand on navigue au clavier et qu’on utilise la touche tabulation pour passer d’un champ à l’autre, l’ordre des champs doit être le même que celui visible à l’écran et doit être logique. Là encore, ça demande un effort d’intégration HTML pour que la navigation au clavier paraisse évidente.

Puisque l’on parle de navigation au clavier, tout doit évidemment être utilisable sans souris : certains champs évolués non standards se comportent mal sans souris. Il faut pouvoir leur donner le focus et naviguer à l’intérieur.

Terminons avec une pensée pour l’UX. L’expérience utilisateur doit toujours être en tête des priorités : ainsi les masques de saisie et le formatage des champs, c’est bien (le téléphone par exemple ou encore l’autocomplétion pour les adresses) mais il faut que ça fonctionne à tous les coups. Les nouvelles rues mettent plus de 2 ans à être intégrées dans les outils de cartographie / SIG et encore plus pour redescendre dans les outils de géolocalisation et autocomplétion d’adresse. Si le formulaire doit être utilisé dans un contexte international, est-ce que tout fonctionne de façon fluide ? C’est le cas pour le champ « région » obligatoire pour les adresses. C’est aussi le cas avec les listes interminables de pays ou pour les numéros de téléphone au format international. Pour résumer ce dernier point UX, s’il y a un effort à faire, il doit être du côté du site web : ce n’est pas à l’utilisateur de savoir quel est l’indicatif téléphonique de son pays.

Réduire la friction

Il est primordial de dire ce qu’on attend de l’utilisateur pour chaque champ. Donner des exemples, proposer une infobulle, préremplir le champ avec un texte d’exemple qui disparaît lors de la saisie (et qui réapparaît si on supprime le contenu du champ). C’est ici aussi que l’on peut montrer sous quel format les données sont attendues (le tel en 04 50 ou bien en +33(0)4 50). Pour les champs les plus importants, ajouter sous le libellé et avant le champ une petite phrase explicative toujours visible.

L’autocomplétion est très pratique quand elle fonctionne. Idéalement, il faut aussi pouvoir soumettre une valeur qui n’est pas disponible dans l’autocomplétion. Il y a toujours des cas spécifiques ou on ne rentre pas dans les cases.

Il faut préciser à l’utilisateur si un champ est obligatoire avant qu’il ne valide le formulaire et voit un message d’erreur indiquant qu’un champ obligatoire n’a pas été saisi.

Et le captcha ? Les mécanismes de protection contre le spam de formulaires reposent parfois sur des tests que doit réaliser l’utilisateur : saisir du texte, cliquer sur des photos, cocher des cases… Ces systèmes peuvent être évités avec des solutions transparentes pour l’utilisateur. C’est le cas avec reCaptcha, la solution de détection transparente de robots proposée par Google.

La validation des champs à la volée est très appréciée des internautes et des mobinautes : si un champ est mal rempli, il faut le dire tout de suite c’est à dire lorsque l’internaute quitte le champ qu’il vient de remplir. Visuellement, le champ doit être marqué avec une couleur d’alerte et un texte d’erreur compréhensible et complet doit être proposé à l’internaute à proximité immédiate du champ posant souci.

Être transparent, rassurant et inspirant confiance

Avec un peu de contexte, tout et beaucoup plus simple. Devant un formulaire, il s’agit d’expliquer à l’utilisateur ce qui va se passer. Que vont devenir les informations collectées ? Pourquoi en a-t-on besoin ?

Il est possible d’introduire le formulaire en le précédant d’un titre explicite et en l’introduisant avec une courte phrase expliquant son but. Il faut aussi expliquer qu’il n’y a pas de mauvaise raison de contacter et que chaque demande sera traitée. Bonus, vous pouvez indiquer une durée attendue de traitement (mais il faut alors la tenir).

La fin du formulaire aussi est importante : à la place du générique « Envoyer », quel est le verbe d’action idéal à employer ? Si vous doutez, mettez-vous à la place de l’internaute et imaginez que vous précédez le bouton par « Je veux… ».

Petit point RGPD et données personnelles. Expliquer que le traitement sera uniquement lié à la demande et que les données ne seront pas utilisées à une autre fin (et le faire effectivement). Ajouter une case à cocher d’acceptation et un lien vers les CGU / politique de confidentialité.

Après la soumission, qu’affichez-vous à l’internaute ? Le minimum est de lui indiquer que sa demande a été collectée et qu’elle sera transmise à la bonne personne. Il n’y a pas de mal à répéter le délai attendu de traitement. Attention à bien montrer que le formulaire a été envoyé : certains systèmes ne sont pas assez visibles et il vaut mieux jouer la sécurité et afficher un message bien visible plutôt que de mettre le doute à l’utilisateur. Et si le formulaire n’a pas pu être soumis, il faut aussi le dire.

En demander le minimum pour pouvoir traiter correctement

Les bonnes pratiques en matière de traitement des données personnelles imposent la minimisation de la collecte des données. Mais c’est aussi une bonne pratique pour obtenir un meilleur taux de conversion avec les formulaires. Il ne faut demander que le minimum de champs à l’internaute c’est à dire uniquement ceux sans lesquels il n’est pas possible de créer une relation avec l’utilisateur ou ceux sans lesquels il n’est pas possible de répondre correctement. Exemple extrême : Nom, Email, Message. Dans ce dernier cas, tous les champs sont obligatoires.

Attention : certains champs sont vraiment des repoussoirs : c’est le cas de tous ceux qui sont liés aux données personnelles et qui peuvent paraître intrusifs. Le téléphone est un très bon exemple de champ que les internautes n’aiment pas remplir.

Oui mais dans certains métiers, la confiance augmente lorsqu’on ajoute plus de champs. Et dans d’autres métiers, certains champs sont nécessaires même s’il s’agit de données potentiellement à problème.  C’est le cas pour les plaques d’immatriculation auto pour les vendeurs de pièces détachées.

Pour finir, les arbitrages sont souvent nécessaires. Peut-être que la bonne solution est de demander les informations minimum pour mettre le pied dans la porte et demander via un autre moyen les autres informations nécessaires par email, par téléphone et dans le cadre d’une relation plus avancée.

Pour conclure, le bon formulaire c’est celui que l’internaute en colère, depuis son mobile, avec une mauvaise connexion internet et n’ayant que 60 secondes devant lui doit pouvoir remplir. Si votre formulaire passe tous ces écueils, le défi est relevé.