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.
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 swag sheet form, there will be three Multiple Choice fields using Image Choices. Each selection will include a Page Break.
Adding the 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.
If you’re not sure how to add CSS to your site, please review this tutorial.
form#wpforms-form-3241 button.wpforms-page-button {
visibility: hidden;
}
Please remember to change the form ID 3241 to match your own. If you not sure what your form ID is, please check out this useful guide for further details.
With this CSS, the Next button will be hidden from view since it will not be needed to move to the next page, our selections will do this for us based on the code snippet in the next step.
Moving to the next page automatically
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( "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', 30 );
This snippet will look only for the form ID 3241 and as we are only using Image Choices for our fields, we’ve added the ul.wpforms-image-choices input as the trigger for engaging this snippet. Any selection made in each of these fields will automatically trigger this snippet and move to the next page automatically.
Please remember to update the form ID 3241 to match your own ID number. If you need help with where to find these ID numbers, please review this tutorial.
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.
Reference Article
FAQ
Q: Can I use this for a single question on the form?
A: Absolutely! Let’s say you only want to move to the next page automatically if a user select Yes to one of your form field questions. You would use this snippet and just change the form and field IDs to match your own.
/**
* Navigate to the next page automatically based on a Yes/No questions
*
* @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.
FAQ
Q: Can I use this when the form is inside an Elementor popup?
A: Of course! If you have your form inside an Elementor popup window, just use this snippet instead.
/**
* Navigate to the next page automatically inside an Elementor popup
*
* @link https://wpforms.com/developers/how-to-move-to-the-next-page-automatically/
*/
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 );