Personalización de los botones Anterior y Siguiente en formularios multipágina mediante CSS

¿Quieres personalizar los botones anterior y siguiente de tus formularios multipágina? Personalizar los botones de sus formularios puede ser una excelente manera de añadir personalidad y estilo a su sitio.

En este tutorial se explica cómo personalizar el estilo de los botones anterior y siguiente de los formularios multipágina.

Antes de empezar, asegúrese de que WPForms está instalado y activado en su sitio y que ha verificado su licencia. A continuación, cree un formulario multipágina para añadir 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 su formulario.

Si eres nuevo en el uso de CSS o quieres refrescar tus conocimientos, lo mejor es que empieces por nuestra guía de introducción a CSS.

Aquí está el CSS por defecto para los botones anterior y siguiente de WPForms, así como comentarios para notar lo que 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 dar estilo a tus botones de diferentes maneras. Por ejemplo, empezaremos cambiando el color de fondo de los botones a naranja y el texto a blanco.

En primer lugar, tendremos que encontrar los códigos hexadecimales de los colores que queremos utilizar. htmlcolorcodes.com y Adobe Color CC son herramientas gratuitas muy útiles que pueden ayudarte a elegir los colores.

Una vez que tenemos 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, tenemos que añadir este CSS a nuestro sitio. La forma más sencilla de hacerlo es utilizando el Editor CSS de WordPress. Para ello, vaya a Apariencia " Personalizar y seleccione CSS adicional.

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

Este es el aspecto que tendrán nuestros botones ahora, con nuestro CSS de ejemplo aplicado:

Personalización de los estilos Hover

CSS también permite aplicar estilos completamente diferentes cuando los usuarios pasan el cursor por encima de un botón. Este cambio ayuda a mejorar la experiencia del usuario, ya que le permite saber que puede hacer clic en el botón.

A continuación se muestra el CSS por defecto para los estilos hover de los botones WPForms. Como se señala 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 */
}

Puedes notar que esto es mucho menos CSS que lo que viste para el botón cuando no está sobrevolado. Esto se debe a que CSS aplicará todos los estilos anteriores al botón sobre el que se pasa el cursor a menos que se indique lo contrario.

Por ejemplo, si deja los estilos predeterminados, el color del texto seguirá siendo negro cuando los usuarios pasen el ratón por encima del botón. Esto se debe a que el color del texto del botón sería normalmente negro, y no le hemos dicho que cambie al pasar el ratón por encima.

Al igual que en el ejemplo anterior de CSS personalizado, puedes modificar cualquiera de estos valores para cambiar los estilos de navegación del botón. En nuestro ejemplo, daremos al botón un fondo naranja más oscuro cuando se sitúe 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 */
}

Este es el aspecto que tendrán los botones con el CSS aplicado:

Ejemplo de CSS

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

Este es el CSS que añadiremos para este ejemplo, que incluye cambios de estilo al pasar el ratón por encima:

/* 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 este es el aspecto que tendrán nuestros botones al pasar el ratón por encima. Recuerde, los únicos cambios son los colores del fondo y del borde:

Ya está. Ahora puedes personalizar tus botones anterior y siguiente usando CSS personalizado.

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