# Form Components

## Overview

Form Component in the Solution Explorer Tree is a special contained form used for simplified design and runtime optimization. The same behavior can be achieved via tabless tabpanel, but form component has optimized display because all elements are part of the same form, taking away the overhead of tabpanel and loading of another form.

{% hint style="warning" %}
A **Form Component** form can't have its own logic (.js file), it is also not available at runtime under `forms.xxx` because there is no instance of such a form. Only the template and its properties are used, events like `onclick` of a button can be assigned but only to scopes or entity methods (if the datasource is specified). Also because it does not have its own instance at runtime also all the form component events and commands like `onLoad` are not available for it.
{% endhint %}

Such a **Form Component** form can be places on the form by using the following containers:

* [FormComponentContainer](/guides/develop/application-design/forms/form-containers/form-component.md#overview)
* [List FormComponent Container](/guides/develop/application-design/forms/form-containers/list-form-component.md#overview)

## Get Started

### Creating a Form Component

Here are the steps for creating a Form Component:

1. Open the active solution in [Solution Explorer](/reference/servoy-developer/solution-explorer/all-solutions/solution.md)
2. Find the **Form Components** node, right click on it and select 'Create new form component', then 'New Form Component' wizard will appear
3. In the wizard you need to set the `Form name` and select the `Type`, also `Datasource` and `Extends` if needed, then click the `Finish` button
4. The form editor will appear, where you can add the desired elements

{% hint style="info" %}
It is recommended to set a specific `name` in the **Form Component** properties in order to make it easier to use it later in scripting.\
Example: `"fc_orders"`.
{% endhint %}

### Editing a Form Component

<div align="center"><figure><img src="/files/7ghCfBU8CvjzHPe0vu5J" alt=""><figcaption><p>Form Component - properties</p></figcaption></figure></div>

**Form Component** has a list of several [properties](/reference/servoycore/object-model/solution/form-component.md#property-summary) that can be edited the same way as for a normal Form.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.servoy.com/guides/develop/application-design/forms/form-components.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.