### [Comment personnaliser le champ Net Promoter Score](https://wpforms.com/developers/how-to-customize-the-net-promoter-score-field/)
**Publié le :** 25 novembre 2019
**Auteur :** Équipe éditoriale
**Extrait :** En utilisant CSS, vous pouvez facilement personnaliser le style du champ Net Promoter. Dans cet article, nous vous expliquerons comment faire.
**Contenu :**
Souhaitez-vous personnaliser l'apparence du champ de formulaire **Net Promoter Score** ? En utilisant un peu de CSS, vous pouvez facilement modifier l'apparence de ce champ de formulaire sur votre site. Dans ce tutoriel, nous vous montrerons comment utiliser CSS pour modifier le style de ce champ.
## Ajout du champ de formulaire
Tout d'abord, vous devrez créer un formulaire et vos champs, ainsi que le champ **Net Promoter Score**, puis configurer les options souhaitées pour ce champ.
Si vous avez besoin d'aide, [veuillez consulter la documentation](https://wpforms.com/docs/how-to-add-a-net-promoter-score-field-to-wpforms/ "Comment ajouter un champ Net Promoter Score à WPForms").
## Personnalisation du Net Promoter Score
Ensuite, vous devrez copier ce CSS sur votre site. Si vous avez besoin d'aide pour ajouter du CSS à votre site, [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").
```
form#wpforms-form-548 .wpforms-field-net_promoter_score table.modern tbody tr td input[type=radio]:checked+label {
background-color: #64B5F6;
}
form#wpforms-form-548 .wpforms-field-net_promoter_score table.modern tbody tr td label:hover
{
background-color: #64B5F6;
color: #ffffff;
}
form#wpforms-form-548 .wpforms-field-net_promoter_score table.modern tbody tr td label:hover:after {
border: none;
}
```
Le CSS ci-dessus ne sera appliqué qu'au formulaire dont l'ID est **548**. Avant d'enregistrer ce CSS, vous devrez mettre à jour cet ID de formulaire pour qu'il corresponde à votre ID de formulaire.
Si vous avez besoin d'aide pour trouver votre ID de formulaire, [veuillez consulter ce tutoriel.](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/ "Comment localiser l'ID du formulaire et l'ID du champ")
Et voilà ! Vous avez personnalisé avec succès le champ de formulaire **Net Promoter Score** à l'aide de CSS. Souhaitez-vous personnaliser le style des icônes du champ de formulaire **Ratings** ? Consultez notre article sur [Comment personnaliser l'apparence des icônes de notation](https://wpforms.com/developers/how-to-customize-the-look-of-the-rating-icons/ "Comment personnaliser l'apparence des icônes de notation").
## FAQ
#### Q : Comment puis-je changer le texte qui apparaît (Pas du tout probable) ?
**R :** Vous pouvez également modifier ce texte qui apparaît avec CSS.
```
form#wpforms-form-548 span.not-likely:before {
content: "Pas du tout satisfait";
font-size: 14px !important;
}
form#wpforms-form-548 span.extremely-likely:before {
content: "Entièrement satisfait";
font-size: 14px !important;
}
form#wpforms-form-548 span.not-likely, form#wpforms-form-548 span.extremely-likely {
font-size: 0;
}
```
Sachez que si vous utilisez CSS pour modifier ou changer du texte dans un formulaire, votre texte ne sera pas traduisible sur les sites multilingues.
**Catégories :** Style
**Tags :** CSS, Net Promoter
---