> 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="/files/2HR6XAhSuib6HdYimQGa" 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.\
![](/files/8YYhL0FC8CnQ7UFOT7H4)

**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).