# 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](https://docs.servoy.com/guides/develop/application-design/form-containers/form-component#overview)
* [List FormComponent Container](https://docs.servoy.com/guides/develop/application-design/form-containers/list-form-component#overview)

## Get Started

### Creating a Form Component

Here are the steps for creating a Form Component:

1. Open the active solution in [Solution Explorer](https://docs.servoy.com/reference/servoy-developer/solution-explorer/all-solutions/solution)
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="https://3933488479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjpWd52BKwABWxF2lScUK%2Fuploads%2Fgit-blob-ed097a233ccb2a2ff6a8f53f6fb55a5b606aa61d%2Ffc_properties.jpg?alt=media" alt=""><figcaption><p>Form Component - properties</p></figcaption></figure></div>

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