Cómo personalizar el campo Net Promoter Score

¿Te gustaría personalizar el aspecto del campo de formulario Net Promoter Score? Usando un poco de CSS puedes cambiar fácilmente el aspecto 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 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.

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 consulta este tutorial.

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.

¡Y eso es todo! Has utilizado con éxito CSS para personalizar el campo de formulario Net Promoter Score. ¿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 el aspecto 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: "Not at all satisfied";
    font-size: 14px !important;
}

form#wpforms-form-548 span.extremely-likely:before {
    content: "Completely satisfied";
    font-size: 14px !important;
}

form#wpforms-form-548 span.not-likely, form#wpforms-form-548 span.extremely-likely {
    font-size: 0;
}