Résumé IA
Souhaitez-vous personnaliser l'apparence de vos formulaires WordPress ? Dans WPForms, vous pouvez facilement ajouter des classes CSS et des styles personnalisés pour que vos formulaires aient l'apparence que vous souhaitez.
Ce tutoriel vous montrera comment ajouter des classes CSS personnalisées pour styliser des éléments de formulaire spécifiques, ainsi que comment ajouter du CSS personnalisé à votre site WordPress.
Dans cet article
Note : Si vous débutez en CSS, notre guide pour débutants sur la stylisation des formulaires avec CSS est le meilleur point de départ.
Qu'est-ce qu'une classe CSS ?
Les classes CSS sont un moyen de cibler les éléments que vous souhaitez styliser sur votre site Web.
Dans WPForms, les champs se voient attribuer automatiquement plusieurs classes CSS. Par exemple, si un champ est défini sur une Taille de champ de Grande, il se verra attribuer la classe CSS wpforms-field-large.
En ajoutant une classe CSS personnalisée, vous pouvez facilement cibler un champ de formulaire spécifique ou appliquer les mêmes styles à plusieurs champs.
Note : Si vous souhaitez styliser vos formulaires sans utiliser de classes CSS personnalisées ni écrire de code, envisagez de consulter notre tutoriel sur la stylisation des formulaires.
Ajout de classes CSS personnalisées dans WPForms
Dans WPForms, vous pouvez ajouter vos propres classes CSS personnalisées aux champs de formulaire individuels, au bouton d'envoi ou au conteneur autour de votre formulaire.
Ajout de classes CSS à des champs de formulaire individuels
Pour ajouter une classe CSS personnalisée à un champ de formulaire, vous devrez créer un nouveau formulaire ou modifier un formulaire existant.
Dans le panneau d'aperçu du constructeur de formulaires, cliquez sur le champ pour ouvrir ses Options de champ. Ensuite, ouvrez l'onglet Avancé et recherchez le champ intitulé Classes CSS.
Lors de la dénomination d'une classe CSS, vous ne pouvez utiliser que des lettres ou des chiffres, et aucun espace n'est autorisé. Les noms de classe sont sensibles à la casse, il est donc recommandé d'utiliser des lettres minuscules. Si vous souhaitez que le nom de la classe contienne plus d'un mot, incluez un trait d'union (-) ou un trait de soulignement (_) à la place d'un espace.
Pour éviter tout problème, commencez toujours vos noms de classe par une lettre.
Pour cet exemple, nous nommerons notre classe CSS wpf-blue-background.
En ajoutant wpf- au début de nos classes, nous sommes moins susceptibles d'ajouter un nom de classe déjà utilisé par le thème de notre site. Cela aidera à éviter les conflits de style et rendra plus probable l'application réussie de nos styles.
Lorsque vous êtes prêt, ajoutez la classe CSS wpf-blue-background au champ Classes CSS.
Si vous le souhaitez, vous pouvez également ajouter des classes supplémentaires à ce champ. Pour ce faire, ajoutez simplement un espace entre chaque nom de classe. Par exemple :
wpf-blue-background wpf-bold-font wpf-xl-margin
Note : Le champ Classes CSS peut également être utilisé pour afficher les champs de formulaire dans une mise en page multicolonne et comme une mise en page à colonne unique sur mobile.
Ajout de classes CSS à un conteneur de formulaire ou à un bouton d'envoi
Pour certains styles, il peut être utile de cibler le conteneur du formulaire ou son bouton d'envoi.
Par exemple, vous voudrez peut-être que les boutons de soumission de tous les formulaires d'inscription sur votre site soient stylisés d'une certaine manière, et que les boutons de soumission de tous les formulaires de contact généraux soient stylisés d'une manière différente. Un moyen simple d'y parvenir est d'ajouter la même classe CSS à tous les boutons de soumission que vous souhaitez styliser de la même manière.
Pour ajouter un nom de classe CSS personnalisé pour l'une ou l'autre option, ouvrez le constructeur de formulaires et accédez à Paramètres » Général. De là, allez dans la section Avancé et vous verrez les champs pour Classe CSS du formulaire et Classe CSS du bouton de soumission.
Si vous souhaitez ajouter plus d'un nom de classe, séparez-les simplement par un espace.
Remarque : Si vous le souhaitez, vous pouvez utiliser une classe CSS de formulaire intégrée pour afficher votre formulaire sur une seule ligne.
Création et ajout de styles CSS pour votre site
Maintenant que vous avez ajouté une classe CSS personnalisée à un champ de votre formulaire, vous pouvez créer les styles que vous souhaitez appliquer.
Création de styles CSS
Le CSS est un outil puissant avec une multitude d'options de style disponibles. Pour des instructions sur la façon de commencer à créer du CSS, veuillez consulter notre guide du débutant en CSS.
Pour notre exemple, nous allons simplement ajouter un arrière-plan bleu à tout champ portant la classe wpf-blue-background. Pour cibler un nom de classe en CSS, il doit toujours commencer par un point (.), par exemple .wpf-blue-background.
Comme de nombreux styles sont déjà appliqués à votre formulaire, il est également judicieux de rendre votre CSS plus spécifique. Pour ce faire, ajoutez simplement .wpforms-form devant votre nom de classe personnalisé.
Voici notre exemple de CSS :
.wpforms-form .wpf-blue-background {
background-color: #d1effd;
}
Si vos styles personnalisés ne sont pas appliqués avec succès, vous pouvez inclure !important avant le point-virgule.
Remarque : L'utilisation de !important n'est nécessaire que si vos styles ne sont pas appliqués autrement. Notre guide sur le dépannage CSS contient plus de détails.
Ajouter du CSS à votre site WordPress
Un moyen rapide et facile d'ajouter du CSS personnalisé à votre site est d'utiliser le personnalisateur de thème WordPress. C'est une option populaire car elle est disponible dans presque tous les thèmes et dispose d'une zone de prévisualisation en direct.
Pour accéder à la zone CSS du personnalisateur de thème, accédez à Apparence » Personnaliser, puis sélectionnez l'onglet intitulé CSS additionnel.
Ensuite, ajoutez votre extrait de CSS personnalisé. Lorsque vous êtes prêt, cliquez sur Publier.
Voici à quoi ressemble maintenant notre formulaire d'exemple avec la classe CSS et les styles CSS appliqués :
Remarque : Vos styles personnalisés ne s'affichent pas ? Consultez notre guide sur le dépannage CSS pour connaître les problèmes et solutions les plus courants.
Une autre façon d'ajouter du CSS personnalisé qui reste cohérent lors des changements de thème est d'utiliser WPCode. Pour savoir comment appliquer du CSS personnalisé avec WPCode, y compris l'utilisation de sa bibliothèque d'extraits de code CSS pré-construits, consultez notre guide sur l'utilisation d'extraits de code.
Si vous souhaitez découvrir d'autres méthodes pour ajouter du CSS, veuillez consulter le tutoriel de WPBeginner sur la façon d'ajouter du CSS personnalisé à WordPress.
C'est tout ! Vous pouvez maintenant ajouter des classes CSS personnalisées pour styliser des zones spécifiques de vos formulaires.
Souhaitez-vous également consulter et modifier les styles de formulaire intégrés ? Consultez notre tutoriel sur la personnalisation des champs de formulaire individuels pour tous les détails.