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)

Editorial Note: We may earn a commission when you visit links on our website.

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

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.

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.

Use Simple Contact Form template

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

  • Name
  • Email
  • 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.

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.

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.

Drag multi select dropdown onto form

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.

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.

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.

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

WordPress multi dropdown list on a form

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:

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.

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.

Comments

  1. 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?

    1. 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 🙂

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

    1. 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! 🙂

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

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.