This snippet makes the number indicators of a multi-page form clickable and to easily navigate to the pages.

wpf-clickable-number-indicators.php

<?php

// NOTE: This snippet is not perfect because it will not check for validations of the current page just like clicking the next button does

add_action( 'wpforms_wp_footer_end', function() {

?>
<style>
    .wpforms-page-indicator-page-number {
        transition: all 0.2s ease-in-out;
    }
	
    .wpforms-page-indicator-page:not(.active) .wpforms-page-indicator-page-number:hover {
        cursor: pointer;
    }
</style>
<script>
    
    wpforms.scrollToError = function(){}; // Stops scroll on validation
	
    jQuery(function($){
        $( ".wpforms-page-indicator-page-number" ).on( "click", function() {
			
            var to_page = $( '.wpforms-page-' + $( this ).text() );
            var active_indicator = $( '.wpforms-page-indicator-page-' + $( this ).text() );
            var active_indicator_color = $( '.wpforms-page-indicator' ).data( 'indicator-color' ) ;
			
            $( '.wpforms-page-indicator-page' ).removeClass( 'active' );
            $( '.wpforms-page-indicator-page-number' ).removeAttr( 'style' );
            active_indicator.addClass( 'active' );
            active_indicator.find('.wpforms-page-indicator-page-number').css( 'background-color',  active_indicator_color );
			
            $( '.wpforms-page' ).css( 'display', 'none' );
            to_page.css( 'display', 'block' );
			
            if( to_page.hasClass('last') ) {
                $( '.wpforms-submit-container' ).css( 'display', 'block' );
            } else {
                $( '.wpforms-submit-container' ).css( 'display', 'none' );
            }
        });
    });
</script>
<?php

});