### [Comment mettre en majuscules les champs de formulaire](https://wpforms.com/developers/how-to-capitalize-form-field-inputs/)
**Publié :** 9 juin 2021
**Auteur :** Équipe éditoriale
**Extrait :** Ce tutoriel vous montrera comment utiliser CSS avec JavaScript pour appliquer dynamiquement le texte à mettre en majuscules au fur et à mesure que le champ est complété.
**Contenu :**
## Introduction
Souhaitez-vous mettre en majuscules les champs de formulaire sur votre WPForms ? Vous pouvez facilement utiliser CSS et **text-transform** pour formater les valeurs des champs, mais l'entrée sera enregistrée exactement telle qu'elle est tapée. En utilisant un petit extrait JavaScript, vous pouvez, en temps réel, garantir que ces valeurs sont affichées et stockées avec la mise en majuscules.
Dans ce tutoriel, nous vous guiderons à travers chaque étape pour y parvenir.
## Création du formulaire
Tout d'abord, vous devrez créer votre formulaire. Aux fins de ce tutoriel, nous avons ajouté un champ de formulaire **Texte long** et un champ **Texte sur une seule ligne** à notre formulaire.
Si vous avez besoin d'aide pour créer un formulaire, [veuillez consulter cette documentation](https://wpforms.com/docs/creating-first-form/ "Création de votre premier formulaire").
## Ajout du nom de la classe CSS
Ensuite, nous allons utiliser une classe CSS pour chacun de ces champs de formulaire afin de déclencher la règle CSS **text-transform** que nous ajouterons à une autre étape. Pour ajouter la classe CSS requise, cliquez sur le champ **Texte sur une seule ligne** dans votre constructeur de formulaire, puis cliquez pour ouvrir les **Avancées**.
Sous **Classes CSS**, ajoutez **capitalize** et répétez ces étapes pour le champ **Texte long** également.
## Options d'implémentation
### Utilisation de CSS uniquement (facultatif)
Ce CSS personnalisé signifie que le champ de formulaire s'affichera en majuscules, mais l'entrée affichera toujours les valeurs du champ exactement telles qu'elles sont tapées.
Si vous avez besoin d'aide sur comment et où ajouter du CSS personnalisé, [veuillez consulter ce tutoriel](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "Comment ajouter des styles CSS personnalisés pour WPForms").
Copiez et collez simplement ce CSS sur votre site.
```
.capitalize {
text-transform: capitalize;
}
```
Si vous souhaitez voir ce que la propriété CSS `text-transform` peut utiliser d'autre, [consultez la documentation de Mozilla](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform).
### Utilisation de JavaScript uniquement (recommandé)
Pour mettre en majuscules les valeurs des champs de formulaire à la volée pendant que le formulaire est complété, ainsi que pour vous assurer que les informations d'entrée sont stockées avec la mise en majuscules, nous allons ajouter un petit script qui mettra immédiatement en majuscules le champ au fur et à mesure que le texte est tapé.
Pour obtenir de l'aide sur l'ajout de JavaScript à votre site, [veuillez consulter ce tutoriel](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "Comment ajouter du PHP ou du JavaScript personnalisé pour WPForms").
```
/*
* Mise en majuscules du texte des champs de formulaire
*
* @link https://wpforms.com/developers/how-to-capitalize-form-field-inputs/
*/
function wpf_dev_capitalize() {
?>
**Catégories :** Tutoriels
**Tags :** CSS, Javascript, JS, PHP
---