# Operating Form Builder

This section offers detailed step-by-step information on utilizing the Form Builder for beginners. Departing from the information provided in this section, you can drive more complex scenarios independently. 

{% hint style="info" %}
This section uses the **MainLevel** map of the **RealityExamples** template, compatible with **Reality Engine version 4.27.** It is the default project that comes with a fresh installation. After launching the Reality Editor, you can create the same project through the **Virtual Studio** template. For more details, visit Reality Starter Projects.
{% endhint %}

{% hint style="info" %}
Please keep that in mind; to see the results of your template Forms, you must use the [Playout](https://zerodensitydocumentation.gitbook.io/docs/realityhub-1.3/realityhub-1.3/playout) module.
{% endhint %}

### Preparing Action <a href="#operatingformbuilder-preparingaction" id="operatingformbuilder-preparingaction"></a>

![Example Node Tree along with the activated APM](https://2088155242-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQK92PsN60xhGnaXpHINP%2Fuploads%2FiAyOXXlBYgFunqmI5s7G%2Fimage.png?alt=media\&token=8c0054f2-0727-4186-a053-e4bdf0a68499)

* Activate the Nodegraph/Actions tab
* Create the [node tree](https://zerodensitydocumentation.gitbook.io/docs/realityhub-1.3/realityhub-1.3/nodegraph-actions/nodegraph/node-structure) as shown in the image above&#x20;
* Activate the [APM](https://zerodensitydocumentation.gitbook.io/docs/realityhub-1.3/realityhub-1.3/nodegraph-actions/nodegraph/advanced-preview-monitor)

<figure><img src="https://2088155242-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQK92PsN60xhGnaXpHINP%2Fuploads%2FCguGIWVpVG8D8yLQy8as%2Fimage.png?alt=media&#x26;token=c2a13777-c829-42b3-b032-9074ebc1179a" alt=""><figcaption></figcaption></figure>

* Activate the Actions tab, click on the <mark style="color:purple;">**`New Action`**</mark> button, rename it if you like
* Select the <mark style="color:yellow;">**`UserTrack_0`**</mark> node, go to its [Properties](https://zerodensitydocumentation.gitbook.io/docs/realityhub-1.3/realityhub-1.3/nodegraph-actions/properties-and-functions) panel, find the <mark style="color:red;">**`UserTransform`**</mark> property under the <mark style="color:blue;">**`Input`**</mark> property group
* Hover your mouse over the <mark style="color:red;">**`UserTransform`**</mark>​ **property circle**, right-click on it, and select the **Timeline**.
* Go to the first frame in the Action Timeline, right-click on the <mark style="color:red;">**`UserTransform`**</mark> property circle, and select the **Add Keyframe**.
* Go to the third second in the **Timeline**, and change the <mark style="color:red;">**`UserTransform`**</mark> property values using the [GamePad](https://zerodensitydocumentation.gitbook.io/docs/realityhub-1.3/realityhub-1.3/nodegraph/node-structure#nodestructure-gamepad) feature.
* Right-click on the circle of the <mark style="color:red;">**`UserTransform`**</mark> property, select the **Get Value** option, then right-click again and this time select the **Add Keyframe**.
* While the second keyframe is selected, go to the **Animation Interpolation**, and change the interpolation type to **EaseInEaseOut.**
* Go to the **Actions Menu** and **Save** it

Your setup must look like in the image above.

Now:

<div align="left"><img src="https://2088155242-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQK92PsN60xhGnaXpHINP%2Fuploads%2FjfIpJ0lqTcE8dBDHG3ow%2Fimage.png?alt=media&#x26;token=ae086ad8-1520-455d-bd0c-2f21371800b7" alt="UserTransform Property Inside the Action Timeline"></div>

* Go to the **Action** tab, click on the **Add** button, create a **New Action**, and rename it if you like
* **Repeat** the same **process** **twice** with **different** <mark style="color:red;">**`UserTransform`**</mark> values

As the image above shows, we have three different **Action** animations (Cam 1, Cam 2, and Cam 3) of the same <mark style="color:red;">**`UserTransform`**</mark>.&#x20;

Now it is time to design our template form via **Form Builder**.&#x20;

### Preparing Template Form  <a href="#operatingformbuilder-preparingtemplateform" id="operatingformbuilder-preparingtemplateform"></a>

<div align="left"><img src="https://2088155242-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQK92PsN60xhGnaXpHINP%2Fuploads%2FBjyu82sxEfc0K6H2eTRV%2Fimage.png?alt=media&#x26;token=d3c5b928-2cdc-4c7a-a764-8779f74bcbac" alt="Template Form"></div>

* Activate the **Form Builder** tab, click on the <mark style="color:purple;">**`New Form`**</mark> button
* Go to the **Components**, expand the **Basic** component group
* Left click and hold your mouse on the **Label** component, drag and drop it into the Form template area
* Click on the **Field** **Settings** icon of the **Label** component. Change the **name** and **color** of it.

<div align="left"><img src="https://2088155242-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQK92PsN60xhGnaXpHINP%2Fuploads%2FRPWQ4TsXCaQSa1AESjsx%2Fimage.png?alt=media&#x26;token=e3a07e61-fd98-41bc-9395-21a04be423d9" alt=""></div>

* Go to the **Cam 1** action in the **Actions** tab; use the previous method and drag and drop the <mark style="color:purple;">**`Play`**</mark> button into the template Form area.
* Repeat the same process for **Cam 2** and **Cam 3**
* Click on the <mark style="color:purple;">**`Save`**</mark> button in the **Form Builder Menu**