Avance automático a la siguiente página en formularios de varias páginas

¿Le gustaría que sus formularios de varias páginas avanzaran automáticamente cuando los usuarios realicen selecciones? Con un simple fragmento de código, puede crear una experiencia de formulario más fluida al pasar automáticamente a la siguiente página cuando los usuarios seleccionan sus respuestas. Esta mejora reduce los clics y hace que sus formularios sean más intuitivos de completar.

Esta guía le mostrará cómo avanzar automáticamente sus formularios de varias páginas basándose en las selecciones del usuario.

Creación de la estructura de su formulario

Primero, necesitará un formulario de varias páginas con campos de formulario y saltos de página.

Para este tutorial, estamos creando un formulario de hoja de regalos (swag sheet), habrá tres campos de Opció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, revise nuestra guía sobre cómo crear formularios de varias páginas.

Añadir el CSS de avance automático

Dado que queremos que el formulario pase a la siguiente página automáticamente basándose en cualquier selección, vamos a añadir CSS para ocultar los botones Siguiente en este formulario. Para lograr esto, copie este CSS en su sitio.

form#wpforms-form-1000 button.wpforms-page-button {
    visibility: hidden;
}

Recuerde reemplazar 1000 con el ID de su formulario. Si necesita ayuda para encontrar el ID de su formulario, consulte nuestra guía sobre cómo encontrar IDs de formularios y campos.

Añadir el JavaScript de avance automático

A continuación, añada este fragmento de código para habilitar el avance automático de página. Si necesita ayuda para añadir fragmentos de código, revise nuestro tutorial sobre cómo añadir fragmentos de código.

El script funciona dirigiéndose a su formulario específico usando el ID del formulario (reemplace 1000 con su ID), escuchando los clics en las entradas de Opciones de Imagen y activando automáticamente el clic del botón Siguiente cuando se realiza una selección.

Opciones de personalización

Puede modificar esta funcionalidad para dirigirse a preguntas específicas ajustando el selector de jQuery, añadir condiciones para cuándo avanzar o redirigir a diferentes páginas según las respuestas.

Aquí tiene un ejemplo que avanza solo 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 ventanas emergentes de Elementor

Si su formulario está dentro de una ventana emergente de Elementor, use 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 eso es todo! Ahora puede pasar a la siguiente página automáticamente basándose en la respuesta de su campo de formulario. A continuación, ¿le gustaría aprender a omitir páginas enteras basándose en las respuestas del usuario? Consulte nuestro tutorial sobre cómo omitir saltos de página al usar lógica condicional para más detalles.

Artículo de referencia

wpforms_wp_footer_end