### [Come personalizzare il campo Net Promoter Score](https://wpforms.com/developers/how-to-customize-the-net-promoter-score-field/)
**Pubblicato:** 25 novembre 2019
**Autore:** Team Editoriale
**Estratto:** Usando il CSS puoi personalizzare facilmente lo stile del campo Net Promoter. In questo articolo, ti spiegheremo come fare.
**Contenuto:**
Vorresti personalizzare l'aspetto del campo modulo **Net Promoter Score**? Usando un po' di CSS puoi cambiare facilmente l'aspetto di questo campo modulo sul tuo sito. In questo tutorial, ti mostreremo come usare il CSS per cambiare lo stile di questo campo.
## Aggiungere il campo modulo
Per prima cosa, dovrai creare un modulo e i tuoi campi, oltre al campo **Net Promoter Score**, nel tuo modulo e quindi configurare le opzioni che desideri per questo campo.
Se hai bisogno di assistenza, [rivedi la documentazione](https://wpforms.com/docs/how-to-add-a-net-promoter-score-field-to-wpforms/ "Come aggiungere un campo Net Promoter Score a WPForms").
## Personalizzare il Net Promoter Score
Successivamente, dovrai copiare questo CSS sul tuo sito. Se hai bisogno di aiuto su come aggiungere CSS al tuo sito, [dai un'occhiata a questo tutorial](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "Come aggiungere stili CSS personalizzati per 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;
}
```
Il CSS sopra sarà applicato solo al modulo con ID **548**. Prima di salvare questo CSS, dovrai aggiornare l'ID del modulo per farlo corrispondere al tuo ID modulo.
Se hai bisogno di assistenza su come trovare il tuo ID modulo, [rivedi questo tutorial.](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/ "Come localizzare ID modulo e ID campo")
Ed ecco fatto! Hai utilizzato con successo il CSS per personalizzare il campo modulo **Net Promoter Score**. Vorresti personalizzare lo stile delle icone del campo modulo **Ratings**? Dai un'occhiata al nostro articolo su [Come personalizzare l'aspetto delle icone di valutazione](https://wpforms.com/developers/how-to-customize-the-look-of-the-rating-icons/ "Come personalizzare l'aspetto delle icone di valutazione").
## FAQ
#### D: Come posso cambiare il testo che appare (Per niente probabile)?
**R:** Puoi cambiare anche questo testo che appare con il CSS.
```
form#wpforms-form-548 span.not-likely:before {
content: "Non del tutto soddisfatto";
font-size: 14px !important;
}
form#wpforms-form-548 span.extremely-likely:before {
content: "Completamente soddisfatto";
font-size: 14px !important;
}
form#wpforms-form-548 span.not-likely, form#wpforms-form-548 span.extremely-likely {
font-size: 0;
}
```
Si prega di notare che se si utilizza il CSS per modificare o cambiare il testo all'interno di qualsiasi modulo, il testo non sarà traducibile su siti multilingue.
**Categorie:** Styling
**Tag:** CSS, Net Promoter
---