Cómo personalizar la tabla del campo de escala Likert

¿Te gustaría personalizar el estilo del campo de formulario Escala Likert en WPForms? Si deseas cambiar el estilo de este campo para que coincida con los colores de marca de tu sitio, este tutorial te mostrará cómo. Te daremos el ejemplo básico de CSS necesario para personalizar el campo de formulario Escala Likert.

Creación de su formulario

Comenzaremos creando el formulario y agregando nuestros campos, incluida la Escala Likert.

Si necesitas ayuda para crear un formulario con el campo de formulario Escala Likert, por favor revisa la documentación.

Personalizar la Escala Likert

A continuación, deberás copiar este CSS a tu sitio.

Si no estás seguro de cómo hacer esto, por favor revisa este tutorial.

form#wpforms-form-971 .wpforms-field-likert_scale table.classic thead tr {
    background-color: #FFE0B2;
}

form#wpforms-form-971 .wpforms-field-likert_scale table.modern tbody tr td input[type=radio]:checked+label:after, 
form#wpforms-form-971 .wpforms-field-likert_scale table.modern tbody tr td input[type=checkbox]:checked+label:after, 
form#wpforms-form-971 .wpforms-field-likert_scale table.classic tbody tr td input[type=radio]:checked+label:after, 
form#wpforms-form-971 .wpforms-field-likert_scale table.classic tbody tr td input[type=checkbox]:checked+label:after {
    background-color: #FF9800;
}
 
form#wpforms-form-971 .wpforms-field-likert_scale table.modern tbody tr td label:hover:after,
form#wpforms-form-971 .wpforms-field-likert_scale table.classic tbody tr td label:hover:after{
    border: 1px solid #EF6C00;
}
 
form#wpforms-form-971 .wpforms-field-likert_scale table.modern tbody tr:nth-child(odd) th,
form#wpforms-form-971 .wpforms-field-likert_scale table.modern tbody tr:nth-child(odd) td,
form#wpforms-form-971 .wpforms-field-likert_scale table.classic tbody tr:nth-child(odd) th,
form#wpforms-form-971 .wpforms-field-likert_scale table.classic tbody tr:nth-child(odd) td {
    background-color: #FFF3E0;
}
 
form#wpforms-form-971 .wpforms-field-likert_scale table.modern tbody tr:nth-child(even) th,
form#wpforms-form-971 .wpforms-field-likert_scale table.modern tbody tr:nth-child(even) td,
form#wpforms-form-971 .wpforms-field-likert_scale table.classic tbody tr:nth-child(even) th,
form#wpforms-form-971 .wpforms-field-likert_scale table.classic tbody tr:nth-child(even) td {
    background-color: #FFE0B2;
}

El estilo anterior cambiará los colores de las filas pares e impares, así como el color de la opción cuando se selecciona. Este CSS también cubre los estilos Moderno o Clásico de la Escala Likert.

Necesitarás cambiar el -971, ya que este es el ID del formulario para nuestro ejemplo. Deberás actualizar este número para que coincida con el ID de tu propio formulario.

Si necesitas ayuda para localizar el ID de tu formulario, por favor revisa esta documentación.

¡Y eso es todo! Simplemente usando CSS puedes personalizar el estilo de la Escala Likert en tu formulario. ¿Te gustaría también personalizar el estilo del campo de formulario Net Promoter Score? Prueba nuestro tutorial sobre Cómo Personalizar el Campo Net Promoter Score.

Preguntas frecuentes

P: ¿Cómo elimino el salto de línea en mis opciones?

R: Por defecto, WPForms añade un salto de línea al texto usando CSS. Puedes eliminarlo añadiendo CSS adicional.

Recuerda cambiar el -971 para que coincida con el ID de tu formulario.

form#wpforms-form-971 .wpforms-field-likert_scale table.classic th, 
form#wpforms-form-971 .wpforms-field-likert_scale table.modern th {
    word-break: auto-phrase;
}