How to Skip Page Breaks When Using Conditional Logic

Introduction

Would you like to skip page breaks on your form if the conditional logic isn’t met? When using conditional logic and page breaks, the logic will always show the next page even if the conditional logic wouldn’t normally display those fields so users are left looking at an empty page. Using a small JavaScript snippet you can easily skip those pages and in this tutorial, we’re going to show you how!

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.

Adding the snippet

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.

Related

Action Reference: wpforms_wp_footer_end

FAQ

Q: Will this snippet work in a modal window like an Elementor popup?

A: Not at this time.