CSS personnalisé pour les formulaires

Les réglages Style d'un formulaire (préréglage, couleurs, arrondis, espacements, polices, effets…) couvrent l'essentiel. Le CSS personnalisé sert pour le reste : un détail que ces réglages ne proposent pas.

English version

Où le trouver

• Un formulaire (contact ou inscription newsletter) : dans sa fiche, section Style, bouton Personnaliser, puis Ajouter du CSS personnalisé en bas du panneau.
• Tous les formulaires de contact d'un coup : Formulaires de contact → Réglages par défaut, même chemin (Personnaliser → Ajouter du CSS personnalisé).
• Tous les formulaires d'inscription d'un coup (depuis la 0.9.2) : Newsletters → Formulaires → Réglages par défaut → Ajouter du CSS personnalisé.

Le CSS s'enregistre tout seul quand vous quittez le champ. Il s'applique au site dès l'enregistrement ; l'aperçu de l'administration le prend en compte au prochain chargement de la page.

La seule règle à retenir

Chaque formulaire porte une classe à son numéro, par exemple .lrob-etk-form-12. Elle est affichée au-dessus du champ CSS, avec un bouton pour la copier.

Commencez chaque règle par cette classe : la règle ne touchera que ce formulaire.

.lrob-etk-form-12 button.lrob-etk-form-submit {
    border-radius: 999px;
}

Dans les Réglages par défaut, commencez par la classe de la famille : .lrob-etk-form--contact pour tous les formulaires de contact, .lrob-etk-form--signup pour tous les formulaires d'inscription. (.lrob-etk-form seul toucherait les deux familles.) Ces deux classes existent depuis la 0.9.2 ; en 0.9.1, utilisez .lrob-etk-form.

Pourquoi ma règle ne marche pas ?

1. Il manque la balise. Pour résister aux thèmes, le plugin cible ses champs avec leur balise (input, select, textarea, button). Écrivez-la aussi : .lrob-etk-form-12 input et non .lrob-etk-form-12 .un-champ.
2. Le réglage existe déjà dans « Personnaliser ». Couleurs, arrondis, espacements, tailles réglés dans le panneau passent avant le CSS personnalisé. Changez-les dans le panneau, ou ajoutez !important à votre règle.
3. Le thème a une règle plus précise. Rare, mais !important règle aussi ce cas.

Recettes à copier

Remplacez 12 par le numéro de votre formulaire.

Bouton en capitales, espacé

.lrob-etk-form-12 button.lrob-etk-form-submit {
    text-transform: uppercase;
    letter-spacing: .08em;
}

Bouton sur toute la largeur

.lrob-etk-form-12 button.lrob-etk-form-submit {
    width: 100%;
}

Libellés plus grands

.lrob-etk-form-12 .lrob-etk-form-label {
    font-size: 1.1em;
}

Masquer les textes d'aide sous les champs

.lrob-etk-form-12 .lrob-etk-form-helper {
    display: none;
}

Texte de la case de consentement plus discret

.lrob-etk-form-12 .lrob-etk-form-field--tracking-consent .lrob-etk-form-checkbox-inline {
    font-size: .85em;
    opacity: .8;
}

Grand champ de message

.lrob-etk-form-12 textarea {
    min-height: 12em;
}

Message de réussite centré, en gras

.lrob-etk-form-12 .lrob-etk-form-status {
    text-align: center;
    font-weight: 700;
}

Les variables

La façon la plus simple de changer une couleur ou une taille partout dans le formulaire : définir une variable sur le formulaire lui-même. Elle ne s'applique que si le panneau Personnaliser laisse ce réglage par défaut (sinon, ajoutez !important).

.lrob-etk-form-12 {
    --lrob-etk-cf-accent: #e63946;
    --lrob-etk-cf-btn-bg: #e63946;
}

Variable	Ce qu'elle change
--lrob-etk-cf-accent	Couleur d'accent (champ actif, liens)
--lrob-etk-cf-btn-bg	Fond du bouton
--lrob-etk-cf-btn-hover-bg	Fond du bouton au survol
--lrob-etk-cf-accent-fg	Texte du bouton
--lrob-etk-cf-form-bg	Fond du formulaire
--lrob-etk-cf-form-border	Bordure du formulaire
--lrob-etk-cf-bg	Fond des champs
--lrob-etk-cf-input-fg	Texte des champs
--lrob-etk-cf-placeholder	Texte d'exemple dans les champs
--lrob-etk-cf-border	Bordure des champs
--lrob-etk-cf-border-focus	Bordure du champ actif
--lrob-etk-cf-fg	Texte des libellés
--lrob-etk-cf-muted	Textes d'aide
--lrob-etk-cf-success-fg / --lrob-etk-cf-success-bg	Message de réussite (texte / fond)
--lrob-etk-cf-error / --lrob-etk-cf-error-bg	Erreurs (texte / fond)
--lrob-etk-cf-radius	Arrondi des champs
--lrob-etk-cf-btn-radius	Arrondi du bouton
--lrob-etk-cf-border-width	Épaisseur des bordures
--lrob-etk-cf-spacing	Espace entre les champs
--lrob-etk-cf-form-pad	Marge intérieure du formulaire
--lrob-etk-cf-form-max-width	Largeur maximale du formulaire
--lrob-etk-cf-field-pad	Marge intérieure des champs
--lrob-etk-cf-btn-pad	Marge intérieure du bouton
--lrob-etk-cf-font-size	Taille du texte
--lrob-etk-cf-helper-size	Taille des textes d'aide et des erreurs
--lrob-etk-cf-font	Police du formulaire
--lrob-etk-cf-label-font	Police des libellés
--lrob-etk-cf-label-weight	Graisse des libellés (400, 600…)

Les classes utiles

Classe	Élément
.lrob-etk-form-12	Le formulaire entier (numéro 12)
.lrob-etk-form--contact / .lrob-etk-form--signup	Tous les formulaires de contact / d'inscription
.lrob-etk-form-row / .lrob-etk-form-col	Une ligne / une colonne
.lrob-etk-form-field	Un champ avec son libellé, son aide et son erreur
.lrob-etk-form-field--text, --email, --textarea, --select, --phone, --checkbox…	Un champ d'un type donné
.lrob-etk-form-field--tracking-consent	La case de consentement au suivi (newsletter)
.lrob-etk-form-label	Un libellé
.lrob-etk-form-helper	Un texte d'aide
.lrob-etk-form-error	Un message d'erreur
.lrob-etk-form-checkbox-inline	Une case à cocher seule avec son texte
.lrob-etk-form-option	Une option d'un groupe de cases ou de boutons radio
button.lrob-etk-form-submit	Le bouton d'envoi
.lrob-etk-form-status	Le message après l'envoi
.lrob-etk-thread	La page de conversation d'un formulaire de contact

Ce qui est refusé

C'est du CSS, pas du HTML : les balises sont supprimées, et un bloc qui contient </style, @import, expression( ou javascript: est refusé en entier.