cascading dropdown?

  • Profile Image
    Asked on May 23, 2017 at 03:11 AM


    Is it possible to add cascading dropdown?


    Dropdown list for "department" with options to select Finance, IT, Retail etc.

    If Finance is selected, another dropdown for Sub department either appears or populates with options relevant to finance... i.e. Payroll, Accounts Team.

    If IT is selected the same dropdown has options such as Support, Project etc.





  • Profile Image
    Answered on May 23, 2017 at 03:34 AM

    Hey Luke,

    You can use "Dynamic Dropdown" widget for this purpose.

    Firstly, if you have not add any widget to your forms, you can follow this guide to learn how to add a one:


    Afterwards, you can find this widget by using search field in widgets section

    After adding a dynamic dropdown to your form, please edit the values field by following the notes below it to successfully create your cascade dropdown.


    If you need to ask any question please feel free to ask it.

    Thank you for writing us.

    Have a nice day!

  • Profile Image
    Answered on May 23, 2017 at 04:50 AM

    Thanks very much for your reply.

    I have managed to add the dynamic dropdown with your help no problem!

    Im wondering.... is it possible to have the dynamic top downs next to each other, rather than appearing one on top of each other?

  • Profile Image
    Answered on May 23, 2017 at 06:37 AM


    Yes, you can. By default, fields expand its width to the actual size of the form. By shrinking it, it will it will only be on a limited size up to the extent of the field, and by then that you can put your fields to sit next to each other, containing what can fit on the width of the form.

    Please check this guide for information on how to make this happen: 

  • Profile Image
    Answered on May 23, 2017 at 06:52 AM

    Sorry, I spoke too early and of a different method. 

    Yes, you can set your fields on the widget to sit next to each other still. To do this, you need to insert this CSS code into your widget:

    select {
       float: left !important;
       clear: none !important;

    On how to insert the code, you need to click on the Widget Settings Wizard > Custom CSS then insert the code.

    Don't forget to click the Update widget button at the bottom after inserting the code.

    If you have questions, please let us know.