How to Create Conditional Drop Down Lists in WordPress Forms

Learn how to create conditional drop-down lists in WordPress using Formidable Forms. A simple, code-free, query-free method.

Looking for a way to create conditional drop-down lists in forms where the options in a drop-down are dependent on the selections a person made in the previous drop-downs?

For example, a form where a user first selects the year of their car, then the make, then the model from a list of options that only apply to the year/make that they already selected.

This functionality is super helpful when you're creating forms to handle price estimates, quotes, payments, etc. It's also great for end-users because they won't have to filter through tons of irrelevant options.

With Formidable Forms, you can set up conditional drop-down lists right from a user-friendly interface - no need to mess with complex queries or custom code solutions.

Keep reading for a step-by-step guide on how to create dependent drop-downs in WordPress with Formidable Forms.

How to Create Conditional Drop-Down Lists With Formidable Forms

Before digging into the detailed step-by-step tutorial, let's go through a high-level look at how cascading drop-down forms work with Formidable Forms.

1. Create a "data form" to house all of the data that will populate your cascading drop-downs. End-users will not interact with this form directly - it's just there to hold the data.
2. Populate your "data form" with the data it needs by adding entries. If you have a ton of data, you can save time by importing a CSV, rather than trying to manually enter all your data.
3. Create a second "end user form". This is the form that your human visitors will interact with.
4. Add lookup fields to the "end user form" so that it can pull data from the "data form" as needed to populate the drop-downs.

Let's go through it in more detail…

For this example, we'll use an auto industry example with three conditional drop-down fields. The order will go like this:

1. User selects the year of their car
2. User selects the make of their car from makes available in that year
3. User selects the specific model of their car based on the year/make that they selected

1. Create the "Data Form"

To get started, create a new form to act as your "data form". Again, your end-users will not directly interact with this form, but the "end user form" that you create later on will pull its data from this form's entries.

Then, add a text field for each drop-down list that you want to include in your end user form. For our example, that would be three text fields for:

1. Year
2. Make
3. Model

Then, save your form.

2. Import Data as Form Entries

Next, you'll need to fill your "data form" with the options that you want to display in your cascading drop-downs. 

To do this, you'll add each piece of data as a form entry.

If you have a large data set, the easiest method is to import a CSV file. For example, our automobile data set has over 7,000 rows - that's not something you want to do manually!

If you don't have a lot of data, you can also manually add entries from the Entries tab of your data form.

To import a CSV to Formidable Forms, first make sure that the headings in your CSV match the text fields in your "data form". 

In Excel, you can see how our example CSV has three columns, each of which matches the text fields that we created in the previous step:

Once you have your CSV file ready…

• Go to Formidable → Import/Export
• Use the Choose File button to select your CSV file
• Enter the CSV delimiter (this is almost always a comma)
• Select your "data form" from the Import Into Form drop-down
• Click Upload file and import

On the next screen, make sure that the data from your CSV file is properly mapped to the corresponding fields in your form. Then, click Import:

Now, you have the data you need to populate your conditional drop-down lists:

Next, it's time to create dependent drop-down lists for your visitors to interact with.

3. Create "End User Form" and Add Lookup Fields

Next, create a new form. This will be the form that your human visitors see.

Once you have your new form, add a Lookup field and give it a name - e.g. "Select Year".

Then, find the Lookup Options settings in the Field Settings and…

• Select your data form using the Select Form drop-down
• Select the source field to pull data from using the Select Field drop-down - e.g. "Year"

Make sure to save your changes.

Then, add another Lookup field and configure it for the next set of data. Only now, you'll also use the Watch a Lookup Field button to make this lookup field dependent on the previous Lookup field. This is what allows you to only display options that match the previous field and create that "cascading" effect:

Make sure to save your changes.

To add the final drop-down (for our example, at least), you'd add another Lookup field. Only now, you'll use the Watch a Lookup Field option to make it dependent on both of the previous fields:

If you want to add more conditional drop-downs to your form, you can repeat the same pattern as many times as needed.

And that's it - if you preview your form, you should see that nice cascading effect when you interact with your form:

Create Your First Conditional Drop-Down List Today

Cascading drop-down forms are a popular approach that makes a great option for forms involving price estimates, quotes, payments, locations, etc.

With Formidable Forms, you can create conditional drop-down lists using as many conditions as needed, without writing any custom queries or code.

To set it up, all you need to do is create two forms and use lookup fields to connect the two. For large datasets, you can even import a CSV file straight from Excel to populate your data form.

To create dependent drop-down lists with Formidable Forms, you'll need the Formidable Forms Basic plan or above.

If you're not already using Formidable Forms Pro, learn about all the helpful form builder features to understand why Formidable Forms is the best WordPress form plugin for conditional drop-down lists.