Home / Admin / Skip Page Breaks When Using Conditional Logic
Duplicate Snippet

Embed Snippet on Your Site

Skip Page Breaks When Using Conditional Logic

With this snippet, any WPForms form with Conditional Logic and Page Breaks will be skipped automatically.

80+
Code Preview
php
<?php
/**
 * Skip empty page breaks if the condition is not met
 *
 * @link https://wpforms.com/developers/how-to-skip-page-breaks-when-using-conditional-logic/
 * 
 * For support, please visit: https://www.facebook.com/groups/wpformsvip
 */
  
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 );

Comments

Add a Comment