Do you want to skip page breaks in your form when the conditional logic isn’t met? Normally, when using conditional logic with page breaks, the next page is shown even if the conditions aren’t satisfied, leaving users with an empty page. With a simple JavaScript snippet, you can easily skip those unnecessary pages. In this tutorial, we’ll show you how to achieve this!
Creating the form
First, we’re going to create our new form. This will be a quote form that will have multiple page breaks inside. We want to skip any pages where we’re applying conditional logic if the condition hasn’t been met.
For example, on the first page, we’re gathering some basic information from them. We use a Checkbox field to ask them if they would like to schedule a free in-person quote at the time. If they select Yes, we’re going to display the second page and ask them for some personal information. If they were to select No, we want to skip the second page altogether and jump straight to the final page of the form.
If you need any assistance in creating a form with page breaks, please check out this documentation.
Setting up the conditional logic
Now it’s time to set the conditional logic to the fields on the second page. We only want to show the Date, Time, and Address fields on the second page if they have selected on the first page that they are interested in receiving a free in-person free quote. This will save our visitors time if they are not interested so we can skip this page completely if they don’t wish a visit.
To learn more about WPForms conditional logic, please check out this documentation.
The three fields on the second page will all have the same logic set. To set up the logic, select each field and click Smart Logic. Next, toggle the switch to Enable Conditional Logic.
From the dropdown, select the question you based your fields on. For the purpose of this tutorial, our question was a Checkbox field that asks Would you like us to come out and give a quote?. Our condition is, if the answer to that checkbox is Yes, then show the field. If it’s No, hide the field.
Each field on the second page will have the same logic so you’ll repeat this step for each of those fields.
Skipping page breaks
Now it’s time to add the snippet to our site.
If you need any help in how and where to add snippets to your site, please review this tutorial.
/** * Skip empty page breaks if the condition is not met * * @link https://wpforms.com/developers/how-to-skip-page-breaks-when-using-conditional-logic/ */ function wpf_dev_skip_empty_pages() { ?> <script type="text/javascript"> jQuery(function($){ // Initialize the empty action to track which button was clicked (prev/next) var action = ""; // When next/prev button is clicked, store the action so we know which direction to skip $( document ).on( 'click', '.wpforms-page-button', function( event ) { action = $(this).data( 'action' ); }); // Check if the page is empty when the page changes $( '.wpforms-form' ).each(function() { $(this).on( 'wpformsBeforePageChange', function(event, pageNum, form ){ // setTimeout({}, 0) is used so it fires asynchronously. Without this it was happening too quickly setTimeout(function(){ // Assume all pages are empty so we loop through all fields on the page except for the last field which are the page buttons var emptyPage = true; // Loop through all fields on the page form.find( `.wpforms-page-${pageNum} > div:not(:last)` ).each(function(){ // Check if current field is visible and doesn't have style="display:none;" if ($(this).is( ":visible" )) { // Set emptyPage to false if any field is visible on the page emptyPage = false; // Allow scrolling for pages with fields window.wpforms_pageScroll = true; // Stop looping through fields if a field is visible return false; } }) // Run the "click" action on prev or next button if all fields on the page are hidden. if (emptyPage) { // Prevent any scrolling animation from happening on empty pages window.wpforms_pageScroll = false; // Perform the "click" on the appropriate button based off the saved action form.find( `.wpforms-page-${pageNum} .wpforms-page-${action}` ).click(); } }, 0); }); }); }); </script> <?php } add_action( 'wpforms_wp_footer_end', 'wpf_dev_skip_empty_pages', 30 );
This snippet will loop through each page of your form to check and see if all fields are empty, if they are the functionality will skip that page completely and move on to the next.
Now instead of seeing a blank page in your form, they will skip page breaks if none of the fields are meant to show due to conditional logic! Would you like to conditionally show or hide the Submit button on a form based on one of your form fields? Check out our tutorial on How to Conditionally Show the Submit Button.
Reference Action
FAQ
Q: Will this snippet work in a modal window like an Elementor popup?
A: Not at this time.