Moving to the Next Page Automatically on Multi-Page Forms

Would you like your multi-page forms to automatically advance when users make selections? With a simple code snippet, you can create a smoother form experience by automatically moving to the next page when users select their answers. This enhancement reduces clicks and makes your forms more intuitive to complete.

This guide will show you how to automatically advance your multi-page forms based on user selections.

Creating Your Form Structure

First, you’ll need a multi-page form with form fields and page breaks.

For the purpose of this tutorial, we’re creating a swag sheet form, there will be three Multiple Choice fields using Image Choices. Each selection will include a Page Break.

If you need help creating a multi-page form, please review our guide on creating multi-page forms.

Adding the Auto-Advance CSS

Since we want the form to move to the next page automatically based on any selection, we’re going to add CSS to hide the Next buttons on this form. To achieve this, copy this CSS to your site.

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

Remember to replace 1000 with your form’s ID. If you need help finding your form ID, check out our guide on how to find form and field IDs.

Adding the Auto-Advance JavaScript

Next, add this code snippet to enable automatic page advancement. If you need help adding code snippets, please review our tutorial on adding code snippets.

The script works by targeting your specific form using the form ID (replace 1000 with your ID), listening for clicks on Image Choice inputs, and triggering the Next button click automatically when a selection is made.

Customization Options

You can modify this functionality to target specific questions by adjusting the jQuery selector, add conditions for when to advance, or redirect to different pages based on answers.

Here’s an example that advances only when “Yes” is selected:

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);

Using with Elementor Popups

If your form is inside an Elementor popup, use this modified version instead:

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);

And that’s it! You can now move to the next page automatically based on the answer to your form field. Next, would you like to learn how to skip entire pages based on user responses? Check out our tutorial on skipping page breaks when using conditional logic for more details.

Reference Article

wpforms_wp_footer_end