# Displaying Sections Dynamically

It is possible to create forms that appear as the user enters input. This can be helpful to direct the user to the next input. In other cases, inputs are dependent on each other and need to be entered in a specific order. This article will walk through the basics of building out a form that displays new fields based on user input. When the user enters data in one field, the next field will appear.

### Creating the form

[Create a simple form](form-basics) that looks like this:

![organizing info](https://1191388742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhOn9CLWoV9VfJeM5EDAa%2Fuploads%2Fgit-blob-4d10e8b2c1923326b3664a8686f5ce9c8cd22bbf%2Fdisplaying-sections-dynamically-v1715-0.png?alt=media)

Start by adding a [Container](../../web-controls/container-web-control) to the web page. This container will hold the entire input form. Create a [Label](../../web-controls/label-web-control) for the prompt. Create a container for the book title label and the [text input](../../web-controls/text-input-web-control). Create another Container for the star rating label and the input. Create a third container for the "write your review:" label and [text area input](../../web-controls/text-area-web-control). Create a submit button at the bottom. When completed, the Tree view should look like this:

![organizing info](https://1191388742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhOn9CLWoV9VfJeM5EDAa%2Fuploads%2Fgit-blob-56bbf19d8e1525db792e9cad2e6a31746f1f32bf%2Fdisplaying-sections-dynamically-v1715-1.png?alt=media)

### Setting up inputs to appear in order

Components in the studio have a property called _Is Visible_. This is an expression that evaluates to TRUE or FALSE. If the expression evaluates to TRUE, the component will appear, if the expression evaluates to FALSE, then the component will be hidden. The _Is Visible_ is dynamically recalculated so if the value of the expression changes from FALSE to TRUE, the component will appear. Using this, it is possible to have components appear on the page.

Start by going to the container that has the star rating. With the container selected, choose the Advanced tab in the inspector. Put the following code snippet into the _Is Visible_ option:

```javascript
ISNOTEMPTY(title)
```

Using [ISNOTEMPTY()](../../airscript-expressions/conditional-functions/isnotempty) will hide the entire container, including the label until the user enters a title for the book. To understand more about empty states, check out the [Airscript Empty States](../../airscript/working-with-missing-values) article. Selecting the container for the review text area, set the _Is Visible_ value in the Advanced tab to:

```javascript
ISNOTEMPTY(rating)
```

By putting visibility dependent on the rating, and the rating having the visibility dependent on the title, this field will start hidden, and only be displayed once the title and then the rating is selected. Modify the submit button in the same way by setting the _Is Visible_ equal to:

```javascript
ISNOTEMPTY(  
  review_text  
) 
```

Running the experience in preview should look similar to:

![organizing info](https://a01-support.airkit.com/dynamic-forms-based-on-user-input/DynamicFormsBookReview.gif)

### Submitting to the same page

While it is usually a best practice to space out a form experience through several web pages within a web flow, there are certain times where it might make sense to collect data on the same page. A page rendering search results is a good example of this pattern.

Create another container at the root of the Web Page containing the book review. Name it "Response Container". Add a Label to the container and enter some text like "Response Received". Click on the Web Page and a variable called **response\_sent** of type Boolean. Then go back to the Response container and set the Is Visible to:

```javascript
response_sent
```

this variable. Select the Input container and set the Is Visible to:

```javascript
NOT(response_sent)
```

Go to the submit button. Add a Clicked action that sets the value of **response\_sent** to [TRUE](../../variable-data-types/the-boolean-variable-data-type). Now when the flow is run it should look like this:

![organizing info](https://1191388742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhOn9CLWoV9VfJeM5EDAa%2Fuploads%2Fgit-blob-1733df44f0b2739f85f7754f3cfd3f90325dda4e%2Fdisplaying-sections-dynamically-v1715-2.gif?alt=media)

### Refreshing the page

What if the user wanted to submit another review. This section will walk through resetting the form. Go to the Response Container and add a button with the text "Write another review". Go to the Actions tab in the inspector for the button. Add four [Set Variable](../../actions/the-set-variable-action) actions for the Clicked event.

![organizing info](https://1191388742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhOn9CLWoV9VfJeM5EDAa%2Fuploads%2Fgit-blob-35f83ba1c17af77857f0b342b5338fc372c0a7aa%2Fdisplaying-sections-dynamically-v1715-3.png?alt=media)

This is taking all of the inputs for the form and setting them back to the original starting point of the App, with all of them set to [**NULL**](../../variable-data-types/the-null-data-type). The final effect of the app is that once the user clicks the button to write another review, the Response Container will be hidden and the Input Container will be rendered. The fields are empty so the Input container will only have the book title container visible.

![organizing info](https://1191388742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhOn9CLWoV9VfJeM5EDAa%2Fuploads%2Fgit-blob-77e0f1a13196a96f3b250adedbf0e7ffb3d033fb%2Fdisplaying-sections-dynamically-v1715-4.gif?alt=media)
