Create a interactive form with conditional logic

Now that we are comfortable with the conditional logic system, let us create a sample form. The below is what we will create.

And the same form can be downloaded from this link.

See our guide on Import Export Forms to learn how to use the downloaded file.

The form has the following interactive features:

Recalled submitter name in a form element.
Hidden form elements, until First Name is entered.
Additional nested elements which are hidden, until a checkbox is checked.
Autofill Your profession based on the value of Things you like.

Understanding the Form Structure

If you edit the form, you will notice is has the following structure.

Conditional logic in the form — Form Overview

There is a main Row Container element with two columns.
The left column has 4 form elements. The last one Things you like is hidden.
On the right column there is a Question Group element.
The title of the Question Group has a dynamic recall value for the First Name.
Additionally the form elements [3] Awesome [First Name], here's a 30% coupon for you... (from hereon referred to as the Question Group) and [4] Your age are hidden initially.

Here, our goal is to

Only show the left column at first, which is why we have the whole Question Group on the right column hidden. Show the Right Column when the user enters their First Name or Last Name.
Show 3 and 4 when user checks the I am feeling like answering a few more question... element.
Based on the value of Things you like, we will try to set value of Your profession.

Hiding elements initially

First we need to hide the element's we don't want to show. In the sample form it is already hidden, and here's how we did this.

Hide Elements — Hide Things you like & Group

The Question Things you like and the Question Group will be shown when First Name OR Last Name is filled. So we hide them by toggling the visibility switch.

Inside the Question Group, Form Elements 3 and 4 will be shown when element 2 is checked, so we hide them too.

Adding the Conditional Logic

Now we go to the Logic builder and add the following new logic.

Logic Block 1

The first logic handles showing the Form Elements Things you like and the Question Group if either of the First Name or Last Name is filled. For this we've used the HAS LENGTH event. The length of those elements is the number of characters written by the user.

[logic]


1IF
2  "First Name" HAS LENGTH WHICH IS GREATER THAN 0
3OR
4  "Last Name" HAS LENGTH WHICH IS GREATER THAN 0
5->
6  SHOW ELEMENTS ["Things you like", "Hey ..., mind asking us a little bit more?"]

Logic Block 2

The second logic handles showing the Form Elements Awesome, here's a 30% coupon for you and Your age when the checkbox I am feeling like answering a few more question... is checked.

[logic]


1IF
2  "I am feeling like answering a few more question..."
3    HAS VALUE WHICH IS EQUAL TO "Checked"
4->
5  SHOW ELEMENTS ["Awesome! ..., here's a 30% coupon for you...", "Your age"]

Logic Block 3

The third logic handles Setting value of the Form Element Your profession to "Athelete" when the value of Things you like contains either "Basket ball" or "Football". For this we've considered two events with OR relation.

[logic]


1IF
2  "Things you like" HAS VALUE WHICH IS CONTAINING "Basket ball"
3OR
4  "Things you like" HAS VALUE WHICH IS CONTAINING "Football"
5->
6  SET VALUE OF "Yout profession" TO "Athelete"

Logic Block 4

The fourth logic handles setting value of the Form Element Your profession to "Software Engineer" when Things you like contains the value "Coding".

[logic]


1IF
2  "Things you like" HAS VALUE WHICH IS CONTAINING "Coding"
3->
4  SET VALUE OF "Your profession" TO "Software Engineer"

Logic Block 5

The fifth logic handles setting value of the Form Element Your profession to "Swimmer" when Things you like contains the value "Swimming".

[logic]


1IF
2  "Things you like" HAS VALUE WHICH IS EQUAL TO "Swimming"
3->
4  SET VALUE OF "Yout profession" TO "Swimmer"

The order of the logic block decides which logic (if conflicting) would take preference. The last Logic Block will always decide the end consequence of a Form Element.

And that's how we've created this interactive form. Do play with the interface and keep an eye on accidental circular conditional logic. If you have any queries, feel free to contact us.