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.
Create Your WordPress Form Now
How to Set Up a Multi Select Dropdown Field in WordPress
In This Article
Let’s get started by installing the plugin we’re going to use.
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.
To start making your form, you’ll want to install and activate the WPForms plugin in WordPress. If you need help with this step, check out this beginner’s guide to installing a plugin.
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.
WPForms has a great volunteer application form template. But for this example, we’re going to use the simple contact form as a starting point to make it easy to follow.
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:
- Name
- Comment or message
We’ll rename it to Volunteer Form and add a date field.
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.
3. Add a Dropdown Field
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.
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.
4. Convert to Multi Select Dropdown
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. 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.
5. Publish Your Form
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:
- Posts
- Pages
- Sidebars
- The WordPress footer.
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.
Create Your WordPress Form Now
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.
- To make a multi-step form designed to boost conversions and leads, check out how to create a Lead 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.
If this article helped you out, please follow us on Facebook and Twitter for more free WordPress tutorials and guides.
I am searching for a drop down list of all the countries on a page to link the user from the drop-down list of countries to a post for that country.
Can I use WPForms for this?
Hi Stephanie,
You can Bulk Add Countries to the Dropdown Field and then after form submission you can redirect each users to respective Post URL or Page URL. Please set the Confirmation Type as “Go to URL (Redirect)” and add the respective URL.
If you have a WPForms license, you have access to our email support, so please submit a support ticket. Otherwise, we provide limited complimentary support in the WPForms Lite WordPress.org support forum.
Thanks 🙂
Switching to Modern Style isn’t providing the same results for me. I still have to hold CTRL to select multiple options when testing my forms, and the style of the field is slightly different, I can see about 1.5 choices before clicking the dropdown to reveal all of the choices.
Hi Cecelia- In order to make sure we answer your question as thoroughly as possible, could you please contact our team with some additional details about what you’re looking to do?
Thanks! 🙂
Hi I am facing issue in wp form dropdown section. When i select multiple selection and style to modern. My dropdown list become disable. Provide me a better solution.
I am using elementor popup
Hey Zayghum – We’d be happy to help! When you get a chance, please drop us a line in support so we can assist.
If you have a WPForms license, you have access to our email support, so please submit a support ticket.
Otherwise, we provide limited complimentary support in the WPForms Lite WordPress.org support forum.
Thanks 🙂