how-to-set-up-a-multi-select-dropdown-field-in-wordpress

How to Set Up a Multi Select Dropdown Field in WordPress (The Easy Way)

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.

Create Your WordPress Form Now

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.

WordPress multi dropdown list on a form

WPForms is the best WordPress Form Builder plugin. Get it for free!

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.

  1. Install the WPForms Plugin
  2. Create Your Form
  3. Add a Multi Select Dropdown Field to Your Form
  4. 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.

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.

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.

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 instead.

To start, open your WordPress dashboard and click WPForms » Add New.

Add new form to add a multi step dropdown

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.

Open Simple Contact Form template in WPForms

Now the template is open, you’ll see that we already have 3 fields:

  • Name
  • Email
  • Comment or message

Build new form for multi select dropdown field

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.

Change date time field to date

Now scroll down to Advanced Options and click on it to expand the settings.

Expand the advanced options for the date field

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:

Limit days in the time and date field

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.

Drag multi select dropdown onto form

WPForms 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.

Bulk add options to the multi select dropdown

And then click Show Presets to open all of the available preset lists.

Show multi select dropdown presets

Now let’s click States to automatically get a list of US states that we can add to the multi select dropdown.

States 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.

Add answer choices to the multi select dropdown

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.

Remove default answers from multi select dropdown

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.

Enable Multiple Options Selection to make a multi select dropdown

There’s another important change to make right underneath.

Let’s change the style of this field to a Modern dropdown.

Modern style multi select 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.

Embed your multi select dropdown form

Now let’s go ahead and click Create New Page.

Create new page in WordPress for multi select dropdown

Type a name for your page, then click Let’s Go.

Click the Let's Go button to create a page for the multi select dropdown form

WordPress will open the new page and show a preview of your form. Click the blue Publish or Update button at the top right.

Publish form with multi select dropdown

Now your multi select dropdown is live and ready to use.

Multi select dropdown example

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.

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.

Using WordPress and want to get WPForms for free?

Enter the URL to your WordPress website to install.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

This form is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.