Vous souhaitez personnaliser l'affichage 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 à l'aide d'une simple feuille de style CSS.
Ce guide vous montrera comment styliser divers champs textuels tels que l'email, le texte à ligne unique et le texte à paragraphe.
Mise en place du formulaire
Tout d'abord, vous devez créer votre formulaire et ajouter vos champs. Pour ce tutoriel, nous allons ajouter les champs Nom, Courriel, Texte d'une ligne et Texte d'un paragraphe.
Si vous avez besoin d'aide pour créer votre formulaire, veuillez consulter notre documentation sur la création de formulaires.
Ajout de styles personnalisés
Examinons les différentes façons de styliser vos champs de texte. Pour obtenir de l'aide sur l'ajout de CSS à votre site, veuillez consulter ce tutoriel sur l'ajout de CSS personnalisés.
Taille du texte
Pour modifier la taille du texte dans les champs de formulaire :
Pour toutes les formes
.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 du formulaire :
Pour toutes les formes
.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 toutes les formes
.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 de transformation de texte disponibles :
- minuscules: force tout le texte à être en minuscules
- majuscules: Oblige à mettre tout le texte en majuscules
- capitaliser: Met la première lettre de chaque mot en majuscule
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 découvrir d'autres tutoriels CSS en consultant notre liste complète. Nous la mettons à jour régulièrement, alors n'hésitez pas à la consulter. Mais si vous cherchez des informations plus spécifiques sur les CSS, rejoignez notre Cercle VIP WPForms et demandez-nous!
Si vous avez des demandes spécifiques pour voir plus de tutoriels sur les CSS, n'hésitez pas à nous envoyer un ping à l'intérieur de la Communauté Facebook WPForms VIP!