### [Anpassen des Net Promoter Score-Felds](https://wpforms.com/developers/how-to-customize-the-net-promoter-score-field/)
**Veröffentlicht:** 25. November 2019
**Autor:** Redaktionsteam
**Auszug:** Mit CSS können Sie das Styling des Net Promoter-Felds einfach anpassen. In diesem Artikel erfahren Sie, wie Sie dies tun können.
**Inhalt:**
Möchten Sie das Aussehen des **Net Promoter Score**-Formularfelds anpassen? Mit ein wenig CSS können Sie das Erscheinungsbild dieses Formularfelds auf Ihrer Website einfach ändern. In diesem Tutorial zeigen wir Ihnen, wie Sie mit CSS das Styling dieses Felds ändern können.
## Hinzufügen des Formularfelds
Zuerst müssen Sie ein Formular und Ihre Felder sowie das Feld **Net Promoter Score** zu Ihrem Formular erstellen und dann die gewünschten Optionen für dieses Feld konfigurieren.
Wenn Sie dabei Hilfe benötigen, [lesen Sie bitte die Dokumentation](https://wpforms.com/docs/how-to-add-a-net-promoter-score-field-to-wpforms/ "How to Add a Net Promoter Score Field to WPForms").
## Anpassen des Net Promoter Score
Als Nächstes müssen Sie diesen CSS-Code auf Ihre Website kopieren. Wenn Sie Hilfe beim Hinzufügen von CSS zu Ihrer Website benötigen, [sehen Sie sich dieses Tutorial an](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "How to Add Custom CSS Styles for 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;
}
```
Der obige CSS-Code wird nur für das Formular mit der ID **548** angewendet. Bevor Sie diesen CSS-Code speichern, müssen Sie diese Formular-ID an Ihre Formular-ID anpassen.
Wenn Sie Hilfe beim Auffinden Ihrer Formular-ID benötigen, [lesen Sie bitte dieses Tutorial.](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/ "How to Locate Form ID and Field ID")
Und das ist alles! Sie haben erfolgreich CSS verwendet, um das **Net Promoter Score**-Formularfeld anzupassen. Möchten Sie das Styling der **Bewertungs**-Formularfeld-Icons anpassen? Sehen Sie sich unseren Artikel [How to Customize the Look of the Rating Icons](https://wpforms.com/developers/how-to-customize-the-look-of-the-rating-icons/ "How to Customize the Look of the Rating Icons") an.
## FAQ
#### F: Wie kann ich den angezeigten Text ändern (Not At All Likely)?
**A:** Sie können diesen angezeigten Text auch mit CSS ändern.
```
form#wpforms-form-548 span.not-likely:before {
content: "Nicht überhaupt zufrieden";
font-size: 14px !important;
}
form#wpforms-form-548 span.extremely-likely:before {
content: "Vollkommen zufrieden";
font-size: 14px !important;
}
form#wpforms-form-548 span.not-likely, form#wpforms-form-548 span.extremely-likely {
font-size: 0;
}
```
Bitte beachten Sie, dass Ihr Text auf mehrsprachigen Websites nicht übersetzbar ist, wenn Sie CSS verwenden, um Text innerhalb eines Formulars zu ändern oder zu bearbeiten.
**Kategorien:** Styling
**Schlagwörter:** CSS, Net Promoter
---