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.

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.

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

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.

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:

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

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.

The post How to Set Up a Multi Select Dropdown Field in WordPress (The Easy Way) appeared first on WPForms.

source https://wpforms.com/how-to-multi-select-dropdown/