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 multiple selection 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 multiple selection Dropdown field in WPForms.


Getting Started

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

For our example, we’ll set up a sports club inquiry form. To do this, we’ll start by opening the form builder.

Then, navigate to the Standard Fields section to find the 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.

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

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

Then, select the option labeled Multiple Options Selection to enable it.

Enable Multiple Options Selection

Customization Options

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

Style Options for Dropdown Field

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 to the choices you’ve selected.

Selected Options Classic Dropdown

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 to the dropdown bar.

Multiple Options Modern Dropdown

Configuring Conditional Logic

Configuring conditional logic with a multiple selection 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.

Add-HTML-field

Then, in the Code section, we can add our message, “Heads Up! The clubs you’ve chosen meet at conflicting times.”

HTML-message

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 Smart Logic section to open it up, and then select the Enable conditional logic option.

Enable conditional logic

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

Conditional logic rules

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 guide on Smart Conditional Logic.

That’s it! You can now set up a multiple selection Dropdown field in your WPForms.

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