Docs

How to set up multi level linked drop-downs

Video Tutorial

What are Multilevel Dropdowns / Linked Dropdowns ?

Multilevel Dropdowns or Linked Dropdowns are great when you have several dropdown levels, and choices in one dropdown depend on the selection in the one above. Think of the Country / State / City dropdowns: you pick a country, then only its states show up, and after picking a state, only its cities appear.

Want a linked Country / State / City dropdown? No need to start from scratch. MakeForms has it ready for you. Please see this guide on how to get it set up.

If you need a Multilevel Dropdown with your own specific values, keep reading.

1. In this example, we’ll make a 3-level dropdown for Car Make / Model / Variant. Begin by looking for “Dropdown” in the left menu. You’ll see two choices: “Dropdown” and “Number Dropdown”. Either click on or drag and drop the “Dropdown” field.

Screenshot of: In this example, we'll make a 3-level dropdown for Car Make / Model / Variant. Begin by looking for "Dropdown" in the left menu. You'll see two choices: "Dropdown" and "Number Dropdown". Either click on or drag and drop the "Dropdown" field.

2. In the right sidebar, under field settings, scroll a bit. You’ll spot an option named “Multilevel Dropdown”. Simply flip the switch to change the regular Dropdown field into a “Multilevel Dropdown” field.

Screenshot of: In the right sidebar, under field settings, scroll a bit. You'll spot an option named "Multilevel Dropdown". Simply flip the switch to change the regular Dropdown field into a "Multilevel Dropdown" field.

3. Once you activate the “Multilevel Dropdown” feature, you’ll see the “Edit Values” button. Clicking it will bring up the interface where you can set the values for each dropdown level.

Screenshot of: Once you activate the "Multilevel Dropdown" feature, you'll see the "Edit Values" button. Clicking it will bring up the interface where you can set the values for each dropdown level.

4. Let’s change the name of the first dropdown to “Car Make” and replace the default values “Option 1 / Option 2” with “Mercedes / BMW”.

Screenshot of: Let's change the name of the first dropdown to "Car Make" and replace the default values "Option 1 / Option 2" with "Mercedes / BMW".

5. Next, we’ll rename the second-level dropdown to “Car Model” and begin adding values for each Model. For instance, for Mercedes, we’ll add the models S Class, C Class, and E Class. Here’s how:

  1. Click on the Mercedes option.
  2. Right after you click Mercedes, a text area for “Car Model” will appear.
  3. In this text area, list each value on a separate line. For Mercedes, you’ll enter:
    • S Class
    • C Class
    • E Class

After entering these, click “Save”.

Screenshot of: Next, we'll rename the second-level dropdown to "Car Model" and begin adding values for each Model. For instance, for Mercedes, we'll add the models S Class, C Class, and E Class. Here's how: 1. Click on the Mercedes option. 2. Right after you click Mercedes, a text area for "Car Model" will appear. 3. In this text area, list each value on a separate line. For Mercedes, you'll enter: - S Class - C Class - E Class After entering these, click "Save".

6. In the same way, we’ll input values for all the Car Models under BMW.

Screenshot of: In the same way, we'll input values for all the Car Models under BMW.

7. Now that we’ve added values for Car Make and models, let’s create a third dropdown for the variants. Click on the “+” icon and give the dropdown a name.

Screenshot of: Now that we've added values for Car Make and models, let's create a third dropdown for the variants. Click on the "+" icon and give the dropdown a name.

8. Just as we set up the Make/Model dropdowns, we’ll now input variant details for each car model. Click on a Car model to begin. Let’s start by adding the Variants for all the “Mercedes” models.

Screenshot of: Just as we set up the Make/Model dropdowns, we'll now input variant details for each car model. Click on a Car model to begin. Let's start by adding the Variants for all the "Mercedes" models.

9. After you’ve added all the values, click the “X” button in the top right corner to exit the Multilevel dropdown settings.

Screenshot of: After you've added all the values, click the "X" button in the top right corner to exit the Multilevel dropdown settings.

10. With our multi-level dropdown values set up, let’s see them in action. To do this, click on the design tab.

Screenshot of: With our multi-level dropdown values set up, let's see them in action. To do this, click on the design tab.

11. Choose the “Mercedes” option under Car Make and watch the Mercedes Car Models appear. After selecting a Car Model, you’ll then see the related Variants show up.

Screenshot of: Choose the "Mercedes" option under Car Make and watch the Mercedes Car Models appear. After selecting a Car Model, you'll then see the related Variants show up.

12. That’s how you effortlessly create linked or multi-level dropdowns with MakeForms. To see the form we just crafted in action, visit https://eu.frms.link/zc5nflh/.