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.
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.
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.
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.
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.
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.
When multiple options are selected, each option will be added in the dropdown bar.
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.
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.
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.”
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.
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“:
This field will now remain hidden unless a user selects both Swimming and Dance from our dropdown field.
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!