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


---

# 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.acho.io/app-builder/app-construction/elements/form-elements/form.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.