> 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="https://3291879974-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9n1KCuTyIKwSpZcPcC6l%2Fuploads%2FZKSlN2zCOcRx5D8Va8a1%2Fclip012EN.png?alt=media&amp;token=8f6310d5-8320-43af-93a7-d59ff8af35ee" 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="/en/jmap-cloud-portal/user-guide-for-jmap-cloud-portal/creating-forms/form-design/form-components.md">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="/en/jmap-cloud-portal/user-guide-for-jmap-cloud-portal/creating-forms/form-design/form-layout.md">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>
