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 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 element contained within a Form. We set the form item name to email.

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}.

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.

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

Set Loading: Set loading animation. See Set loading animations.

Visit Interactions for more on events and actions.