# Form Component
## Overview
The "Form Component Container" component shows one [Form Component](/guides/develop/application-design/forms/form-components.md#form-components) inside it. It has no additional UI decorations.
The contained form component can optionally show related data.
It is suited for use in both Advanced (Responsive) and Simple CSS forms.
{% hint style="warning" %}
Form Components are an advanced feature. Please first see other [Form Container](/guides/develop/application-design/forms/form-containers.md#types-of-form-containers) types to explore options for nesting forms within forms.
{% endhint %}
## Get Started
Form Component
### Placing a container on the form
Create Form Component Container
Here are the steps for placing a container on the form:
1. Open the [Form Editor](/reference/servoy-developer/object-editors/form-editor.md) of the form where you need to place an **Form Component Container**
2. Find **FormComponentContainer** in *Form Containers* section in the components' pallet
3. Drag and drop the **FormComponentContainer** component in the desired place of the form
4. Select the [`containedForm`](/reference/servoyextensions/ui-components/form-containers/form-component-container.md#containedform) property, where you set the name of the form component you want to be displayed in the container
5. Edit the elements of the contained Form Component, when it's necessary
6. Edit other [**FormComponentContainer** properties](/reference/servoyextensions/ui-components/form-containers/form-component-container.md#properties) if needed
Editing the elements of a contained Form Component
{% hint style="info" %}
It is recommended to set a specific `name` in the **Form Component Container** properties in order to make it easier to use it later in scripting.\
Example: `fc_id_name_details`.
{% endhint %}
## Working with the Form Component instance
### Connecting event bindings
Because a Form Component form doesn't have its own logic (.js file), events like `onAction` of a button must be assigned to the form.js file of the containing form, or to top-level scopes or entity methods.
Example:
assign event for a form component's button
You can add logic for a button created in a Form Component form (placed in a Form Component Container) by accessing that button in the main form and assign the button events to the main form's scope (.js file):
```javascript
/**
* Fired when the button is clicked.
*
* @param {JSEvent} event
*
* @private
*
* @properties={typeid:24,uuid:"28F80574-DBD2-4631-89F1-090CB57049DB"}
*/
function onAction(event) {
var record = foundset.getSelectedRecord()
forms.customers.controller.loadRecords(record.foundset);
application.showForm('customers');
}
```
### Programmatic interaction with elements
Elements of a Form Component can be accessed in the main form where its Form Component Container is placed, using the following convention:
`elements.my_form_component.containedForm.my_sub_element.property`
Example:
```javascript
/**
* Callback method for when form is shown.
*
* @param {Boolean} firstShow form is shown first time after load
* @param {JSEvent} event the event that triggered the action
*
* @private
*
* @properties={typeid:24,uuid:"476A4F16-1F03-400A-B89C-7CE92E01B443"}
*/
function onShow(firstShow, event) {
elements.fc_id_name_details.containedForm.label.visible = false;
//fc_id_name_details = the name of the Form Component Container
}
```
---
# 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-containers/form-component.md?ask=
```
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.