Skip to main content
Version: 2.50.0-LTS

Build Dynamic Forms

This guide walks you through the process of building dynamic, interactive forms in ToolJet through validations.

1. Creating the UI

Let’s get started by setting up your form’s interface.

Drag and drop a Form component on the canvas and place the following input components inside it.

ComponentComponent NameLabel
Star Ratingstarrating1How satisfied are you with our service?
Text Inputtextinput1What specific issues did you encounter?
Text Inputtextinput2Email
Number Inputnumberinput1Contact
Buttonbutton1Submit
Dynamic Form UI

2. Add Validations and Conditions

Now, let’s add some magic with validations and conditions to make your form smart and responsive.

a. Select the textinput1 component and navigate to its Visibility condition. Click on fx next to the Visibility condition and enter the below code in the input:

{{components.form1.children.starrating1.value<4}}

This code will ensure that the textinput1 component is only visible when the start rating is below 4.

b. Select the textinput2 component and navigate to its Custom Validation property. Click on fx and enter the following code to test the email format using regex:

{{/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(components.form1.children.textinput2.value) 
? '' : 'Invalid email'}}

c. Select the numberinput1 component and enable the toggle for Make this field mandatory. This setting will display an error when the numberinput1 component is left blank.

d. Finally, the button1 component has to be disabled if the rating, email, and contact fields are not valid. Use the following code in the component's Visibility condition to achieve that:

{{!components.form1.children.textinput2.isValid || 
!components.form1.children.starrating1.value ||
!components.form1.children.numberinput1.value}}

3. Test the Functionality

It’s time to put your form to the test! Check that everything functions smoothly and as expected.

a. Check whether the textinput1 is visible and hidden based on the star rating.

Dynamic Form UI - Test Star Rating
Dynamic Form UI - Test Star Rating 2

b. Enter incorrect email and contact details to see whether the related components throw an error while disabling the button.

Dynamic Form UI - Incorrect Email and Contact Test

This short guide covers the main validation options that you can use while creating a dynamic form. To explore further, use the Tabs component to create multi-page forms while using the same logic to make it dynamic.