# Building the Form’s UI

In **Web Flows** Builder you’ll find the Web Flow you have added from **Journey** Builder. This will be the Form that users will be directed to upon starting their Journey. Now let's build out the UI that will be contained in that Web Flow.

### Working with Web Flow level Variables

1. Rename the Web Flow to “Form” by double clicking on the Web Flow in the Tree.

![](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-a013d7ba8a63368a8ecca9986b36fea41089965e%2Fbuilding-the-forms-ui-v180-0.png?alt=media)

2. Click on **Variables** at the bottom of the screen and in **Activity Group Variables**, click on the ‘+’ icon. Select the Variable of Type Object that you have created before.

![](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-6210e5b5cd16a8e38b7fc3a23b38447bfa0b349f%2Fbuilding-the-forms-ui-v180-1.png?alt=media)

3. Change its name to “user\_input”.

![](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-121c45b743e4a9516afe6bd4144f90c1144c313e%2Fbuilding-the-forms-ui-v180-2.png?alt=media)

This way, the `user` Variable of Type Object will be now available at a Web Flow level. This means that it can be called from any of this Web Flow’s Web Pages.

### Building the Web Pages

This Form Web Flow will include three Web Pages: a Personal Info Web Page, an Additional Info Web Page, and a Review Web Page.

#### Personal Info Web Page

1. Rename the nested Web Page to "Personal Info" by double clicking on it.
2. Add a Container and rename it to “Title”.

![](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-557439234971712b174afd88a677ce7ba74b4a15%2Fbuilding-the-forms-ui-v180-3.png?alt=media)

Containers help with the organization of the Form by grouping controls and can be styled to distribute them or make them sit side by side.

3. Nest a Label by clicking on the ‘+’ icon next to the Container.

![](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-7771c76478d65724b9c3dae213141ba437cc0aca%2Fbuilding-the-forms-ui-v180-4.png?alt=media)

4. With the Label selected, go to the **General** tab of the Inspector, and in **Control Properties > Text**, enter your Form’s title.

![](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-91e642797cc60e07e7b4895446768164c594052c%2Fbuilding-the-forms-ui-v180-5.png?alt=media)

5. Add another Container and rename it to “Name”. Add a Label and a Text Input Control nested underneath.

![](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-1cd0174729ddf061f9c8e6b11906830ae357ef90%2Fbuilding-the-forms-ui-v180-6.png?alt=media)

6. With the Text Input Control selected, go to the Inspector section and, in **Data Binding**, change the auto generated Variable. In order to tie it to the `user` Variable of Type Object we have created before, enter:

```javascript
activityGroup.user_input.first_name
```

![](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-1989b871733dfcb30ff8cd1e8e44bf0f2044bde9%2Fbuilding-the-forms-ui-v180-7.png?alt=media)

This way, the value the user enters in this field, will be bound to the App Object in AirData later on.

<details>

<summary>Why use the activityGroup namespace?</summary>

