Cómo personalizar los botones de salto de página

Introducción

¿Estás deseando darle un toque único a tus formularios de WPForms personalizando los botones de Página siguiente? ¡No busques más! En este tutorial, te guiaremos a través del proceso de uso de CSS para personalizar la apariencia de tus botones. Con una variedad de fragmentos de CSS, puedes lograr fácilmente el aspecto que deseas para un formulario más personalizado y visualmente atractivo.

Creación de tu formulario de varias páginas

Comencemos creando un formulario de varias páginas. Si no estás seguro del proceso y necesitas orientación, no dudes en consultar esta útil documentación sobre Creación de formularios de varias páginas.

En el tutorial de hoy, nos centraremos en crear un formulario diseñado para recopilar ideas para entradas de blog.

Habilitar Mostrar anterior

Después de incorporar tus botones de Página siguiente, no olvides activar la opción Mostrar anterior en cada uno de estos saltos. Esto asegura que tus visitantes puedan navegar hacia atrás para revisar y realizar ediciones antes de finalizar el formulario.

Al usar los botones Siguiente y Anterior para tu formulario, por defecto, estos botones ya aparecerán en la misma línea.

Pero, ¿y si quisiéramos centrarlos o hacerlos botones más grandes? ¡Aquí es donde entra en juego CSS!

Centrar los botones

Añadamos ahora algo de CSS para centrar los botones Siguiente y Anterior en nuestro formulario.

Si no estás seguro de dónde o cómo añadir CSS a tu sitio, por favor revisa este tutorial.

form#wpforms-form-605 .wpforms-pagebreak-left {
text-align: center;
}

Este CSS solo se aplicará al ID del formulario 605. Necesitarás actualizar este ID de formulario para que coincida con el tuyo. Si no estás seguro de dónde encontrar tu ID de formulario, por favor revisa esta guía.

Si quisieras usar CSS como este para que se aplique a todos los formularios, usarías este CSS en su lugar.

.wpforms-pagebreak-left {
text-align: center !important;
}

Creación de botones más grandes

Para esta sección, vamos a hacer nuestros botones más grandes y, al mismo tiempo, usaremos el CSS anterior para mantener los botones centrados.

form#wpforms-form-605 .wpforms-pagebreak-left {
text-align: center;
}

form#wpforms-form-605 .wpforms-page-next {
width: 48% ;
float: right ;
margin: 0px ;
}

form#wpforms-form-605 .wpforms-page-prev {
margin-right: 0px ;
width: 48% ;
float: left ;
margin: 0 ;
padding: 0 ;
}

Para hacer este cambio en todos los formularios, usa este CSS en su lugar.

.wpforms-pagebreak-left {
text-align: center !important;
}

.wpforms-page-next {
width: 48% !important;
float: right !important;
margin: 0px !important;
}

.wpforms-page-prev {
margin-right: 0px !important;
width: 48% !important;
float: left !important;
margin: 0 !important;
padding: 0 !important;
}

Alinear los últimos botones

Con el formulario de varias páginas y usando los botones Anterior, la última página del formulario mostrará el botón Anterior final por encima del botón Enviar. Para nuestro tutorial, queremos alinear estos botones para que estén en la misma línea.

Así que, usando todo el CSS que hemos utilizado hasta ahora, juntemos todo.

form#wpforms-form-605 .wpforms-page-next {
width: 48% ;
float: right ;
margin: 0px ;
}

form#wpforms-form-605 .wpforms-page-prev {
margin-right: 0px ;
width: 48% ;
float: left ;
margin: 0 ;
padding: 0 ;
}

form#wpforms-form-605 .wpforms-submit-container {
float: right ;
width: 48% ;
margin: 0 ;
padding: 0 ;
clear: none ;
}

form#wpforms-form-605 .wpforms-submit-container button {
width: 100%;
}

form#wpforms-form-605 .wpforms-page.last .wpforms-field-pagebreak {
float: left;
display: block;
width: 48%;
padding: 0;
}

form#wpforms-form-605 .wpforms-page.last .wpforms-pagebreak-left {
width: 100%;
}

form#wpforms-form-605 .wpforms-page.last .wpforms-page-prev {
width: 100%;
}

Y al igual que con el resto del CSS anterior, si quieres esto para todos los formularios, usarías este CSS.

.wpforms-page-next {
width: 48% !important;
float: right !important;
margin: 0px !important;
}

.wpforms-page-prev {
margin-right: 0px !important;
width: 48% !important;
float: left !important;
margin: 0 !important;
padding: 0 !important;
}

.wpforms-submit-container {
float: right !important;
width: 48% !important;
margin: 0 !important;
padding: 0 !important;
clear: none !important;
}

.wpforms-submit-container button {
width: 100% !important;
}

.wpforms-page.last .wpforms-field-pagebreak {
float: left !important;
display: block !important;
width: 48% !important;
padding: 0 !important;
}

.wpforms-page.last .wpforms-pagebreak-left {
width: 100% !important;
}

.wpforms-page.last .wpforms-page-prev {
width: 100% !important;
}

Y eso es todo lo que necesitas para personalizar la apariencia de los botones de varias páginas. ¿Te gustaría también pasar a la siguiente página automáticamente según una pregunta de tu formulario? Echa un vistazo a nuestro tutorial sobre Cómo pasar a la siguiente página automáticamente.