> 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/custom-form.md).

# Custom Form

A custom form collects input values from other form elements that can be used to create interactions.

See [Use Custom Form Container to collect user inputs](/app-builder/popular-use-cases/use-custom-form-container-to-collect-user-inputs.md) for details.

## Configuring the setup

The key is to define the name (form item name) of the value for **inner elements under the form**. This example is an [Input](/app-builder/app-construction/elements/form-elements/input.md) element contained within a Form. We set the form item name to `email`.

<figure><img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FTMSE7BtJ9XKzswm8Idhe%2Fimage.png?alt=media&amp;token=f3f702aa-c0e2-47bb-9b5d-abefbcbe187a" alt=""><figcaption></figcaption></figure>

## Accessor for form items

When we set up an interaction on the form, we’ll be able to access its item value using `${form.form_item_name}`. In this example, `${form.email}`.

<figure><img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FoGBQ3ZI0z29XO0M13DGi%2Fimage.png?alt=media&amp;token=f3d98867-a4e8-49d5-a2c6-a9e84664f77a" alt=""><figcaption></figcaption></figure>

## Submitting a form

A form has a supported submit event. However, the submission needs to be triggered by another element.

A form is often used in conjunction with a button, which can trigger a form submit action.

<figure><img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FkJzJIVDPRel2Wz1NKO1Z%2Fimage.png?alt=media&amp;token=253edbc6-3201-41e8-8de3-acd6ed456a7a" alt=""><figcaption></figcaption></figure>

## Supported Events

**Submit:** Triggered when the form is submitted.

* An interaction on another element will need to be set up to submit the form. The action should be Element → Form → Submit form.

**Form Invalidate:** Triggered when **Form Check** fails. Refer to [Form Check](/app-builder/app-construction/elements/form-check.md) for details.

## Supported Actions

**Set form item value:** Set the value of one of the form's items.

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

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

{% hint style="info" %}
Visit [Interactions](/app-builder/app-construction/interactions.md) for more on events and actions.
{% endhint %}