How to Move to the Next Page Automatically

Introduction

Would you like your multi-page forms to move to the next page automatically from a form field selection? Providing an intuitive way to move a user through your multi-page form, saves time and clicks for anyone completing your form and this can be easily done using a small snippet. In this tutorial, we’re going to walk you through each step of how you can achieve this!

Creating the form

To begin, create your multi-page form and add the fields you need for your form.

If you need any assistance in how to create a multi-page form, please review this documentation.

For the purpose of this tutorial, we’re creating a simple form to collect some generic data for a survey. We’re going to ask if our visitors would like to complete the survey before going any further with a simple Yes or No Multiple Choice form field. If they agree, the second page of our form will automatically show. If they choose to not complete the survey they will automatically be redirected to the home page of our site.

begin by creating your multi-page form

Adding the snippet

Next, we’re going to add this snippet to our site.

If you need any help in how or where to add a snippet to your site, please review this tutorial.

/**
 * Navigate to the next page automatically
 *
 * @link https://wpforms.com/developers/how-to-move-to-the-next-page-automatically/
 */

function wpf_dev_automatic_next_page( ) {
?>

<script type="text/javascript">
    jQuery(function() {
        jQuery( "ul#wpforms-1449-field_9 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_automatic_next_page', 30 );

This snippet will look only for the form ID 1449 and only for the field ID 9. You’ll need to update these numbers to match the form ID and the field ID you’re using for your Multiple Choice field.

grab the form and field ID so you can set up your snippet to move to the next page automatically based on the answer to your multiple choice question

If you need help with where to find these ID numbers, please review this tutorial.

Once the IDs are updated and the code is added, the snippet will check to see if the user selected Yes or No on the Multiple Choice field. If Yes, the next page of the form will load. If No the page will be redirected back to the home page of our site.

And that’s it! You can now move to the next page automatically based on the answer to your form field. Did you know you could also skip pages completely with a snippet as well? Check out our tutorial on How to Skip Page Breaks When Using Conditional Logic.

Action Reference: wpforms_wp_footer_end