> For the complete documentation index, see [llms.txt](https://docs.adapptio.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.adapptio.com/working-with-adapptio/how-to/layouts/grid-form-layout.md).

# Grid Form Layout

The Grid layout is commonly used to make forms, even for canvas fields gathering a lot of different components with fixed positions.

![The new form based on the Grid layout](/files/XGOswkLKyOJczjiUQRhJ)

### What We Are Going to Do

{% tabs %}
{% tab title="Project Structure" %}

* [ ] View\[`gridForm`]
  * [ ] Container\[`cntMain`]
    * [ ] Box\[`gridBox`]
      * [ ] Grid\[`gridForm`]
        * [ ] Container\[`gridHeader`]
          * [ ] Text\[`formName`]
          * [ ] Text\[`subTitle`]
        * [ ] Spacer\[`spacerHeader`]
        * [ ] Options\[`fldGender`]
        * [ ] Text Input\[`inpFirstName`]
        * [ ] Text Input\[`inpSurename`]
        * [ ] Text Input\[`inpEmail`]
        * [ ] Text Input\[`inpOccupation`]
        * [ ] Text Input\[`rngSatisfactionOutput`]
        * [ ] Options\[`optField`]
        * [ ] Range\[`rngSatisfaction`]
        * [ ] Text Area\[`txtMessage`]
        * [ ] Spacer\[`spacerFooter`]
        * [ ] Button\[`btnSendMessage`]
          {% endtab %}

{% tab title="View\[gridForm]" %}
![](/files/i6t3y2VbZ1KRPw9Ha7h6)
{% endtab %}
{% endtabs %}

### 1. Prepare a superior Grid

The list of components can look complicated, but it is easily more than you think. Let's prepare a basic structure with Grid.

1. Create a new **View** and name it `gridForm`.
2. Place a **Container**, name it `cntMain`, and set up properties as follows:
   1. *Horizontal Alignment* -> `Center`; *Vertical Alignment* -> `Middle`; Item Flex -> Stretch
3. Into `cntMain` put a **Box** called it `gridBox`. Its properties are the following:
   1. *Vertical Alignment* -> `Middle`; *Background* -> `#FDFEE2`; *Shadow* -> `Medium`; *Padding* -> `Wide`; *Width* -> `70%`;
   2. Optionally set up *Height* -> `500px` what is handy for working with a Grid at the beginning. You can delete this property at the end of this tutorial.
4. Place a **Grid** into `gridBox` and name it gridForm. Set up its *Item Flex* -> `Stretch` and keep original *Columns* -> `12`.

{% tabs %}
{% tab title="Current View\[gridView]" %}
![](/files/pJsr3UDVj4Ja8UuPUlAL)
{% endtab %}

{% tab title="Current Components\[gridView]" %}
![](/files/KC0EL1txjrvJO2aWvvnR)
{% endtab %}
{% endtabs %}

### 2. Create a Form Header

Playing with design is essential. Building applications is not just about functionality but even also about feeling.

1. Place a **Container** and name it `gridHeader`.
   1. Set up its properties as follows: *Horizontal Alignment* -> `Center`; *Vertical Alignment* -> `Middle`.
   2. *Screen Base Position* -> *X* -> `3`; *Y* -> `3`; *Width* -> `6`; *Height* -> `8`
2. Put **two** **Text** components into the `gridHeader` and name them `formName`; `subTitle`
   1. `forName` properties: *Value* -> "`Adapptio Grid Form`"; *Text Style* -> `Bold`; *Font Size* -> `XXXLarge`
   2. `subTitle` properties: *Value* -> "`Easy, Intuitive and Fast Composition of A Forms`"; *Font Size* -> `Medium`

{% tabs %}
{% tab title="Current View\[gridView]" %}
![](/files/T0GH1wzcSxdLB1svHz5f)
{% endtab %}

{% tab title="Current Components\[gridView]" %}
![](/files/FWeIF1LxIVpLICRs3Q9s)
{% endtab %}
{% endtabs %}

### 3. Placing a Form Components

Place **all forms components** into the `gridForm` following step by step.

1. **Spacer** -> *ID* -> `spacerHeader`; *Foreground* -> `TEXT`; *Height* -> `1px`; *Spacing* -> `Narrow`;
   1. *Screen Base Position* -> *X* -> `1`; *Y* -> `11`; *Width* -> `10`; *Height* -> `1`
2. **Options** -> *ID* -> `fldGender`; Add two *Items* -> `Male` `Female`; *Placeholder* -> "`Gender`";
   1. *Screen Base Position* -> *X* -> `1`; *Y* -> `14`; *Width* -> `2`; *Height* -> `6`
3. **Text Input** -> *ID* -> `inpFirstName`; *Label Value* -> "`First Name`"
   1. *Screen Base Position* -> *X* -> `1`; *Y* -> `20`; *Width* -> `3`; *Height* -> `6`
4. **Text Input** -> *ID* -> `inpSurename`; *Label Value* -> "`Surename`"
   1. *Screen Base Position* -> *X* -> `1`; *Y* -> `27`; *Width* -> `3`; *Height* -> `6`
5. **Text Input** -> *ID* -> `inp`Email; *Label Value* -> "`Email Address`"
   1. *Screen Base Position* -> *X* -> `1`; *Y* -> `34`; *Width* -> `3`; *Height* -> `6`
6. **Text Input** -> *ID* -> `inpOccupation`; *Label Value* -> "`Occupation`"
   1. *Screen Base Position* -> *X* -> `1`; *Y* -> `41`; *Width* -> `3`; *Height* -> `6`
7. **Text Input** -> *ID* -> `inpSatisfactionOutput`; *Value* -> *//\*adding logic in upcoming paragraph*
   1. *Screen Base Position* -> *X* -> `8`; *Y* -> `14`; *Width* -> `3`; *Height* -> `4`
8. **Options** -> *ID* -> `optField`; Add two *Items* -> `I will stay faithful to the Adapptio` `I'm not interested in the product`; *Type* -> `Radio Group`
   1. *Screen Base Position* -> *X* -> `4`; *Y* -> `13`; *Width* -> `4`; *Height* -> `12`
9. **Range** -> *ID* -> `rngSatisfaction`; *Label Value* -> "`Product Satisfaction`"
   1. *Screen Base Position* -> *X* -> `8`; *Y* -> `19`; *Width* -> `3`; *Height* -> `6`
10. **Text Area** -> *ID* -> `txtMessage`; *Placeholder* -> "`Let us know how happy you are with Adapptio`"; *Label Value* -> "`Text Message`"
    1. *Screen Base Position* -> *X* -> `5`; *Y* -> `26`; *Width* -> `6`; *Height* -> `21`
11. **Spacer** -> *ID* -> `spacerFooter`; *Foreground* -> `TEXT`; *Height* -> `1px`; *Spacing* -> `Narrow`;
    1. *Screen Base Position* -> *X* -> `1`; *Y* -> `49`; *Width* -> `10`; *Height* -> `1`
12. **Button** -> *ID* -> `btnSendMessage`; *Value* -> "`Send Message`"
    1. *Screen Base Position* -> *X* -> `9`; *Y* -> `51`; *Width* -> `2`; *Height* -> `4`

### 4. Adding Logic to Range Text Field

Making the `rngSatisfactionOutput` life is realized by referencing values from the existing **Range** component.

1. Set up `rngSatisfactionOutput` *Value* -> ƒx(`"From " + rngSatisfaction.value.from + "% to " + rngSatisfaction.value.to + "%"`)

{% tabs %}
{% tab title="Code Editor\[rngSatisfactionOutput]" %}
![](/files/l0FLrgfQqzMpeMBGXfGC)
{% endtab %}

{% tab title="Data Explorer\[rngSatisfaction]" %}
![](/files/7IKVKkrOl0KvecLbg9YL)
{% endtab %}

{% tab title="rngSatisfactionOutput(ƒx)" %}

```
"From " + rngSatisfaction.value.from + "% to " + rngSatisfaction.value.to + "%"
```

{% endtab %}
{% endtabs %}

### The Conclusion

Creating forms using a grid layout is fast and effective, especially when you are familiar with form components and their properties. Try to make your form with referencing values.