Résumé IA
Souhaitez-vous personnaliser l’apparence du texte dans les champs de votre formulaire ? Des tailles de police et des couleurs à 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 Email, Texte sur une seule ligne et Texte de paragraphe.
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, Email, 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.
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 CSS personnalisé.
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. 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 le CSS, rejoignez notre cercle VIP WPForms et demandez-nous là-bas !
Si vous avez des demandes spécifiques pour voir plus de tutoriels sur le CSS, n’hésitez pas à nous contacter dans la Communauté VIP WPForms sur Facebook !