Using the corresponding [Variable Namespace](../../data-and-integrations/variable-namespaces) is a best practice to make sure [Variable](https://github.com/airkit/airkit-docs/blob/master/docs/v18-0/variable-scopes.md) work in the scope we need. For example, the namespace corresponding to the Web Flow scope, is called by using `activityGroup` before the Variable name.

Each scope includes the ones below, that is to say, if working with a Variable at a Web Flow level, it will also be available in all Web Pages, but it won’t be available globally to use on a different Web Flow.

Check the table below: \[block:parameters] { "data": { "h-0": "Variable scope", "h-1": "Namespace", "0-0": "Global", "1-0": "Web Flow", "2-0": "Web Page", "0-1": "session.value", "1-1": "activityGroup.value", "2-1": "activity.value" }, "cols": 2, "rows": 3 } \[/block]

</details>

7. Duplicate the previous container and rename it to “Last Name”. Change the Label to “Last name” as well.

![](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-46a98f665bc7431e34ba02c62692d99d8fc31f65%2Fbuilding-the-forms-ui-v180-8.png?alt=media)

8. With the Text Input Control selected, in **Data Binding** enter the following:

```javascript
activityGroup.user_input.last_name
```

![](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-3ff9a9b1553aee88168f7dbf353af7bf314debc2%2Fbuilding-the-forms-ui-v180-9.png?alt=media)

9. Duplicate the previous Container and rename it to “Phone number”. Rename the Label to “Phone”.
10. Delete the Text Input and add a Phone Input Control.

![](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-a4f8b312a032a55f62ea8e1b231302e9476a5217%2Fbuilding-the-forms-ui-v180-10.png?alt=media)

11. In **Data Binding** enter the following:

```javascript
activityGroup.user_input.phone
```

![](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-d2d0c573be390bb56ddb0874564c65cc545843c2%2Fbuilding-the-forms-ui-v180-11.png?alt=media)

This is how the Web Page should look like so far:

![](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-5df1e9259833d46985cc62de9495ea91dcd9bfea%2Fbuilding-the-forms-ui-v180-12.png?alt=media)

**Add Validation to your Web Page**

12. Add a Label Control to type the following error message: “Phone number cannot be empty”. In the **General** tab of the Inspector section, change the Variant for the an error-like one.

![](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-b2853565505eef03af6d83411b6efae30802aaa4%2Fbuilding-the-forms-ui-v180-13.png?alt=media)

13. Go to the **Advanced** tab and in, **Is Visible**, set up the [ISEMPTY](../../airscript-expressions/conditional-functions/isempty) Expression so that this error message displays only when the Phone field is incomplete:

```javascript
ISEMPTY(activityGroup.user_input.phone)
```

![](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-20574382ba8e1845b30b5671fa9933a5aa2f41dc%2Fbuilding-the-forms-ui-v180-14.png?alt=media)

<details>

<summary>Why use the ISEMPTY function?</summary>

In this case, the ISEMPTY function allows you to confirm whether the user completed a required field, hence stopping them from advancing until the information is entered. On the other hand, this function works in tandem with the Phone Input Web Control ensuring that the numbers entered are actually a valid phone number.

</details>

14. Add a Container and nest a Button Control underneath. Rename it to “Next”.

![](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-4ae38e2ed91aa1fce9677d3622c72cf0e8cae5b3%2Fbuilding-the-forms-ui-v180-15.png?alt=media)

15. Go to the **Actions** tab in the Inspector section and add a **Navigate to Web Page** Action. Select **Add Web Page**.

![](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-098b4bf09b69fcff426dbb6ae3c91919136dec4b%2Fbuilding-the-forms-ui-v180-16.png?alt=media)

16. Save the app

#### Additional Info Web Page

1. Rename the new Web Page to "Additional Info" by double clicking on it.
2. Add a Container and rename it to “Birthday”. Add a Label and a Date Input Control nested underneath.

![](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-245b593fcf51de2667d7f16ac9b39a318a9c2c74%2Fbuilding-the-forms-ui-v180-17.png?alt=media)

3. With the Date Input Control selected, go to the Inspector section and, in **Data Binding**, change the auto generated Variable to:

```javascript
activityGroup.user_input.birthday
```

![](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-e93bb09c2f618e57cae4afced64256f8cb92b2ea%2Fbuilding-the-forms-ui-v180-18.png?alt=media)

Date Input Controls contain a Date Picker Control for further configuration. Select it and, in the Inspector section, change the **Date Picker Layout** to “1 month” for a clearer calendar view. Also, set **Date Range** to “past” so that the user can pick their date of birth.

![](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-8473a7e77373fc7467a50933abe0259ac7999901%2Fbuilding-the-forms-ui-v180-19.png?alt=media)

4. Add another Container and rename it to “Email”. Add a Label, rename it to “Email” as well.
5. Add a Text Input Control nested underneath. With the Text Input Control selected, go to the Inspector and, in **Data Binding**, enter the following:

```javascript
activityGroup.user_input.email
```

![](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-df00618d21f72a93ffd53cb19e6c950a40c9ecca%2Fbuilding-the-forms-ui-v180-20.png?alt=media)

5. Duplicate the previous Container and rename it to “Company”. Rename the Label to “Company”. With the Text Input Control selected, in **Data Binding** enter the following:

```javascript
activityGroup.user_input.company
```

![](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-de9d7a8de2e61b71cafd7b37a8eae7329c080268%2Fbuilding-the-forms-ui-v180-21.png?alt=media)

6. Add a Container and rename it to "Buttons".
7. Nest two Button Controls of different styles underneath.

![](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-65312d02be8ae470f67c1fa74e2b4f3fd987379e%2Fbuilding-the-forms-ui-v180-22.png?alt=media)

8. Rename the first one to “Back”. Go to the **Actions** tab in the Inspector section and add a **Navigate to Web Page** Action. Select the “Personal Info” Web Page.

![](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-5f646ead3e678f06f99f35a27b284aa8fba056aa%2Fbuilding-the-forms-ui-v180-23.png?alt=media)

This way, if the user wants to edit a field from the previous page, can go back to it.

9. Rename the second one to “Next”. Go to the **Actions** tab in the Inspector section and add a **Navigate to Web Page** Action. Select the **Add Web Page** option for the user to move forward.

![](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-af07daf5dee1284ef7c56a3ebb07f18f1dbdb300%2Fbuilding-the-forms-ui-v180-24.png?alt=media)

10. So that the Button Controls sit side by side, select the Buttons Container and go to the **General** tab of the Inspector section. In **Distribute Children** click on **Stack Horizontal**. You can also change the spacing to your liking, in this case, the space between the buttons is set in 8px:

![](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-0bd3430525975ca6ec63804b0d9cdad3c6f7e272%2Fbuilding-the-forms-ui-v180-25.png?alt=media)

11. Save the app.

#### Review Web Page

1. Rename the new Web Page to "Review" by double clicking on it.
2. Add a Container, rename it to "Title" and nest a Label underneath.
3. With the Label selected, go to **Control properties > Text** in the **General** tab of the Inspector and add a title.

![](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-04aacb987a61650dec81c86ae2ad9134dc2bf20d%2Fbuilding-the-forms-ui-v180-26.png?alt=media)

3. Add another Container and rename it to “Inputs”. Nest six Labels, one for each of the Input Controls you added in the previous Web Pages.
4. Select the Labels one by one and in **Control Properties > Text** add the following Variables to bind the Values of the Input fields:

For the fields of type Text:

* `activityGroup.user_input.first_name`
* `activityGroup.user_input.last_name`
* `activityGroup.user_input.email`
* `activityGroup.user_input.company`

For the field of Type Phone add the following Expression:

```javascript
FORMAT_PHONE(
  activityGroup.user_input.phone,
  "INTERNATIONAL"
)
```

For the of Type Date add the following Expression:

```javascript
FORMAT_DATE(
  activityGroup.user_input.birthday,
  "MM/DD/YYYY"
)
```

<details>

<summary>Why use the FORMAT function?</summary>

The FORMAT function allows you to convert an input into a specific output format.

In this case, we are using [FORMAT\_PHONE](../../airscript-expressions/phone-functions/format_phone) to take the inputted phone number and return a string containing the same phone number but in an international format.

Also, we are using [FORMAT\_DATE](../../airscript-expressions/datetime-functions/format_date) to convert the inputted date into the desired format, in this case: MM/DD/YYYY.

</details>

You’ll notice that the Web Page looks blank, but you’ll be able to see the entered information once checking the app in the App Preview or by assigning dummy data to this Variables in the Variables Tree.

![](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-4ed69ad0b1ea7f4baa78d807850525cc1a0696bc%2Fbuilding-the-forms-ui-v180-27.png?alt=media)

5. Then add six more Labels and drag them over each of the Labels containing the Variables with the inputted data. In **Text** enter the name of the field so that data is displayed in a more orderly fashion once captured:

![](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-3e0f44348b7196f3c4ed5fc67f2b0f3db3aef010%2Fbuilding-the-forms-ui-v180-28.png?alt=media)

6. Add a Container and nest a Button Control underneath. Rename it to “Submit”.
7. With the button selected, go to the **Actions** tab in the Inspector and add a **Run Data Flow** Action.

![](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-9084f211e3e6d2f65cb7b85073196e5b647e02d4%2Fbuilding-the-forms-ui-v180-29.png?alt=media)

After building the Data Flow, we’ll come back here to tie it.
