Personalizar los botones Anterior y Siguiente en formularios multipágina con CSS

¿Quieres personalizar los botones anterior y siguiente en tus formularios de varias páginas? Personalizar los botones de tus formularios puede ser una excelente manera de añadir personalidad y estilo a tu sitio.

Este tutorial te explicará cómo personalizar el estilo de los botones anterior y siguiente de tu formulario de varias páginas.

Antes de empezar, asegúrate de que WPForms esté instalado y activado en tu sitio y de que hayas verificado tu licencia. Luego, crea un formulario de varias páginas para añadir los botones anterior y siguiente.

Estilo de los botones Anterior y Siguiente

CSS proporciona una flexibilidad increíble para personalizar los botones anterior y siguiente en WPForms y cualquier otro aspecto de tu formulario.

Si eres nuevo en CSS o deseas un repaso, el mejor lugar para empezar es con nuestra guía introductoria a CSS.

Aquí tienes el CSS predeterminado para los botones anterior y siguiente de WPForms, así como comentarios para indicar qué hace cada línea de CSS:

div.wpforms-container-full .wpforms-form .wpforms-page-button {
    background-color: #eee; /* Grey background */
    border: 1px solid #ddd; /* Dark grey border */
    color: #333; /* Black text color */
    font-size: 1em; /* Size of text */
    padding: 10px 15px; /* Distance between text and border */
}

Puedes cambiar cada uno de estos valores para estilizar tus botones de diferentes maneras. Como ejemplo, comenzaremos cambiando el color de fondo de nuestros botones a naranja y el texto a blanco.

Primero, necesitaremos encontrar los códigos hexadecimales de los colores que queremos usar. htmlcolorcodes.com y Adobe Color CC son herramientas gratuitas útiles que pueden ayudarte a elegir tus colores.

Una vez que tengamos los códigos hexadecimales de los colores que queremos, podemos añadirlos a nuestro CSS:

div.wpforms-container-full .wpforms-form .wpforms-page-button {
    background-color: #e27730 !important; /* Orange background */
    color: #fff !important; /* White text */
}

A continuación, necesitamos añadir este CSS a nuestro sitio. La forma más fácil de hacerlo es usando el Editor CSS de WordPress. Para ello, ve a Apariencia » Personalizar y selecciona CSS adicional.

Una vez que hayas abierto la sección CSS adicional, puedes añadir tu nuevo CSS. Luego haz clic en el botón Publicar, ¡y listo!

Así es como se verán nuestros botones ahora, con nuestro CSS de ejemplo aplicado:

Personalización de estilos al pasar el ratón

CSS también te permite aplicar estilos completamente diferentes cuando los usuarios pasan el cursor sobre un botón. Este cambio ayuda a mejorar la experiencia del usuario porque les permite saber que el botón es clicable.

A continuación se muestra el CSS predeterminado para los estilos de cambio de tamaño de los botones de WPForms. Como se indica en los comentarios, el color de fondo se vuelve un poco más oscuro y el color del borde se vuelve un poco más claro:

div.wpforms-container-full .wpforms-form .wpforms-page-button:hover, div.wpforms-container-full .wpforms-form .wpforms-page-button:active {
    background-color: #ddd; /* Darker grey background */
    border: 1px solid #ccc; /* Lighter grey border */
}

Es posible que notes que esto es mucho menos CSS de lo que viste para el botón cuando no está en modo de espera. Esto se debe a que CSS aplicará todos los estilos anteriores a tu botón en espera a menos que se indique lo contrario.

Por ejemplo, si dejas los estilos predeterminados en su lugar, el color del texto seguirá siendo negro cuando los usuarios pasen el cursor sobre el botón. Esto se debe a que el color del texto del botón normalmente sería negro, y no le hemos indicado que cambie al pasar el cursor.

Al igual que con el ejemplo de CSS personalizado anterior, puedes modificar cualquiera de estos valores para cambiar los estilos de espera del botón. Para nuestro ejemplo, le daremos al botón un fondo naranja más oscuro cuando se pase el cursor sobre él.

div.wpforms-container-full .wpforms-form .wpforms-page-button:hover, div.wpforms-container-full .wpforms-form .wpforms-page-button:active {
    background-color: #cd631d !important; /* Darker orange background */
}

Así es como se verán los botones con el CSS aplicado:

Ejemplo de CSS

Ahora que hemos cubierto lo básico, repasemos un ejemplo completo de CSS personalizado para los botones anterior y siguiente.

Aquí está el CSS que agregaremos para este ejemplo, que incluye cambios de estilo al pasar el cursor:

/* New button styles */
div.wpforms-container-full .wpforms-form .wpforms-page-button {
    background-color: #003B6D !important; /* Dark blue background */
    border: 2px solid #BDBDBD !important; /* Gray border */
    color: #fff !important; /* White text */
    font-size: 1em !important; /* Increase text size */
    font-weight: bold !important; /* Bold text */
    padding: 16px !important; /* Increase distance between text and border */
    width: 25% !important; /* Make the button quarter-width */
}

/* New button hover styles */
div.wpforms-container-full .wpforms-form .wpforms-page-button:hover, div.wpforms-container-full .wpforms-form .wpforms-page-button:active {
    background-color: #BDBDBD !important; /* Gray background */
    border: 2px solid #003B6D !important; /* Dark blue border */
}

A continuación, se muestra cómo se verán nuestros botones personalizados con este CSS aplicado:

Y así es como se verán nuestros botones al pasar el cursor sobre ellos. Recuerda, los únicos cambios son los colores de fondo y borde:

¡Eso es todo! Ahora puedes personalizar tus botones anterior y siguiente usando CSS personalizado.

¿Quieres añadir aún más estilos personalizados a tus formularios? Consulta nuestro tutorial sobre cómo personalizar campos de formulario individuales.