WP Forms dynamic form instructions

The code snippet provided below demonstrates how to add dynamic form instructions to WP Forms using the wpsnippets_wpforms_dynamic_form_instructions() function. This function allows you to display custom instructions or messages based on the selected form field value.

/**
 * Add dynamic form instructions to WP Forms.
 *
 * @param array $form_data The form data.
 * @param array $fields    The form fields.
 * @return array
 */
function wpsnippets_wpforms_dynamic_form_instructions( $form_data, $fields ) {
    // Define the field ID and the corresponding instructions.
    $field_instructions = array(
        'field_id_1' => 'Instructions for Field 1',
        'field_id_2' => 'Instructions for Field 2',
        'field_id_3' => 'Instructions for Field 3',
    );

    // Loop through each form field.
    foreach ( $fields as &$field ) {
        // Check if the field ID exists in the instructions array.
        if ( isset( $field_instructions[ $field['id'] ] ) ) {
            // Add the instructions as a custom attribute to the field.
            $field['instructions'] = $field_instructions[ $field['id'] ];
        }
    }

    return $form_data;
}
add_filter( 'wpforms_frontend_form_data', 'wpsnippets_wpforms_dynamic_form_instructions', 10, 2 );

To use this code snippet, you need to replace 'field_id_1', 'field_id_2', and 'field_id_3' with the actual field IDs from your WP Forms form. You can find the field IDs by inspecting the form HTML or by checking the WP Forms form builder.

Once you have added the field IDs and their corresponding instructions to the $field_instructions array, you can add the wpsnippets_wpforms_dynamic_form_instructions() function to your theme’s functions.php file or a custom plugin.

This code snippet will dynamically add the instructions to the form fields based on the field ID. The instructions will be displayed below the field label on the frontend of the form.

This functionality can be useful when you want to provide additional instructions or guidance to users based on the selected form field value. For example, if you have a dropdown field for selecting a country, you can display specific instructions for each country selection to guide the user in filling out the form correctly.

Examples

Example 1: Adding dynamic form instructions to a WP Forms form

This use case demonstrates how to add dynamic form instructions to a WP Forms form using custom PHP functions and WordPress hooks.

function wpsnippets_add_form_instructions( $form_html ) {
    $instructions = 'Please fill out the form below with your contact information.';
    $form_html = '<p>' . $instructions . '</p>' . $form_html;
    return $form_html;
}
add_filter( 'wpforms_frontend_form_html', 'wpsnippets_add_form_instructions' );

In this code example, we define a custom PHP function wpsnippets_add_form_instructions that takes the form HTML as a parameter. We then append the dynamic form instructions to the beginning of the form HTML and return the modified HTML. Finally, we use the wpforms_frontend_form_html filter hook to apply this function to the WP Forms form.

Example 2: Adding conditional form instructions based on user role

This use case demonstrates how to add conditional form instructions based on the user role of the logged-in user.

function wpsnippets_add_role_based_instructions( $form_html ) {
    if ( current_user_can( 'administrator' ) ) {
        $instructions = 'As an administrator, please provide additional details in the form below.';
    } else {
        $instructions = 'Please fill out the form below with your contact information.';
    }
    $form_html = '<p>' . $instructions . '</p>' . $form_html;
    return $form_html;
}
add_filter( 'wpforms_frontend_form_html', 'wpsnippets_add_role_based_instructions' );

In this code example, we use the current_user_can function to check if the current user has the ‘administrator’ role. Based on the user role, we set different instructions for the form. The rest of the code is similar to Example 1, where we append the instructions to the form HTML and return the modified HTML using the wpforms_frontend_form_html filter hook.

Example 3: Adding form instructions based on the current page

This use case demonstrates how to add form instructions based on the current page or post.

function wpsnippets_add_page_based_instructions( $form_html ) {
    if ( is_page( 'contact' ) ) {
        $instructions = 'Please fill out the form below to contact us.';
    } elseif ( is_single() ) {
        $instructions = 'Please fill out the form below to leave a comment.';
    } else {
        $instructions = 'Please fill out the form below with your contact information.';
    }
    $form_html = '<p>' . $instructions . '</p>' . $form_html;
    return $form_html;
}
add_filter( 'wpforms_frontend_form_html', 'wpsnippets_add_page_based_instructions' );

In this code example, we use the is_page and is_single functions to check if the current page is the ‘contact’ page or a single post. Based on the page type, we set different instructions for the form. The rest of the code is similar to the previous examples, where we append the instructions to the form HTML and return the modified HTML using the wpforms_frontend_form_html filter hook.