> 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="/files/7yflEouu9IS2MmAegFvn" 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="/files/HQdvYRbbsn3RxH3BmP1P" 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="/files/cQM1EqlOqj9igAQuf2Ha" 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 %}