WP Forms multi-select dropdown

The code snippet below demonstrates how to create a multi-select dropdown field in WP Forms using WordPress coding standards:

/**
 * Add multi-select dropdown field to WP Forms.
 */
function wpsnippets_add_multiselect_field( $fields ) {
    $fields['my_multiselect_field'] = array(
        'label'       => 'My Multi-select Field',
        'type'        => 'select',
        'multiple'    => true,
        'choices'     => array(
            'option1' => 'Option 1',
            'option2' => 'Option 2',
            'option3' => 'Option 3',
        ),
        'required'    => true,
    );

    return $fields;
}
add_filter( 'wpforms_fields', 'wpsnippets_add_multiselect_field' );

This code snippet adds a multi-select dropdown field to WP Forms by utilizing the wpforms_fields filter hook. The wpsnippets_add_multiselect_field function is hooked into this filter and adds a new field with the key my_multiselect_field. The field is of type select and has the multiple attribute set to true, allowing users to select multiple options. The choices array defines the available options for the dropdown, and the required parameter makes the field mandatory.

To use this code snippet, simply add it to your theme’s functions.php file or a custom plugin file. After adding the code, you will see the multi-select dropdown field in your WP Forms editor, and users will be able to select multiple options when submitting the form.

Examples

Example 1: Creating a multi-select dropdown field in WP Forms

This example demonstrates how to create a multi-select dropdown field in WP Forms using the wpforms_field_choices filter hook.

function wpsnippets_wpforms_multiselect_dropdown( $field, $form_data ) {
    if ( $field['type'] === 'select' && $field['multiple'] ) {
        $field['type'] = 'multiselect';
    }
    return $field;
}
add_filter( 'wpforms_field_choices', 'wpsnippets_wpforms_multiselect_dropdown', 10, 2 );

In this code example, we are using the wpforms_field_choices filter hook to modify the field type of a select dropdown to a multi-select dropdown. The function checks if the field type is ‘select’ and if the ‘multiple’ attribute is set to true. If both conditions are met, it changes the field type to ‘multiselect’ and returns the modified field.

Example 2: Modifying the options of a multi-select dropdown field in WP Forms

This example demonstrates how to modify the options of a multi-select dropdown field in WP Forms using the wpforms_field_choices filter hook.

function wpsnippets_wpforms_modify_multiselect_options( $field, $form_data ) {
    if ( $field['type'] === 'multiselect' ) {
        $field['choices'] = array(
            'option1' => 'Option 1',
            'option2' => 'Option 2',
            'option3' => 'Option 3',
        );
    }
    return $field;
}
add_filter( 'wpforms_field_choices', 'wpsnippets_wpforms_modify_multiselect_options', 10, 2 );

In this code example, we are using the wpforms_field_choices filter hook to modify the options of a multi-select dropdown field. The function checks if the field type is ‘multiselect’ and if so, it replaces the existing choices with a new set of options defined in the $field['choices'] array.

Example 3: Adding a custom CSS class to a multi-select dropdown field in WP Forms

This example demonstrates how to add a custom CSS class to a multi-select dropdown field in WP Forms using the wpforms_field_container_classes filter hook.

function wpsnippets_wpforms_add_custom_class_to_multiselect( $classes, $field, $form_data ) {
    if ( $field['type'] === 'multiselect' ) {
        $classes[] = 'custom-multiselect';
    }
    return $classes;
}
add_filter( 'wpforms_field_container_classes', 'wpsnippets_wpforms_add_custom_class_to_multiselect', 10, 3 );

In this code example, we are using the wpforms_field_container_classes filter hook to add a custom CSS class to a multi-select dropdown field. The function checks if the field type is ‘multiselect’ and if so, it appends the ‘custom-multiselect’ class to the existing classes array and returns the modified array.