### [Styliser les champs de formulaire dans vos formulaires](https://wpforms.com/developers/how-to-customize-the-styling-of-text-based-form-fields/)
**Publié :** 4 février 2022
**Auteur :** Umair Majeed
**Extrait :** Ce tutoriel vous montrera différentes manières de styliser les champs de formulaire textuels en utilisant CSS, de la modification de la couleur, de la taille à la forçage en minuscules ou en majuscules.
**Contenu :**
Souhaitez-vous personnaliser l'apparence du texte dans les champs de votre formulaire ? De la taille et de la couleur des polices à la transformation du texte, vous pouvez facilement améliorer les champs de texte de votre formulaire avec de simples CSS.
Ce guide vous montrera comment styliser divers champs textuels tels que l'e-mail, le texte sur une seule ligne et le texte de paragraphe.
Ce guide ne couvre pas le champ de l'éditeur de texte enrichi car il est conçu pour être contrôlé par les utilisateurs du formulaire.
## Configuration de votre formulaire
Tout d'abord, vous devrez créer votre formulaire et ajouter vos champs. Pour ce tutoriel, nous allons ajouter les champs **Nom**, **E-mail**, **Texte sur une seule ligne** et **Texte de paragraphe**.
Si vous avez besoin d'aide pour créer votre formulaire, veuillez consulter notre [documentation sur la création de formulaires](https://wpforms.com/docs/creating-first-form/).
N'appliquez pas ces styles CSS aux champs de mot de passe. Cela interférera avec la fonction de force du mot de passe et pourrait empêcher la soumission du formulaire.
## Ajout de styles personnalisés
Examinons différentes manières de styliser vos champs de texte. Pour obtenir de l'aide sur l'ajout de CSS à votre site, consultez ce tutoriel sur [l'ajout de styles CSS personnalisés](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/).
Lorsque vous ciblez des formulaires ou des champs spécifiques, vous devrez remplacer **-999** par l'ID réel de votre formulaire et les ID de champ. Si vous avez besoin d'aide pour trouver ces ID, veuillez consulter notre guide sur [la localisation des ID de formulaire et de champ](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/).
#### Taille du texte
Pour modifier la taille du texte dans les champs de formulaire :
###### Pour tous les formulaires
```
.wpforms-form input {
font-size: 20px !important;
}
```
###### Pour un champ spécifique dans un formulaire spécifique
```
#wpforms-999-field_1-container input {
font-size: 20px !important;
}
```
#### Couleur du texte
Pour modifier la couleur du texte dans les champs de formulaire :
###### Pour tous les formulaires
```
.wpforms-form input {
color: #000000 !important;
}
```
###### Pour un champ spécifique dans un formulaire spécifique
```
#wpforms-999-field_1-container input {
color: #000000 !important;
}
```
#### Transformation du texte
Pour contrôler la capitalisation du texte :
###### Pour tous les formulaires
```
.wpforms-form input {
text-transform: capitalize !important;
}
```
###### Pour un champ spécifique dans un formulaire spécifique
```
#wpforms-999-field_1-container input {
text-transform: capitalize !important;
}
```
Valeurs **text-transform** disponibles :
- **lowercase** : Force tout le texte en minuscules
- **uppercase** : Force tout le texte en majuscules
- **capitalize** : Met en majuscule la première lettre de chaque mot
Et c'est tout ce dont vous avez besoin pour personnaliser le style des champs de formulaire textuels.
WPForms propose de nombreux tutoriels CSS. Pourquoi ne pas [consulter d'autres tutoriels CSS en consultant notre liste complète](https://wpforms.com/developers/tags/css/ "Extraits CSS pour développeurs WPForms"). Nous les mettons à jour régulièrement, alors revenez souvent. Mais si vous recherchez des informations plus spécifiques sur la façon d'utiliser CSS, [rejoignez notre cercle VIP WPForms et demandez-nous là-bas](https://www.facebook.com/groups/wpformsvip "Rejoignez le cercle VIP WPForms pour des astuces rapides et des guides pratiques") !
Si vous avez des demandes spécifiques pour voir plus de tutoriels sur CSS, n'hésitez pas à nous contacter dans la [Communauté VIP WPForms sur Facebook](https://www.facebook.com/groups/wpformsvip "Communauté VIP WPForms sur Facebook") !
**Catégories :** Style
**Tags :** CSS
---