Repérer ce que le visiteur ne comprend pas
Ouvrez la page qui contient le formulaire et notez l’action attendue. Un formulaire de contact demande de transmettre un message, tandis qu’un formulaire de réservation peut demander une date et un nombre de places. Repérez le premier endroit où le visiteur doit deviner la suite. Le nom du champ peut manquer, le format demandé peut apparaître seulement après une erreur, ou le formulaire peut afficher un message général qui ne dit pas quel champ corriger.
Rejouez la lecture avant toute saisie. Pour chaque champ, demandez-vous ce qui doit être entré, si la valeur est obligatoire et dans quel format elle sera acceptée. Vérifiez ensuite ce que devient le texte d’aide quand vous commencez à taper. Un exemple affiché à l’intérieur du champ peut disparaître dès la saisie. Le libellé et les consignes nécessaires doivent rester accessibles pendant la correction.
Séparez le problème de compréhension d’un échec technique de soumission. Une erreur qui demande de compléter une adresse e-mail relève de la validation du champ. Un message qui signale un échec d’envoi ou une absence de réponse demande de vérifier la soumission et ses intégrations. Si les deux se produisent, consignez-les séparément. Vous pourrez améliorer les champs sans attribuer une panne de réseau à leur texte.
Notez l’adresse, le nom du formulaire et le champ concerné. Préparez une copie avec des données synthétiques. Si vous prévoyez des essais de soumission, isolez sur cette copie les courriels, les webhooks et les autres traitements qui pourraient sortir du site. La relecture du texte et du balisage peut commencer avant ces essais.
Donner un nom visible et une consigne utile à chaque champ
Remplacez les libellés vagues par des mots qui décrivent la donnée attendue. « Adresse e-mail de contact » donne un repère plus précis qu’un champ nommé « Adresse ». Le nom reste visible après saisie. Gardez le texte de remplacement à l’intérieur du champ pour un exemple facultatif. Une personne qui revient corriger un formulaire doit pouvoir identifier un champ déjà rempli.
Annoncez quels champs sont obligatoires. Si vous utilisez un astérisque, donnez sa signification avant les champs et vérifiez qu’un autre repère exprime l’obligation. Pour une consigne particulière, placez le texte près du contrôle. Un champ de date peut annoncer le format attendu si la saisie se fait en texte. Un champ de fichier doit indiquer les types et la taille réellement admis par la configuration. Vérifiez ces règles auprès du responsable avant de les écrire.
Pour une série de cases, donnez un nom à l’ensemble et un libellé à chaque choix. « Créneaux souhaités » peut nommer le groupe et « Mardi matin » une option. Si une seule réponse est attendue, utilisez le type de contrôle prévu pour ce choix. Si plusieurs réponses sont possibles, précisez-le. Cette information aide à comprendre la consigne même lorsque les choix sont répartis sur plusieurs lignes.
Conservez les mots utilisés ailleurs dans le parcours. Si la page parle d’un numéro de commande, évitez de nommer le champ « Référence dossier » pour cette même donnée. Prévoyez un exemple fictif lorsque la forme est inhabituelle. L’exemple doit respecter la règle de validation et ne doit contenir aucune donnée d’un vrai visiteur.
Vérifier que le texte désigne le bon contrôle
Un libellé peut sembler aligné avec un champ sans être associé à ce champ dans le document. Dans un formulaire généré par une extension, vérifiez d’abord les réglages du champ lui-même. Utilisez le libellé fourni par le composant lorsqu’il produit l’association prévue. Si vous intervenez dans le balisage, une étiquette explicite associe la valeur de son attribut for à l’identifiant du contrôle. Ces identifiants doivent rester uniques sur la page.
Comparez le comportement en cliquant sur le libellé puis en naviguant avec Tab. Pour une zone de texte, le clic doit normalement placer le focus dans le bon champ. Pour une case, vérifiez qu’il active la bonne option. Un lecteur d’écran ou l’arbre d’accessibilité des outils du navigateur permet de vérifier le nom annoncé. Si la page inclut deux fois le même formulaire, contrôlez que le libellé de la seconde occurrence vise bien son propre champ.
Gardez les consignes séparées du nom. Une aide courte placée près du champ peut être associée par le composant en tant que description. Si le balisage utilise aria-describedby, vérifiez que les identifiants cités pointent vers des éléments présents et pertinents, et que l’aide et l’erreur restent disponibles quand elles sont toutes deux nécessaires. Évitez de remplacer une association correcte par un nom ajouté à la main dans plusieurs endroits.
Sur téléphone, observez l’ordre entre le libellé, le champ et la description lorsque la mise en page s’empile. Une description coincée sous une autre colonne peut sembler désigner le champ suivant. Corrigez alors la disposition du composant et contrôlez à nouveau le parcours au clavier.
Approche 1. Utiliser les réglages du formulaire en place
Avec WPForms, ouvrez WPForms > Tous les formulaires, puis le formulaire identifié. Dans le constructeur, sélectionnez un champ. Dans les options du champ, vérifiez le libellé, la description et le réglage Obligatoire. Dans les options avancées, cherchez l’option qui masque le libellé si vous n’en voyez aucun sur la page. Sur la copie, réaffichez le libellé et comparez le rendu du champ rempli et du champ vide. Une étiquette présente dans le tableau des entrées ne suffit pas à confirmer ce que lit le visiteur.
Si vous envisagez de changer les messages par défaut de WPForms, ouvrez WPForms > Réglages > Validation avec les droits nécessaires. Ces réglages sont communs aux formulaires du site. Les messages proposés dépendent de la licence et des modules installés. Avant de modifier un message générique, vérifiez qu’il reste vrai pour les autres champs et les autres formulaires. Conservez les variables utilisées par le message lorsque la documentation l’indique. Pour une consigne propre à un seul champ, commencez par sa description et examinez ensuite les possibilités du composant.
Avec Contact Form 7, ouvrez Contact > Formulaires de contact et identifiez le formulaire par son titre et le bloc ou le code court de la page. L’onglet Formulaire sert au libellé et aux consignes. L’onglet Messages sert aux retours de validation et au résultat global. Faites correspondre chaque modification au bon onglet. Vérifiez le formulaire affiché dans la page après l’enregistrement sur la copie.
Si le site utilise un autre constructeur, cherchez les options équivalentes du champ et du formulaire. Relevez leur portée. Le même écran peut proposer une aide locale et des messages partagés par plusieurs formulaires. Gardez une copie des réglages concernés avant l’essai.
Approche 2. Ajuster le modèle de formulaire Contact Form 7
Dans l’onglet Formulaire de Contact Form 7, un élément label peut contenir une balise qui génère un seul contrôle. Dans l’exemple, label, fieldset et legend sont des éléments HTML. Contact Form 7 interprète les balises entre crochets pour générer les contrôles. Collez le fragment dans l’onglet Formulaire de l’extension. La balise email avec un astérisque rend le champ obligatoire. Le nom technique your-email reste disponible pour les modèles de courrier ou les intégrations qui le lisent. Si le formulaire utilise déjà un autre nom, conservez-le. Une modification de libellé visible ne justifie pas de changer les balises de courrier.
Pour plusieurs cases, gardez une légende commune et laissez l’option use_label_element créer une étiquette pour chaque choix. Évitez d’enfermer toutes les cases dans une seule étiquette. L’exemple présente un choix facultatif de créneaux. Pour exiger au moins une réponse parmi plusieurs choix, Contact Form 7 propose checkbox*. Pour demander un seul choix obligatoire, il propose radio. Adaptez aussi la légende et la consigne au type retenu. Vérifiez que le texte de chaque option reste relié à la bonne case.
Placez ces fragments uniquement dans le formulaire concerné sur la copie. Ils illustrent un champ et un groupe, à intégrer au balisage déjà maintenu. Gardez le bouton d’envoi et les autres champs du formulaire existant. Ouvrez la page de recette et vérifiez les libellés rendus et l’ordre des options. Si le thème compacte le formulaire, contrôlez la lecture sur une fenêtre étroite avant de modifier les styles. Pour revenir en arrière, restaurez le fragment d’origine et confirmez que les noms techniques attendus sont toujours présents.
<label>Adresse e-mail de contact (obligatoire)
[email* your-email]
</label>
<fieldset>
<legend>Créneaux souhaités (facultatif)</legend>
[checkbox your-slots use_label_element "Mardi matin" "Jeudi après-midi"]
</fieldset>Transformer les erreurs en étapes de correction
Un message utile identifie le problème et aide à reprendre le travail. Pour un champ obligatoire vide, indiquez qu’il doit être rempli. Pour un format incorrect, précisez la donnée attendue avec un exemple adapté. Un message de taille de fichier doit refléter la limite de ce formulaire. N’utilisez pas la même limite chiffrée dans un message partagé lorsque les champs de fichier du site ont des plafonds différents.
Dans Contact Form 7, modifiez les textes voulus dans l’onglet Messages. Choisissez le retour approprié, comme un champ obligatoire manquant ou un format e-mail incorrect, et utilisez du texte simple. Un message global peut inviter à vérifier les champs signalés. Le message près du champ doit donner la correction précise. Avec WPForms, conservez le périmètre commun des réglages de validation et vérifiez un second formulaire si vous changez un texte partagé.
Vérifiez que l’erreur reste lisible après saisie et qu’elle n’est pas signalée seulement par une couleur. Pour un formulaire long, un résumé en haut peut orienter vers les champs à corriger lorsque le composant le permet. Contrôlez les liens et le focus si un résumé est proposé. Une personne utilisant un lecteur d’écran doit pouvoir retrouver l’erreur au bon champ et entendre le retour global important. Sur un formulaire personnalisé, demandez au mainteneur de préserver la consigne et de relier l’erreur au contrôle, par exemple avec aria-describedby. Si le composant utilise aria-invalid, vérifiez que son état suit la validation et qu’il est rétabli après correction. Pour un retour asynchrone, vérifiez le mécanisme d’annonce déjà fourni avant d’en ajouter un.
Préservez les valeurs correctes pendant l’essai de validation. Certains champs sensibles ou fichiers peuvent demander une nouvelle saisie selon la configuration. Si c’est nécessaire, indiquez-le clairement. Une erreur doit permettre de reprendre le formulaire sans perdre inutilement les réponses déjà acceptées.
Contrôler le formulaire avec des erreurs de recette
Sur votre copie autorisée, sauvegardez les réglages des sorties avant le premier essai. Dans WPForms, ouvrez le constructeur puis Réglages > Notifications. Désactivez les notifications dont le test n’a pas besoin ou remplacez leurs destinataires, y compris les adresses insérées automatiquement, par une boîte de recette sous votre contrôle. Dans Contact Form 7, vérifiez les destinataires et les en-têtes de Mail et de Mail (2), si ce dernier est actif. Désactivez l’envoi secondaire si vous ne le testez pas. Sur la copie, débranchez les webhooks et les autres intégrations externes dont l’essai n’a pas besoin.
Préparez trois envois avec des données fictives. Laissez d’abord l’adresse obligatoire vide, puis saisissez « essai-sans-arobase ». Vérifiez à chaque fois que l’envoi est refusé et que le message correspond à l’erreur. Corrigez ensuite l’adresse avec une valeur fictive au bon format et laissez le groupe facultatif vide. Si le formulaire comporte une réponse automatique active pour cet essai, utilisez votre adresse de recette. Vérifiez que le formulaire accepte l’envoi et affiche sa confirmation.
Pour chaque erreur, observez le message, sa proximité avec le champ et la destination du focus. Une erreur visible uniquement après un déplacement de souris peut être difficile à retrouver au clavier. Refaites l’essai avec Tab et Majuscule avec Tab, puis vérifiez qu’aucune commande n’est inaccessible. Si vous utilisez un lecteur d’écran, écoutez le nom du champ, son état et le message disponible après la validation. Comparez le résultat avec le comportement attendu pour ce composant.
Contrôlez aussi le parcours à faible largeur et avec un agrandissement du texte. Une ligne d’erreur peut passer sous un bouton ou au-delà d’un conteneur fixe. Vérifiez les champs longs, les groupes de cases et le premier message après envoi. Si une modification de style est nécessaire, ciblez le formulaire ou sa zone et comparez un autre formulaire du site si le style est partagé.
Notez séparément la confirmation affichée, l’entrée de recette si le site enregistre les soumissions et l’arrivée du message si vous testez le courrier. Pour vérifier la livraison, comparez le contenu de la boîte de recette avec l’envoi valide. Après le test, supprimez les entrées fictives si elles ont été conservées et restaurez les destinataires, notifications et intégrations temporaires selon la configuration prévue pour la copie.
Restaurer le réglage ciblé et transmettre une preuve
Si un libellé ou une consigne a été modifié dans un seul formulaire, remettez le texte sauvegardé pour revenir à l’état initial. Dans Contact Form 7, restaurez le fragment Formulaire ou le message concerné sans réimporter une définition entière. Dans WPForms, distinguez les options du champ et les textes de validation communs. Si vous restaurez un réglage commun, vérifiez les formulaires où il s’applique.
Après une modification de balisage, vérifiez que les noms techniques des champs, les options attendues et les destinations prévues sont encore en place. Comparez le formulaire affiché à la copie de départ. Si un composant traduit les textes, examinez aussi la langue de la page. Un message peut être corrigé sur la version principale et rester ancien ailleurs.
Conservez une courte fiche de validation. Indiquez la page, le formulaire, le nom du champ, le texte initial, le texte retenu et le comportement attendu. Pour une erreur, décrivez la donnée fictive qui la déclenche et la correction qui la fait disparaître. Une capture expurgée peut aider si elle montre le champ et son message sans valeur personnelle.
Si une erreur reste invisible alors que le texte existe dans les réglages, examinez la réponse et les scripts de la page avec le mainteneur. Consignez alors la limite du contrôle. Une nouvelle formulation ne corrige pas une réponse jamais affichée. Gardez les libellés et consignes utiles pendant cette enquête, puis vérifiez une dernière fois le parcours du premier champ jusqu’au message final.
