> For the complete documentation index, see [llms.txt](https://docs.jmapcloud.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.jmapcloud.io/en/jmap-cloud-portal/user-guide-for-jmap-cloud-portal/creating-forms/form-design.md).

# Form Design

Each form is associated with a spatial or non-spatial data source.

Forms are designed using components arranged in simple or complex structures depending on requirements. In most cases, each form component is directly associated with a field or attribute of the data source. The **Label** and **Attachments** components are exceptions, as they are not directly linked to a data source field or attribute.

The form design interface allows you to define both the **content** and the **layout** of components.

The illustration below presents the main sections of the form design interface.

<figure><img src="/files/thgeN4EJO2kR9Z0WfhDy" alt=""><figcaption></figcaption></figure>

<table data-header-hidden><thead><tr><th width="50.3046875" align="center" valign="top">#</th><th valign="top">Description</th></tr></thead><tbody><tr><td align="center" valign="top">1</td><td valign="top"><strong>Components</strong> tab, which lists the components available for addition to the form.</td></tr><tr><td align="center" valign="top">2</td><td valign="top"><a href="/pages/kDUw0THCDPMTRiaffx5Q">Components</a> available for the form.</td></tr><tr><td align="center" valign="top">3</td><td valign="top"><strong>Design</strong> tab, for designing and laying out the form.</td></tr><tr><td align="center" valign="top">4</td><td valign="top">Design tab interface displaying the components added to the form.</td></tr><tr><td align="center" valign="top">5</td><td valign="top">Properties of the component selected in the Design interface.</td></tr><tr><td align="center" valign="top">6</td><td valign="top"><strong>Layout</strong> tab, which presents the available layout options for the form.</td></tr><tr><td align="center" valign="top">7</td><td valign="top"><a href="/pages/p9wsOWW3KBNJWA2jH3yh">Layout</a> options for the form.</td></tr><tr><td align="center" valign="top">8</td><td valign="top"><strong>Preview</strong> tab for viewing a preview of the form.</td></tr><tr><td align="center" valign="top">9</td><td valign="top">Preview tab interface showing the appearance of the form in a JMap NG application.</td></tr></tbody></table>
