WP Forms multi-step forms

A multi-step form can be useful when you have a long or complex form that you want to break down into smaller sections. This can improve user experience and make it easier for users to complete the form. In WordPress, you can achieve multi-step forms using the WP Forms plugin along with some custom code.

To create a multi-step form using WP Forms, you can follow these steps:

1. Install and activate the WP Forms plugin on your WordPress site.
2. Create a new form or edit an existing form using WP Forms.
3. Divide your form into multiple sections or steps. For example, you can have a step for personal information, a step for address details, and a step for additional information.
4. Add the necessary form fields to each step using the WP Forms drag-and-drop form builder.
5. In the form builder, click on the “Settings” tab and enable the “Form Pagination” option.
6. Configure the pagination settings according to your requirements. You can choose to display progress indicators, show a “Back” button, and customize the button labels.
7. Save your form.

Here’s an example of how you can create a multi-step form using WP Forms:

function wpsnippets_multi_step_form( $form_html, $form_id ) {
    if ( $form_id === 123 ) { // Replace 123 with your form ID
        $form_html = str_replace( '<form', '<form class="wpforms-multi-step-form"', $form_html );
    }
    return $form_html;
}
add_filter( 'wpforms_frontend_form_html', 'wpsnippets_multi_step_form', 10, 2 );

In the above code, we’re using the wpforms_frontend_form_html filter to modify the form HTML output. We check if the form ID matches the desired form (replace 123 with your form ID), and if it does, we add a custom CSS class wpforms-multi-step-form to the form element. You can use this class to style the form and add JavaScript functionality to handle the multi-step behavior.

Remember to replace 123 with the actual ID of your form.

By following these steps and using the provided code snippet, you can create multi-step forms using WP Forms in WordPress.

Examples

Example 1: Creating a Multi-Step Form with WP Forms

This example demonstrates how to create a multi-step form using the WP Forms plugin. The form will be divided into multiple sections, allowing users to navigate through each step before submitting the form.

// Step 1: Create a new form using WP Forms plugin
$form_id = 1;

// Step 2: Add form fields for each step
wpsnippets_wpforms_add_fields( $form_id, 'step_1', array(
    'name' => 'Name',
    'email' => 'Email',
) );

wpsnippets_wpforms_add_fields( $form_id, 'step_2', array(
    'phone' => 'Phone',
    'address' => 'Address',
) );

// Step 3: Add form navigation buttons
wpsnippets_wpforms_add_navigation( $form_id, 'step_1', 'Next' );
wpsnippets_wpforms_add_navigation( $form_id, 'step_2', 'Previous', 'Next' );
wpsnippets_wpforms_add_navigation( $form_id, 'step_3', 'Previous', 'Submit' );

In this code example, we first create a new form using the WP Forms plugin by specifying the form ID. Then, we add form fields for each step using the wpsnippets_wpforms_add_fields() function, passing the form ID, step name, and an array of field names and labels. Finally, we add form navigation buttons using the wpsnippets_wpforms_add_navigation() function, specifying the form ID, current step, and button labels.

Example 2: Validating Multi-Step Form Fields

This example demonstrates how to validate form fields in a multi-step form before allowing the user to proceed to the next step. We’ll use the wpforms_process hook to perform the validation.

add_action( 'wpforms_process', 'wpsnippets_wpforms_validate_fields', 10, 3 );

function wpsnippets_wpforms_validate_fields( $fields, $entry, $form_data ) {
    $current_step = $_POST['wpforms']['current_page'];

    if ( $current_step === 'step_1' ) {
        if ( empty( $_POST['wpforms']['fields']['name'] ) ) {
            wpforms()->process->errors[ $current_step ] = 'Please enter your name.';
        }
        if ( empty( $_POST['wpforms']['fields']['email'] ) ) {
            wpforms()->process->errors[ $current_step ] = 'Please enter your email.';
        }
    }

    if ( $current_step === 'step_2' ) {
        if ( empty( $_POST['wpforms']['fields']['phone'] ) ) {
            wpforms()->process->errors[ $current_step ] = 'Please enter your phone number.';
        }
        if ( empty( $_POST['wpforms']['fields']['address'] ) ) {
            wpforms()->process->errors[ $current_step ] = 'Please enter your address.';
        }
    }
}

In this code example, we hook into the wpforms_process action and define a custom function wpsnippets_wpforms_validate_fields(). Inside this function, we check the current step of the form using $_POST['wpforms']['current_page']. Depending on the step, we validate the corresponding form fields and set error messages using the wpforms()->process->errors array.

Example 3: Saving Multi-Step Form Data

This example demonstrates how to save form data from each step of a multi-step form. We’ll use the wpforms_process_complete hook to capture the submitted data and store it in a custom database table.

add_action( 'wpforms_process_complete', 'wpsnippets_wpforms_save_data', 10, 4 );

function wpsnippets_wpforms_save_data( $fields, $entry, $form_data, $entry_id ) {
    $current_step = $_POST['wpforms']['current_page'];

    if ( $current_step === 'step_1' ) {
        $name = $_POST['wpforms']['fields']['name'];
        $email = $_POST['wpforms']['fields']['email'];

        // Save step 1 data to custom table
        wpsnippets_save_step1_data( $name, $email, $entry_id );
    }

    if ( $current_step === 'step_2' ) {
        $phone = $_POST['wpforms']['fields']['phone'];
        $address = $_POST['wpforms']['fields']['address'];

        // Save step 2 data to custom table
        wpsnippets_save_step2_data( $phone, $address, $entry_id );
    }
}

function wpsnippets_save_step1_data( $name, $email, $entry_id ) {
    // Custom code to save step 1 data to database
}

function wpsnippets_save_step2_data( $phone, $address, $entry_id ) {
    // Custom code to save step 2 data to database
}

In this code example, we hook into the wpforms_process_complete action and define a custom function wpsnippets_wpforms_save_data(). Inside this function, we check the current step of the form using $_POST['wpforms']['current_page']. Depending on the step, we retrieve the form field values from $_POST and save them to a custom database table using separate functions wpsnippets_save_step1_data() and wpsnippets_save_step2_data().