¿Te gustaría que tus formularios multipágina avanzaran automáticamente cuando los usuarios hacen selecciones? Con un simple fragmento de código, puede crear una experiencia de formulario más fluida pasando automáticamente a la página siguiente cuando los usuarios seleccionan sus respuestas. Esta mejora reduce los clics y hace que sus formularios sean más intuitivos.
Esta guía le mostrará cómo hacer avanzar automáticamente sus formularios multipágina basándose en las selecciones del usuario.
Creación de la estructura del formulario
En primer lugar, necesitará un formulario de varias páginas con campos de formulario y saltos de página.
Para el propósito de este tutorial, estamos creando un formulario de hoja de botín, habrá tres campos de Selección Múltiple utilizando Opciones de Imagen. Cada selección incluirá un Salto de Página.
Si necesita ayuda para crear un formulario de varias páginas, consulte nuestra guía sobre la creación de formularios de varias páginas.
Añadir el CSS Auto-Advance
Como queremos que el formulario pase a la página siguiente automáticamente en función de cualquier selección, vamos a añadir CSS para ocultar los botones Siguiente de este formulario. Para conseguirlo, copia este CSS en tu sitio.
form#wpforms-form-1000 button.wpforms-page-button {
visibility: hidden;
}
Recuerde sustituir 1000 con el ID de su formulario. Si necesitas ayuda para encontrar el ID de tu formulario, consulta nuestra guía sobre cómo encontrar los ID de formularios y campos.
Añadir el JavaScript de avance automático
A continuación, añada este fragmento de código para activar el avance automático de la página. Si necesitas ayuda para añadir fragmentos de código, consulta nuestro tutorial sobre cómo añadir fragmentos de código.
La secuencia de comandos funciona dirigiéndose a su formulario específico utilizando el ID del formulario (sustituya 1000 con su ID), escuchando los clics en las entradas de Elección de imagen y activando el Siguiente se pulsa automáticamente cuando se realiza una selección.
Opciones de personalización
Puedes modificar esta funcionalidad para dirigirte a preguntas específicas ajustando el selector jQuery, añadir condiciones para cuándo avanzar o redirigir a diferentes páginas en función de las respuestas.
He aquí un ejemplo que sólo avanza cuando se selecciona "Sí":
function wpf_dev_conditional_next_page() {
?>
<script type="text/javascript">
jQuery(function() {
jQuery( "ul#wpforms-1000-field_25 li input" ).click(function() {
if (jQuery(this).val() === "Yes")
jQuery(this).closest( '.wpforms-page' ).find( '.wpforms-page-next' ).click();
else
location.assign( "https://myexamplesite.com/home" );
});
});
</script>
<?php
}
add_action('wpforms_wp_footer_end', 'wpf_dev_conditional_next_page', 30);
Uso con Elementor Popups
Si su formulario está dentro de una ventana emergente de Elementor, utilice esta versión modificada en su lugar:
function wpf_dev_automatic_next_page_elementor_popup() {
?>
<script type="text/javascript">
jQuery( document ).on( 'elementor/popup/show', function( event, popup ) {
jQuery( "form#wpforms-form-3241 ul.wpforms-image-choices input" ).click(function() {
jQuery(this).closest( '.wpforms-page' ).find( '.wpforms-page-next' ).click();
});
});
</script>
<?php
}
add_action('wpforms_wp_footer_end', 'wpf_dev_automatic_next_page_elementor_popup', 30);
Y ya está. Ahora puede pasar a la página siguiente automáticamente basándose en la respuesta a su campo de formulario. A continuación, ¿le gustaría aprender a saltar páginas enteras basándose en las respuestas de los usuarios? Echa un vistazo a nuestro tutorial sobre cómo saltar saltos de página cuando se utiliza la lógica condicional para más detalles.