Formulaire – AQJÉHV

L’exemple qui suit contient tous les types de champs de formulaire que vous pouvez avoir avec l’extension Jetpack.

Comme vous avez pu constater, on a des boutons radio, des cases à cocher, une liste déroulante, un champ d’édition multiligne, un champ d’édition simple, un champ d’édition courriel, un champ d’édition date, une case à cocher obligatoire et un bouton d’envoi.

Explications

Nous allons présenter le code nécessaire à la construction de ce formulaire, et ensuite fournir quelques explications.

[contact-form  to="info@aqjehv.org"   subject="Sondage"        submit_button_text="Soumettre"]
[contact-field label="Je peux aider"  type="radio"             required="1" options="Oui,Non"]
[contact-field label="Disponibilités" type="checkbox-multiple" required="1" options="Jour,Soir,Week-end"]
[contact-field label="Me joindre par" type="select"            required="1" options="Courriel,Téléphone"]    
[contact-field label="Commentaire"    type="textarea"          required="0"]
[contact-field label="Nom"            type="name"              required="1"]
[contact-field label="Courriel"       type="email"             required="1"]
[contact-field label="Naissance"      type="date"              required="0"]
[contact-field label="J'ai une DV"    type="checkbox"          required="1"]
[/contact-form]

On a [contact-form] au début, et [/contact-form] à la fin. Entre ces deux balises, on peut mettre autant de lignes de code que nécessaire.
Nous allons revenir à la fin sur la balise d’ouverture, que nous avons volontairement écourtée.
Chaque ligne commence par [contact-field et se termine par ]. Entre ces deux extrémités, on a les attributs label="", type="", required="", et dans certains cas options="".
Notez que ces attributs sont séparés les uns des autres par au moins une espace. On peut en mettre plusieurs pour rendre le code plus lisible.
Entre les guillemets de l’attribut label, on écrit tel quel le texte qui doit servir d’étiquette au champ de formulaire, et que l’utilisateur pourra lire.
Entre les guillemets de l’attribut type, on inscrit le nom qui détermine la nature du champ de formulaire. Il s’agit toujours d’un nom en anglais.
On écrit required="1" pour indiquer que le champ est requis, et required="0" pour indiquer qu’il ne l’est pas. On pourrait aussi omettre complètement l’attribut.
Les champs de formulaires qui présentent des choix ont un attribut options, alors que les autres n’en ont pas.
Entre les guillemets de cet attribut, on tape les choix un à la suite de l’autre, en les séparant avec une virgule sans espace après.
Revenons maintenant à la balise d’ouverture, où on trouve des attributs qui lui sont uniques, et qui sont tous facultatifs.
Une copie du formulaire est automatiquement envoyée à l’administrateur du site et à l’utilisateur. L’attribut to="" sert à envoyer une copie à une 3^e personne. On peut le laisser vide ou carrément l’omettre.
L’attribut subject="" contient le texte qui servira de sujet aux courriels envoyés. On peut ne rien écrire ou omettre l’attribut, mais il ne vaut mieux pas.
L’attribut submit_button_text="" sert à contrôler le texte qui apparaîtra dans le bouton d’envoi du formulaire.

Normand Lamoureux, M.A., SRDV
Expert en accessibilité du web