Cómo estilizar la pantalla de confirmación de resultados de encuestas

Descripción general

¿Te gustaría dar estilo a la pantalla de resultados de la encuesta que se muestra en la página de confirmación? Al usar el complemento Encuestas y Sondeos puedes elegir fácilmente mostrar estos resultados dentro de tu mensaje de confirmación. Con un poco de CSS puedes cambiar fácilmente el estilo de estos resultados. En este tutorial, te guiaremos paso a paso sobre cómo cambiar el estilo de los resultados de la encuesta.

Por defecto, ya se ha añadido estilo a los resultados de la encuesta.

Configuración

A efectos de esta documentación, asumiremos que ya has creado tu formulario siguiendo los pasos de este tutorial.

Habilitar los resultados de la encuesta

Para empezar, abre el creador de formularios y ve a la pestaña Ajustes » Encuestas y Sondeos.

Una vez allí, haz clic en la casilla de verificación Habilitar resultados de la encuesta.

Añadir el código CSS

Para dar estilo a los resultados de la encuesta, necesitarás copiar y pegar este CSS en tu sitio. Si necesitas ayuda sobre cómo añadir CSS a tu sitio, consulta este tutorial.

#wpforms-confirmation-194 .wpforms-poll-answer-bar {
    background-color: #c45e1b;
    background: repeating-linear-gradient(45deg, #c45e1b, #c45e1b 10px, #f08a5d 10px, #f08a5d 20px);
    border-right: 1px solid #c45e1b;
}
 
#wpforms-confirmation-194 {
    background: transparent;
    border: none;
}

Recuerda actualizar el -194 para que coincida con el ID del formulario de tu formulario específico. Si necesitas ayuda para encontrar el ID de tu formulario, revisa este tutorial.

Si necesitas ayuda para elegir los colores de degradado en el CSS anterior, visita el sitio CSS Gradient para el generador en línea (gratuito).

¡Y eso es todo! Ahora has utilizado con éxito CSS para cambiar el estilo de los resultados de la encuesta en la pantalla de confirmación. ¿Te gustaría aprender a dar estilo a los marcadores de posición en los campos de tu formulario? Echa un vistazo a este tutorial sobre Cómo dar estilo al texto marcador de posición para los campos del formulario.