> For the complete documentation index, see [llms.txt](https://docs.acho.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.acho.io/app-builder/app-construction/elements/form-elements/form.md).

# Form

A form collects input values from form item elements, serving as filters, data entry, and more. It allows user to submit a series of input value on one click, and triggered other interactions with the gathered user input.

## Add Form elements in Form

<div align="left"><figure><img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FlJa5NsyY53Oihm58l6xj%2FScreen%20Shot%202023-11-28%20at%206.25.12%20PM.jpg?alt=media&amp;token=d6265b99-9768-4fc8-978e-5e19bbc1ba06" alt="" width="375"><figcaption></figcaption></figure></div>

Click **Add an item** to add a form element and configure it. It's crucial to define the **Form field name** for the form element. The input for each form element will become a property in the return object when the form is submitted, with the **Form field name** serving as the corresponding key.

{% hint style="info" %}
If there is a conflict with the **Form field name** (the key), only the first form element will function as expected.
{% endhint %}

## Property

**Form elements**: The form element items in the Form.&#x20;

**Default form value**: The object used to the default value for forms.

**Submitting**: Toggle on to start submitting animation. This can be used with Action **Change Submitting Status** to prevent duplicate submissions.

**Disabled**: Toggle on to prevent all form elements to be edit.

## Supported Event

**Submit**: This event is triggered when the form is submitted. There are two ways to trigger the submit event:

1. When a user clicks the built-in **Submit** button.
2. When an interaction on another element is set up to submit the form. To do this, a **Submit form** action should be configured on the element.

Either way, the form elements input value will be collected, and can be utilized as <mark style="color:red;">`${event.form}`</mark> as an object in the following actions.

**Reset**: This event is triggered when the form is reset.

**Form Value Change**: This event is triggered when users edit the values of form elements.

## Supported Actions

**Submit form:** Submit the form (trigger its Submit event).

**Change Submitting Status:** Start or end submitting animation. This can be used to prevent duplicate submissions.\
![](https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2Fkynw773bay952I2UYt89%2Fimage.png?alt=media\&token=348ed3e7-252f-41db-98ec-061600e794df)

**Set form value:** Set the value of form object.

**Set form item value:** Assign a value to a specific item within the form. This feature allows you to modify the value of individual form elements. The **Field** parameter corresponds to the **Form field name** of the target form element.

**Reset form:** Reset form item values.

**Set Data:** Change element data. See [Data Store](/app-builder/app-construction/data-store.md).

**Set Loading:** Set loading animation. See [Set loading animations](/app-builder/popular-use-cases/set-loading-animations.md).