Masquer les labels des champs de Gravity Forms

Masquer le libellé d’un champ Gravity Forms (lien affilié) ne demande plus de code : l’option fait partie de l’éditeur de formulaires depuis la version 2.4.

Avec la version 1.9, Gravity Forms avait retiré cette option de l’interface pour améliorer l’accessibilité, notamment pour les personnes malvoyantes. Il fallait alors l’activer avec le filtre gform_enable_field_label_visibility_settings. Ce filtre est obsolète depuis la version 2.4 (documentation du filtre) et n’existe plus dans le code de Gravity Forms 3.1 : vous pouvez le retirer de votre thème.

Masquer le libellé d’un champ

Dans Formulaires, ouvrez votre formulaire et cliquez sur le champ concerné. Dans le panneau Réglages de champ, dépliez la section Apparence, puis choisissez Masqué dans la liste Visibilité du libellé du champ. Remplissez au passage le champ Espace réservé : ce texte indicatif s’affiche dans la zone de saisie et dit à vos visiteurs quoi saisir. Cliquez enfin sur Enregistrer le formulaire.

Gravity Forms affiche alors un avertissement : un libellé masqué risque d’empêcher certains visiteurs de remplir votre formulaire.

Masquer les sous-libellés

Les champs composés de plusieurs zones, comme Nom (prénom et nom) ou Adresse, affichent un sous-libellé pour chaque zone. Pour les masquer, choisissez Masqué dans la liste Emplacement du sous-libellé, toujours dans la section Apparence, et donnez un espace réservé à chaque zone dans le tableau Espaces réservés.

Un libellé masqué reste lu par les lecteurs d’écran

Gravity Forms ne supprime pas le libellé : il le garde dans le code HTML et le cache seulement à l’écran, avec une règle CSS qui le laisse lisible par les lecteurs d’écran. Un visiteur malvoyant entend donc toujours « E-mail » en arrivant sur le champ, même si seul l’espace réservé s’affiche.

Deux précautions toutefois. Un espace réservé disparaît dès que l’on commence à écrire : gardez des libellés visibles dès que votre formulaire compte plus de quelques champs. Et si vous avez coupé le CSS de Gravity Forms (filtre gform_disable_css), la règle qui cache le libellé disparaît avec lui : le libellé redevient visible. Ajoutez alors la classe de votre thème prévue pour les lecteurs d’écran, par exemple visually-hidden avec Bootstrap, comme dans mes 4 astuces pour optimiser vos formulaires Gravity Forms.

Avec une ancienne version de Gravity Forms

Avant la version 2.4, l’option n’apparaît qu’avec ce filtre, à placer dans le fichier functions.php de votre thème enfant ou dans une extension de type mu-plugin :

add_filter('gform_enable_field_label_visibility_settings', '__return_true');

Une astuce à utiliser avec parcimonie pour tenir compte de l’accessibilité de votre site.