### [Ajouter des classes CSS personnalisées à WPForms](https://wpforms.com/docs/how-to-add-custom-css-classes-to-wpforms/) **Publié le :** 23 novembre 2023 **Auteur :** Umair Majeed **Extrait :** Apprenez à ajouter des classes CSS personnalisées pour styliser des éléments de formulaire spécifiques. **Contenu :** Souhaitez-vous personnaliser l’apparence de vos formulaires WordPress ? Dans WPForms, vous pouvez facilement ajouter des classes et des styles CSS 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. **Remarque :** Si vous débutez en CSS, notre [guide pour débutants sur la stylisation des formulaires avec CSS](https://wpforms.com/docs/how-to-style-wpforms-with-custom-css-beginners-guide/ "Comment styliser WPForms avec du CSS personnalisé (Guide pour débutants)") est le meilleur endroit pour commencer. --- ### 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** **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. **Remarque :** Si vous souhaitez styliser vos formulaires sans utiliser de classes CSS personnalisées ni écrire de code, consultez notre tutoriel sur la [stylisation des formulaires](https://wpforms.com/docs/styling-your-forms/). ### Ajout de classes CSS personnalisées dans WPForms Dans WPForms, vous pouvez ajouter vos propres classes CSS personnalisées à des 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](https://wpforms.com/docs/creating-first-form/ "Créer votre premier 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` **Remarque :** Le champ Classes CSS peut également être utilisé pour afficher les champs de formulaire dans une [disposition multicolonne](https://wpforms.com/docs/how-to-create-multi-column-form-layouts-in-wpforms/ "Comment créer des mises en page de formulaires multicolonnes dans WPForms") et comme [une seule colonne sur mobile](https://wpforms.com/docs/how-to-display-fields-in-a-single-column-on-mobile/ "Comment afficher les champs dans une seule colonne 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 d’envoi de tous les formulaires d’inscription sur votre site soient stylisés d’une manière, et que les boutons d’envoi 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 d’envoi 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 **Classe CSS du formulaire** et **Classe CSS du bouton d’envoi**.  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](https://wpforms.com/docs/how-to-display-your-form-in-a-single-line/ "Comment 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 vaste gamme d’options de style disponibles. Pour des instructions sur la façon de commencer à créer du CSS, veuillez consulter [notre guide CSS pour débutants](https://wpforms.com/docs/how-to-style-wpforms-with-custom-css-beginners-guide/ "Comment styliser WPForms avec du CSS personnalisé (Guide pour débutants)"). Pour notre exemple, nous ajouterons simplement un arrière-plan bleu à tout champ portant la classe `wpf-blue-background`. Lors du ciblage d’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 de dépannage CSS](https://wpforms.com/docs/how-to-troubleshoot-css-not-working/#important-rule "Comment dépanner le CSS qui ne fonctionne pas") contient plus de détails. #### Ajout de CSS à votre site WordPress Un moyen rapide et simple 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 **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 ? Veuillez consulter [notre guide de dépannage CSS](https://wpforms.com/docs/how-to-troubleshoot-css-not-working/ "Comment dépanner le CSS qui ne fonctionne pas") pour 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](https://wpcode.com/). Pour des instructions sur la façon d’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](https://wpforms.com/docs/using-wpforms-code-snippets/). Si vous souhaitez voir d’autres méthodes pour ajouter du CSS, veuillez consulter le tutoriel de [WPBeginner sur la façon d’ajouter du CSS personnalisé à WordPress](http://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/ "Comment ajouter facilement du CSS personnalisé à votre site WordPress"). Voilà ! Vous pouvez maintenant ajouter des classes CSS personnalisées pour styliser des zones spécifiques de vos formulaires. Souhaitez-vous également afficher et modifier nos styles de formulaire intégrés ? Consultez [notre tutoriel sur la personnalisation des champs de formulaire individuels](https://wpforms.com/docs/how-to-customize-the-style-of-individual-form-fields "Comment personnaliser le style des champs de formulaire individuels") pour tous les détails. **Catégories :** Stylisation, Stylisation et personnalisation ---