WP Forms multi-page navigation

The code snippet provided below demonstrates how to create a multi-page navigation for WP Forms in WordPress. This functionality can be useful when you have a long form that you want to split into multiple pages for better user experience.

To achieve this, you can use the wpsnippets_wpforms_multi_page_navigation() function. This function checks if the current form has multiple pages and if so, it adds navigation links to move between the pages.

function wpsnippets_wpforms_multi_page_navigation() {
    // Check if WP Forms plugin is active
    if ( ! function_exists( 'wpforms' ) ) {
        return;
    }

    // Get the current form ID
    $form_id = absint( $_GET['wpforms_id'] );

    // Get the current page number
    $current_page = absint( $_GET['wpforms_page'] );

    // Get the total number of pages in the form
    $total_pages = wpforms()->form->get( $form_id )->page_total;

    // Check if the form has multiple pages
    if ( $total_pages > 1 ) {
        // Output the navigation links
        echo '<div class="wpforms-multi-page-navigation">';

        if ( $current_page > 1 ) {
            echo '<a href="' . esc_url( add_query_arg( 'wpforms_page', $current_page - 1 ) ) . '">Previous</a>';
        }

        if ( $current_page < $total_pages ) {
            echo '<a href="' . esc_url( add_query_arg( 'wpforms_page', $current_page + 1 ) ) . '">Next</a>';
        }

        echo '</div>';
    }
}

To use this code snippet, you can add it to your theme’s functions.php file or create a custom plugin. Once added, the multi-page navigation will automatically appear on your WP Forms that have multiple pages.

Please note that this code assumes you have the WP Forms plugin installed and activated. It also assumes that you are using the default query parameter names for form ID (wpforms_id) and current page (wpforms_page). If you have customized these parameter names, make sure to update the code accordingly.

Examples

Example 1: Adding a Next Button to WP Forms Multi-Page Navigation

This example demonstrates how to add a “Next” button to the multi-page navigation of a WP Forms form. The button allows users to navigate to the next page of the form.

function wpsnippets_add_next_button_to_wpforms_navigation( $form_data ) {
    $form_data['settings']['pagination']['nextButton'] = true;
    return $form_data;
}
add_filter( 'wpforms_frontend_form_data', 'wpsnippets_add_next_button_to_wpforms_navigation' );

In this code example, we use the wpforms_frontend_form_data filter to modify the form data and enable the “Next” button for multi-page navigation. By setting the nextButton parameter to true, the button will be added to the form’s navigation.

Example 2: Customizing the Next Button Label in WP Forms Multi-Page Navigation

This example demonstrates how to customize the label of the “Next” button in the multi-page navigation of a WP Forms form.

function wpsnippets_customize_next_button_label( $form_data ) {
    $form_data['settings']['pagination']['nextButtonLabel'] = 'Continue';
    return $form_data;
}
add_filter( 'wpforms_frontend_form_data', 'wpsnippets_customize_next_button_label' );

In this code example, we use the wpforms_frontend_form_data filter to modify the form data and change the label of the “Next” button. By setting the nextButtonLabel parameter to 'Continue', the button label will be updated accordingly.

Example 3: Adding a Previous Button to WP Forms Multi-Page Navigation

This example demonstrates how to add a “Previous” button to the multi-page navigation of a WP Forms form. The button allows users to navigate to the previous page of the form.

function wpsnippets_add_previous_button_to_wpforms_navigation( $form_data ) {
    $form_data['settings']['pagination']['prevButton'] = true;
    return $form_data;
}
add_filter( 'wpforms_frontend_form_data', 'wpsnippets_add_previous_button_to_wpforms_navigation' );

In this code example, we use the wpforms_frontend_form_data filter to modify the form data and enable the “Previous” button for multi-page navigation. By setting the prevButton parameter to true, the button will be added to the form’s navigation.