### [Cómo personalizar el campo Net Promoter Score](https://wpforms.com/developers/how-to-customize-the-net-promoter-score-field/)
**Publicado:** 25 de noviembre de 2019
**Autor:** Equipo Editorial
**Extracto:** Usando CSS puedes personalizar fácilmente el estilo del campo Net Promoter. En este artículo, te mostraremos cómo hacerlo.
**Contenido:**
¿Te gustaría personalizar la apariencia del campo de formulario **Net Promoter Score**? Usando un poco de CSS puedes cambiar fácilmente la apariencia de este campo en tu sitio. En este tutorial, te mostraremos cómo usar CSS para cambiar el estilo de este campo.
## Añadir el campo de formulario
Primero, necesitarás crear un formulario y tus campos, así como añadir el campo **Net Promoter Score** a tu formulario y luego configurar las opciones que desees para este campo.
Si necesitas ayuda con esto, [por favor revisa la documentación](https://wpforms.com/docs/how-to-add-a-net-promoter-score-field-to-wpforms/ "Cómo añadir un campo Net Promoter Score a WPForms").
## Personalizar el Net Promoter Score
A continuación, necesitarás copiar este CSS a tu sitio. Si necesitas ayuda sobre cómo añadir CSS a tu sitio, [por favor revisa este tutorial](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "Cómo añadir estilos CSS personalizados para 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;
}
```
El CSS anterior solo se aplicará al formulario con el ID **548**. Antes de guardar este CSS, necesitarás actualizar ese ID de formulario para que coincida con tu ID de formulario.
Si necesitas ayuda sobre cómo encontrar tu ID de formulario, [por favor revisa este tutorial.](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/ "Cómo localizar el ID del formulario y el ID del campo")
¡Y eso es todo! Has personalizado con éxito el campo de formulario **Net Promoter Score** usando CSS. ¿Te gustaría personalizar el estilo de los iconos del campo de formulario **Ratings**? Echa un vistazo a nuestro artículo sobre [Cómo personalizar la apariencia de los iconos de calificación](https://wpforms.com/developers/how-to-customize-the-look-of-the-rating-icons/ "Cómo personalizar la apariencia de los iconos de calificación").
## Preguntas frecuentes
#### P: ¿Cómo puedo cambiar el texto que aparece (Nada probable)?
**R:** También puedes cambiar este texto que aparece con CSS.
```
form#wpforms-form-548 span.not-likely:before {
content: "Nada satisfecho";
font-size: 14px !important;
}
form#wpforms-form-548 span.extremely-likely:before {
content: "Completamente satisfecho";
font-size: 14px !important;
}
form#wpforms-form-548 span.not-likely, form#wpforms-form-548 span.extremely-likely {
font-size: 0;
}
```
Ten en cuenta que si usas CSS para alterar o cambiar texto dentro de cualquier formulario, tu texto no será traducible en sitios multilingües.
**Categorías:** Estilo
**Etiquetas:** CSS, Net Promoter
---