# 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](https://docs.acho.io/app-builder/popular-use-cases/use-custom-form-container-to-collect-user-inputs "mention") 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](https://docs.acho.io/app-builder/app-construction/elements/form-elements/input "mention") 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&#x26;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&#x26;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&#x26;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](https://docs.acho.io/app-builder/app-construction/elements/form-check "mention") 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](https://docs.acho.io/app-builder/app-construction/data-store "mention").

**Set Loading:** Set loading animation. See [set-loading-animations](https://docs.acho.io/app-builder/popular-use-cases/set-loading-animations "mention").

{% hint style="info" %}
Visit [interactions](https://docs.acho.io/app-builder/app-construction/interactions "mention") for more on events and actions.
{% endhint %}