Learn how to create conditional drop down lists in WordPress. We'll show a simple, code-free method to make a car make and model WordPress forms drop down list.
Approximate read time: 5 minutes
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, consider an auto dealer form with a car make and model drop down list.
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 they have chosen already. You may have also heard these forms referred to as chained select.
This functionality is super helpful when creating forms to handle price estimates, quotes, payments, etc. It's also great for end-users because they won't have to filter through many irrelevant options.
With Formidable Forms, you can set up a WordPress dropdown list 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 creating dependent drop down lists in WordPress.
How to Create Conditional Drop Down Lists
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 as a dropdown list plugin for WordPress.
- Create a "data form" to house all 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.
- Populate your "data form" with the data it needs by adding entries. You can save time by importing a CSV rather than manually entering all your data if you have a ton of data.
- Create a second "end user form." This is the form that your human visitors will interact with.
- Add lookup fields to the "end user form" to pull data from the "data form" as needed to populate the drop downs.
Let's go through it in more detail…
We'll use an auto industry example with three conditional drop down fields for this example. The order will go like this:
- User selects the Year of their car
- The user chooses their vehicle's make from Makes available in Year
- Users choose their car's specific model based on the Year/Make they set
Step 1. Create the "Data Form"
To start, go to Formidable → Forms in your WordPress dashboard to 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" you create later will pull its data from this form's entries.
Then, simply drag and drop a text field for each drop down list you want to include in your end-user form.
For our example, there would be three text fields:
- Year
- Make
- Model
Then, click Update to save your form.
Step 2. Import Data as Form Entries
Next, you'll need to fill your "data form" with the options 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 manually add entries from the Entries tab of your data form.
To import a CSV to Formidable Forms, ensure 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 mapped correctly 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.
Step 3. Create an "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 following data set. You'll only now use the Watch a Lookup Field button to make this lookup field dependent on the previous Lookup field.
This allows you only to display options that match the last field and create that "cascading" effect:
Make sure to save your changes.
You'd add another Lookup field to add the final drop down (for our example, at least). Only now, you'll use the Watch a Lookup Field option to make it dependent on the previous fields:
If you want to add more conditional drop downs to your form, you can repeat the same pattern as often 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 an excellent option for forms involving price estimates, quotes, payments, locations, etc.
With the Formidable Forms WordPress plugin, you can create conditional drop down lists using as many conditions as needed without writing any custom queries or code.
To set it up, you must create two forms and use lookup fields to connect them. You can even import a CSV file straight from Excel to populate your data form for large datasets.
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.
See more awesome things you can do with dependent drop down lists
Did you know that Formidable Forms is one of the fastest WordPress form builder plugins available today? If you're not already using it, get started with our free plugin or the full-featured pro version!
Can I import a CSV file with both the drop down options (into the Data Form) and import the conditions. It doesn't matter if there is programming involved.
Where is the option to import CSV's in the free version? The only option I see is XML.
Hi Sara, yes, in the free version XML is the only option. Have a look here for more info: https://formidableforms.com/knowledgebase/import-forms-entries-and-views/
hello , can i import PDF files , to show them by the dropdown list the same example but to download PDF files in the end user forms
Sorry, this feature is not supported.
can i use it with woocommerce product
Yes, we have a woo commerce integration. You can learn more about that here: https://formidableforms.com/knowledgebase/formidable-woocommerce/
This is very useful for complex forms. I used it to build a multi-page form for employees to kick-off their annual review process. Depending on who they select as their leader, they receive different conditional options later on in the process. This, along with a an add-on for PDF generation, has made our annual review process much more streamlined and automated.
This is one of the more useful features for complex forms. I've come across many, many forms that do not filter out options based on previous selections. It leads to mismatched data, confusion and a lots of wasted time.
Alternatively I was thinking you can just use basic conditional fields and choose which dropdown appears second based on the answer to the first, but that only is really feasible for a small amount of options or you'd have a LOT of fields that are hidden/conditionally shown... so to have this as an option to keep your forms simple, is huge!
Thanks for the detailed instructions. It's something I haven't done yet even though I've been using Formidable for several years.
Very complete and useful tutorial. An excellent option
You make the learning process much smoother and easier to follow! Thanks for the helpful tutorial.
I am building a database for a school that requires lookup using timeframes and courses to find listings of students and professors. This is just what I need.
Great article! I finally understand how to use the Look up fields properly. I am building a complex form for company use at the backend of our website. I have been struggling for months trying to get the Look Up fields to work properly.
Thank you!
Glad to hear this article helped, but sorry to hear you struggled for so long. Just a reminder that our support team is always standing by and happy to help if you get stuck implementing one of our features.
I found this really useful thanks. Am still wondering if there is a way to separate the data sources so that I am choosing one field from one data source, but then using the choice i made to pull data from another data source for the next dropdown.
Can I put a picture and display it after pressing "search" button?
Yes, this can be done.
Is there a way to have have a single select listing all parent categories, then a second select with the sub-categories based on the first selection?
HI Chris, We call these cascading fields. They can be done in a few different ways based on the type of data you are working with, but this is the most common setup: https://formidableforms.com/knowledgebase/lookup/#kb-set-up-cascading-fields
order dropdown contact form 7 is best plugin to the usual drop-down field of the tag field will automatically add the names of the countries.
I have 3000+ makes and Models. when I select a make it takes long time to refresh the model. I need a Contact Form like this website https://goproengines.com/ which is Instant and doest take time to load.
It it possible to achive it using Formidable
Hi there,
We work hard to keep things performant and fast, But there are a lot of factors that go into this including server configuration, caching, theme and plugin combinations.
While 3000 doesn't seem like too many for our plugin to handle well, I would recommend testing out this element of your setup to make sure it works to your liking. If it doesn't, you can always get a refund within the first 14 days.