# 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 %}


---

# 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/custom-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.