Changer le style d’un formulaire WordPress : case à cocher, largeur, bouton et RTL

Pourquoi le style d'un formulaire WordPress se dérègle

Sur les forums de WordPress.org, la question revient chaque semaine sous des formes différentes : la case de consentement occupe 90 % de la largeur, le CSS ajouté au bouton d'envoi ne change rien sur le site, les messages d'erreur restent à gauche sur un site en arabe. Derrière ces symptômes, le style d'un formulaire WordPress obéit à une règle simple : il hérite de tout ce que le thème déclare.

Un thème écrit souvent des règles larges, du type « tous les champs à 100 % de largeur ». Elles visent les champs de texte, mais touchent aussi les cases à cocher et les boutons radio. Le formulaire ajoute ses propres règles, et c'est la plus précise des deux qui l'emporte, pas forcément la dernière écrite.

Avant de corriger quoi que ce soit, ouvrez la page dans le navigateur, faites un clic droit sur l'élément en cause et choisissez « Inspecter ». Le panneau des styles montre chaque règle appliquée, le fichier qui la déclare et les règles barrées parce qu'une autre a gagné. C'est là que se trouve la réponse, dans neuf cas sur dix.

Ce que nexya forms prend en charge

nexya forms est un module de nexya Pro, vendu sur nexya.dev et livré par Freemius après l'achat. Comme tout module nexya, il s'allume depuis le hub, et tant qu'il est éteint, aucun de ses hooks ne tourne sur le site.

Le module applique un seul style à tous les formulaires du site. Vous n'avez donc pas à reprendre la mise en forme formulaire par formulaire, et un formulaire ajouté plus tard ressemble aux autres. Les listes déroulantes et le calendrier de sélection de date sont stylés eux aussi, au lieu de garder l'apparence brute du navigateur, qui change d'un appareil à l'autre.

Depuis la version 1.3.2, le bouton d'envoi peut porter une icône avant et/ou après son libellé : l'une de seize icônes proposées, ou une image prise dans la médiathèque. L'icône est centrée sur le texte, et l'ordre suit les langues qui s'écrivent de droite à gauche.

Pour le spam, le module Mail fournit un captcha invisible pour les formulaires du site. Il n'ajoute pas de case à cocher ni de cadre à mettre en forme : il n'y a rien à styler de ce côté.

La case de consentement prend toute la largeur

C'est le cas le plus fréquent. Le thème déclare une largeur de 100 % pour les champs de saisie, sans exclure les cases à cocher. Résultat : la case s'étire, et le texte du consentement est repoussé à la ligne ou écrasé.

La correction consiste à rendre aux cases à cocher et aux boutons radio leur largeur naturelle, en limitant la règle à vos formulaires pour ne rien casser ailleurs. Dans l'inspecteur, repérez la classe ou l'identifiant du conteneur du formulaire, puis écrivez une règle de ce genre, en remplaçant le sélecteur par celui que vous avez relevé :

• Sélecteur du conteneur suivi de input[type="checkbox"] et input[type="radio"]
• Propriétés : width: auto; et, si besoin, flex: none; quand le thème place la case dans une ligne flexible
• Vérifiez ensuite le rendu sur téléphone, où les règles du thème changent souvent

Changer l'apparence d'un formulaire, étape par étape

1. 1

   Allumer le module de formulaires

   Avec nexya Pro installé, allumez nexya forms depuis le hub. Le style commun s'applique alors à tous les formulaires du site.

   
2. 2

   Ajouter l'icône du bouton d'envoi

   Dans l'éditeur du formulaire, choisissez une icône avant et/ou après le libellé du bouton, parmi seize, ou une image de la médiathèque.

   
3. 3

   Inspecter ce qui reste de travers

   Sur la page publiée, faites un clic droit sur l'élément mal affiché et choisissez « Inspecter » pour voir la règle du thème qui gagne et le fichier qui la déclare.

   
4. 4

   Corriger en CSS, puis vider le cache

   Ajoutez une règle limitée au conteneur du formulaire dans le CSS additionnel (width: auto pour les cases à cocher, text-align: start pour le RTL), videz le cache de pages et vérifiez sur ordinateur et sur téléphone.

   

Le CSS du bouton d'envoi ne s'applique pas

Quand une règle ajoutée au bouton ne change rien sur le site, l'inspecteur donne la cause. Trois situations reviennent.

La règle est barrée : une autre, plus précise, l'emporte. Ajoutez le sélecteur du conteneur du formulaire devant celui du bouton pour gagner en précision. N'utilisez !important qu'en dernier recours, car il rend les corrections suivantes plus difficiles.

La règle n'apparaît pas du tout : le CSS n'est pas chargé. Il a pu être placé au mauvais endroit, ou une ancienne version de la page est servie par un cache. Le CSS additionnel de WordPress se trouve dans l'outil de personnalisation pour les thèmes classiques, et dans l'éditeur du site, sous les styles, pour les thèmes à blocs. Videz ensuite le cache de pages et rechargez sans le cache du navigateur.

La règle s'applique dans l'éditeur mais pas sur le site : l'aperçu de l'éditeur et la page publique ne chargent pas toujours les mêmes feuilles de style. Testez toujours sur la page publiée.

Pour une icône sur le bouton, inutile d'écrire du CSS avec nexya forms : le réglage existe depuis la version 1.3.2, et il gère lui-même le centrage et l'ordre en langue RTL.

Régler la largeur du formulaire

Un formulaire prend la largeur du bloc qui le contient. S'il paraît trop large sur un grand écran, le plus propre est de limiter son conteneur plutôt que chaque champ : une largeur maximale (max-width) en pixels ou en caractères, et des marges automatiques à gauche et à droite pour le centrer.

Les faits connus sur nexya forms ne mentionnent pas de réglage de largeur dédié. Cette limite se pose donc dans la mise en page elle-même (colonne, groupe de blocs, section du constructeur) ou par une règle CSS sur le conteneur.

Formulaires en arabe, en hébreu ou en persan (RTL)

Quand le site est dans une langue qui s'écrit de droite à gauche, WordPress ajoute l'attribut dir="rtl" à la page. Les éléments bien écrits suivent d'eux-mêmes. Ceux qui restent à gauche ont presque toujours une règle text-align: left ou un positionnement fixé à gauche, déclaré par le thème ou par le formulaire.

Ce que nexya forms annonce pour le RTL, c'est l'ordre de l'icône et du libellé sur le bouton d'envoi. Il n'y a pas de réglage RTL annoncé pour le reste du formulaire, ni de réglage avancé des messages de validation. Si un message d'erreur reste mal aligné, la correction passe par le CSS.

La solution la plus durable consiste à remplacer left et right par les valeurs logiques start et end (text-align: start, par exemple), qui suivent le sens de la langue. À défaut, une règle limitée à [dir="rtl"] suivi du sélecteur du message suffit.

Les règles qui gagnent ne sont pas les dernières écrites, mais les plus précises.