How to Allow Multiple Selections for a Dropdown Field in WPForms

Would you like to allow your users to select multiple options in a dropdown field? Adding a multi-select dropdown to your WordPress forms allows your users to select many options without having to use a Checkboxes field.

In this tutorial, we’ll show you how to set up a Multi-Select Dropdown field in WPForms.

Getting Started

Before we get started, you’ll need to create a new form or edit an existing form.

After you’ve opened the form builder, navigate to the Standard Fields section to find a Dropdown field. Simply click the field to add it to the form, or drag and drop it into your form’s preview area.

Add a dropdown field in WPForms

Once the field is added, click on it to open its Field Options panel.

From within the Field Options, navigate to the Advanced Options section and click on it to open up additional settings.

Then, check the box labeled Multiple Options Selection to enable it.

Enable Multiple Options Selection

For our example, we’ll set up a sports club inquiry form. To do this, we’ll first add a Dropdown field to our form. Then, we’ll change the Label for this field to read Select Which Club(s) You’d Like to Know More About. We’ll also add in 4 options under Choices: Swimming, Archery, Cricket, and Dance.

Label and Choices Setting in Multi-Select

Customization Options

There are two different style configurations available for the Dropdown field: Modern or Classic. These will each format the dropdown’s styling in a slightly different way. You can change the style of your Dropdown field under Advanced Options » Style.

Style Options for Dropdown Field

Modern Style

The Modern style will show a standard dropdown. This dropdown allows you to either scroll through an options list and select your choices, or to type in search terms to find the choices you’d like.

Multi-Select Modern Dropdown

When multiple options are selected, each option will be added in the dropdown bar.

Multiple Options Modern Dropdown

Classic Style

The Classic style will list all of your options inside of a box. When more than 4 options are added to the dropdown, the box will include a vertical scroll bar.

Multi-Select Classic Dropdown

Note: The Classic style will always show at least four rows, even if there isn’t any data in those rows.

To select multiple options, hold the Control button (or Command on Mac) while clicking. This will add a highlight effect the choices you’ve selected.

Selected Options Classic Dropdown

Configuring Conditional Logic

Configuring conditional logic with a multi-select dropdown will allow you to show or hide fields if a user selects more than one dropdown choice.

For example, in our sports club inquiry form, we’ll show users a message if they select both Swimming and Dance from the dropdown. In our message, we’ll let them know that these clubs meet at conflicting times.

To set this up, we’ll first add an HTML field to our form. Then, in the Code section, we can add our message, “Heads Up! The clubs you’ve chosen meet at conflicting times.”

Multi-Select Dropdown HTML block

After that, we’ll need to set up our conditional logic so that the field only appears when users select Swimming and Dance. To do this, we’ll click the Conditionals section to open it up, and then check off the Enable conditional logic box.

Enable Conditional Logic for Multi-Select

Then, we’ll set the logic to read “Show this field if Select Which Club(s) Would You Like to Know More About is Swimming AND Select Which Club(s) Would You Like to Know More About is Dance“:

Conditional Logic for Multi-Select Dropdown

This field will now remain hidden unless a user selects both Swimming and Dance from our dropdown field.

HTML Notice Multi-Select Dropdowns

Note: For more details on how to use the AND operator, check out our documentation!

That’s it! You can now set up a multi-select dropdown field in your WPForms.

Next, would you like to easily add a large amount of options for a Dropdown, Multiple Choice, or Checkboxes field? Check out our tutorial on how to bulk add choices for more details!