Les formulaires contribués

Le besoin

11.2 Dans les formulaires contribués, définir une étiquette pour tous les champs

11.4 Dans les formulaires contribués, regrouper les champs de même nature avec la balise <fieldset>, et définir une balise <legend> pertinente

11.6 Dans les formulaires contribués, structurer les listes de choix <select> avec une balise <optgroup>

11.8 Dans les formulaires contribués, définir un intitulé pour tous les boutons

11.9 Dans les formulaires, tous les champs obligatoires sont signalés de manière accessible

11.10 Dans les formulaires, pour tous les champs obligatoires, le type de données attendu est indiqué de manière accessible

11.11 Dans les formulaires, pour chaque erreur de saisie, le type de données attendu est indiqué de manière accessible

Résultat

Le plugin « Contact Form 7 » est utilisé ici pour créer des formulaires. Il est gratuit et a été téléchargé plus d’un million de fois. Les plugins « Gravity Forms » et « Jetpack » sont également utilisés pour créer des formulaires. « Gravity Forms » est payant mais dispose de fonctionnalités plus nombreuses.

Contact Form 7 propose un formulaire de contact dont le code ne prévoit pas la liaison entre l’étiquette et son champ. Mais le code est modifiable dans l’éditeur de formulaire.

  • Les étiquettes sont saisies dans l’éditeur et ne sont pas insérées par un tag, même chose pour les balises <fieldset> et <legend> pour regrouper les champs de même nature.
  • Le tag permettant de définir une liste déroulante ne propose pas la possibilité de regrouper des options et de générer la balise <optgroup>
  • Les boutons de soumission sont insérés par un tag dans lequel l’intitulé du bouton est modifiable.
  • Les champs obligatoires sont générés avec l’attribut aria-required = « true ». Une mention est rajoutée dans l’étiquette par le concepteur.
  • Les erreurs de saisie sont générées juste après le champ. Pour être vocalisé correctement par les lecteurs d’écran, le champ est englobé dans la balise label et l’attribut role = « alert » généré sur les erreurs doit être supprimé (patch JS).

Code du formulaire par défaut

<p>Votre nom (obligatoire)<br />
 [text* your-name] </p>

<p>Votre email (obligatoire)<br />
 [email* your-email] </p>

<p>Sujet<br />
 [text your-subject] </p>

<p>Votre message<br />
 [textarea your-message] </p>

<p>[submit "Envoyer"]</p>

Code du formulaire amélioré

Ajout du filtre Akismet pour l’anti-spam sur les champs nom et email.

<p><label for="your-name">Votre nom (obligatoire)<br />
 [text* your-name id:your-name akismet:author] </label></p>

<p><label for="your-email">Votre Email (obligatoire)<br />
 [email* your-email id:your-email akismet:author_email] </label></p>

<p><label for="your-subject">Votre Sujet<br />
 [text your-subject id:your-subject] </label></p>

<p><label for="your-message">Votre message (obligatoire)<br />
 [textarea* your-message id:your-message] </label></p>

<p>[submit "Envoyer"]</p>

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *