Conditional fields feature first-hand example

Let's assume that we need to implement the following scenario: you need to gather information such as First Name, Last Name and Address for a travel agency. This wouldn't pose any problems unless you wish to allow multiple registrations on a single form submission. In our case, we will allow 3 registrations on the same form submission.



This is where the Conditional fields feature comes in. It allows you to show / hide fields based on conditions set by selections made in dropdowns / radio / checkbox groups. The only drawback to this is the fact that you need to have a limited, pre-defined number of fields, you cannot add them "on the fly".


Form Fields


  • travellers: a dropdown menu containing the following items:

1|1

2|2

3|3


All groups of fields need to be already available when the user accesses the form:


First traveller


  • t1fname: textbox - First Name
  • t1lname: textbox - Last Name
  • t1address: textarea - Address

Second traveller


  • t2fname: textbox - First Name
  • t2lname: textbox - Last Name
  • t2address: textarea - Address

Third traveller


  • t3fname: textbox - First Name
  • t3lname: textbox - Last Name
  • t3address: textarea - Address

Show / Hide Conditions


To keep the article short, we will not present all of the conditions that need to be set for each of the fields. Instead, we'll just explain the logic behind them, and leave the rest for you to implement. Also, note that you can also install the sample form linked at the beginning of the article and have a look at how it was implemented.


Fields that belong to the First traveller group of fields will need to be displayed regardless of the value selected in the travellers dropdown (either 1, 2 or 3), as illustrated below:



Fields that belong to the Second traveller group of fields will need to be displayed if items 2 or 3 are selected in the travellers dropdown, as illustrated below:



Fields that belong to the Third traveller group of fields will need to be displayed only if item 3 is selected in the travellers dropdown, as illustrated below:




8 persons found this article helpful.


Was this article helpful?

Yes No
Sorry about that

You Should Also Read

How to create a conditional multi-page form HOT

Conditional fields are not working