Do you need to add a multi select dropdown field in WordPress? Multi select dropdowns are a great way to let users pick more than 1 option from a list.
In this article, we’ll show you an easy and fast way to make your own multi select dropdown. You don’t need to write any code to create the dropdown and add it to your website.
How Do You Select Multiple Options in a Dropdown?
Using WPForms, you can set any dropdown to be a multi select dropdown.
When your visitor clicks an item in the list, the dropdown will stay open so that they can make more selections.
This dropdown also lets you search through the choices. So it’s perfect for long lists, like a dropdown list of countries.
We’re going to show you the easy way to make a multi select dropdown yourself.
How to Set Up a Multi Select Dropdown Field in WordPress
Let’s take a look at the steps we’re going to work through in this tutorial.
- Install the WPForms Plugin
- Create Your Form
- Add a Multi Select Dropdown Field to Your Form
- Publish Your Form on Your Website
OK, let’s get started by installing the plugin we’re going to use.
Step 1: Install the WPForms Plugin
WPForms is the best form builder for WordPress. It’s super easy to create any form for your website using the drag and drop builder.
All set? Let’s move on and create your first form.
Step 2: Create Your Form
Now we’re going to make a basic form and add a dropdown to it.
In this example, we’ll make a volunteer form with a datepicker and a dropdown.
To start, open your WordPress dashboard and click WPForms » Add New.
Go ahead and type in a name for your form at the top. Then click on the Simple Contact Form template to open it up in your browser.
Now the template is open, you’ll see that we already have 3 fields:
- Comment or message
Let’s add a date field so that the person filling out the form can choose the day they’d like to help out.
First, go ahead and drag a Date / Time field from the left hand side of the form builder to the right hand side. Then click once on the Date / Time field to open the settings.
There are 2 basic settings we’re going to customize here:
- Change the Label text to suit your form
- Use the dropdown to change it to a Date field only.
Now scroll down to Advanced Options and click on it to expand the settings.
We only want volunteers on weekdays, so let’s click Limit Days so that weekends are grayed out. To do this, just select Monday through Friday:
OK, that’s done, so we can click Save.
Let’s move on to adding our multi select dropdown.
Step 3: Add a Multi Select Dropdown Field to Your Form
In this step, we’re going to add a dropdown field and then customize it to accept multiple selections.
First, let’s drag a dropdown onto the form. Then click on the field so that the settings open on the left.
If you want, you can auto populate the dropdown from other parts of WordPress, like your posts or products. You can find out how in this article on how to use dynamic field choices.
But if you want to hard code the list, WPForms makes it easy. It comes with some useful preset lists for dropdown fields. To speed things up, we’re going to add a list of US States using one of the presets.
First, go ahead and click Bulk Add in the settings for the dropdown field.
And then click Show Presets to open all of the available preset lists.
Now let’s click States to automatically get a list of US states that we can add to the multi select dropdown.
You’ll see the full list of states automatically populate the Choices box. Click Add New Choices to add them as answer choices.
Did you notice that the dropdown field has 3 default answers? Don’t forget to click the minus sign next to those default choices to remove them.
Alright, that’s all of our answer choices set up in the dropdown field.
All we need to do now is tell WPForms that we want this to be a multi select field.
To do that, we’re going to scroll down on the left hand side and expand Advanced Options.
Let’s select Multiple Options Selection in this section.
There’s another important change to make right underneath.
Let’s change the style of this field to a Modern dropdown.
Are you wondering why we changed this field to the Modern style?
There are 3 reasons that this field works better for a multi select dropdown:
- The Modern style field displays one row with an arrow to expand the list. So it’s more compact than the Classic style, which always displays 4 rows.
- The Modern style field lets you click multiple entries without holding down any keys on the keyboard. With the Classic field, your visitor will need to hold the Control or Command key on their keyboard to select more than 1 entry at a time.
- And as we mentioned up top, the Modern syle multi select dropdown has a search box, which makes it easy to find the item you want quickly.
OK, so we have our dropdown set up the way we want it. Let’s save our progress so far by clicking the Save button at the top of the form builder.
Now we can publish the form. This is the final step, and it only takes a few minutes.
Step 4: Publish Your Form on Your Website
Now we’ve completed the form, it’s time to publish it on your WordPress site.
WPForms lets you publish your forms anywhere you want. You can add them to:
In this example, let’s create a new page for the form.
To start, click Embed at the top of the form builder.
Now let’s go ahead and click Create New Page.
Type a name for your page, then click Let’s Go.
WordPress will open the new page and show a preview of your form. Click the blue Publish or Update button at the top right.
Now your multi select dropdown is live and ready to use.
And that’s it! You learned how to make a multi select dropdown easily in WordPress.
Next Step: Split Your Form Into Pages
If you’re looking for ways to make your form more compact, think about splitting it into multiple pages. This can make long forms a lot easier to work through.
To find out how to add page breaks to a form, read our guide to making a multi-step form.
Ready to build your form? Get started today with the easiest WordPress form builder plugin. WPForms Pro includes lots of free templates and offers a 14-day money-back guarantee.