ToolJet/docs/versioned_docs/version-3.5.0-LTS/how-to/build-dynamic-forms.md

---
id: build-dynamic-forms
title: Build Dynamic Forms
---

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

<div style={{paddingBottom:'24px'}}>

## 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. 

| Component         | Component Name | Label                                              |
|:------------------|:---------------|:---------------------------------------------------|
| Star Rating       | *starrating1*  | How satisfied are you with our service?            |
| Text Input        | *textinput1*   | What specific issues did you encounter?            |
| Text Input        | *textinput2*   | Email                                              |
| Number Input      | *numberinput1* | Contact                                            |
| Button            | *button1*      | Submit                                             |

<img src="/img/how-to/build-dynamic-forms/dynamic-form-UI.png" alt="Dynamic Form UI" />

</div>

<div style={{paddingBottom:'24px'}}>

## 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:

```javascript
{{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:
```javascript
{{/^[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:

```javascript
{{components.form1.isValid}}
```
</div>

<div style={{paddingBottom:'24px'}}>

## 3. Test the Functionality

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

1. Check whether the textinput1 component's visibility is changed based on the rating selected in the Star Rating component.
        <img src="/img/how-to/build-dynamic-forms/start-rating-condition-test.png" style={{paddingBottom:"25px", marginTop:'15px'}} alt="Dynamic Form UI - Test Star Rating" />
        <img src="/img/how-to/build-dynamic-forms/start-rating-condition-test-2.png" style={{paddingBottom:"25px"}} alt="Dynamic Form UI - Test Star Rating 2" />
2. Enter incorrect email and contact details to see whether the related components throw an error while disabling the button.
        <img src="/img/how-to/build-dynamic-forms/incorrect-email-and-contact-test.png" style={{paddingBottom:"25px", marginTop:'15px'}} alt="Dynamic Form UI - Incorrect Email and Contact Test" />

</div>

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.