---
title: Forms
slug: docs/forms
docTags: 
createdAt: 2025-07-23T17:08:39.195Z
---

The **Live Demos** application allows you to create forms of various complexity and use the data entered by the user to send events to the platform.

# Composition of forms

All the form-related components can be found in the **Form** section of the ***New Module* dialog**.

::Image[]{src="https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/l-QX_ljCYGehRxuj-GmBg_image.png" size="40" width="608" height="727" position="center" darkWidth="608" darkHeight="727" showCaption="false"}

The most important rule of forms composition is that **each form you create has to be wrapped in the *****Form***** component**. The other form-related components - such as *Text Field, Dropdown etc.* - will not work standalone. The ***Form*** component is a container that can be styled as any other component, but most importantly it acts as a store of the data inputted inside of it. An exemplary good composition of the form could look as follows:

::Image[]{src="https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/D25AJsXux55voyH08ew7T_image.png" size="56" width="868" height="1089" position="center" caption="Pro tip: As you can see, you can also include other UI components (such as Title) inside the Form container" darkWidth="868" darkHeight="1089" showCaption="true"}

# Data handling in forms

There are several settings related to data handling. Those settings are split between the wrapping *Form* component and separate input components (such as *Text Field* etc.)

On a* Form* level you can configure:

- an **event type** to be sent on submit
- a **webhook URL** send a request to on submit

On a input component level you can configure:

- a **path** where the data for that component should reside inside the form context
- a **default value** for that input component
- whether an attempt should be made to **prefill** the form with data from the profile entity
  - if both default value and prefill are enabled, the application will first try to prefill the data and if it fails, it will fallback to the default value

# Multi-step forms

The application provides support for multi-step forms with very little configuration. You can now easily set your project up to split your forms into multiple screens.

Below are the steps you need to take to make it happen:

1. Follow the same **[form composition rules](https://dsn.adobe.com/docs/forms#vPB4R)** as described above. Each screen which you want to be part of your multi-step form process needs to have a ***Form*** component present in which your form inputs will reside.
2. Set up the relationship between the steps of the form:
   1. Set the same unique **Form ID** on each step of the multi-step form (so as a property of each *Form* component across different screens)
   2. Set up the navigation by setting the **Navigate on submit** property of each *Form* component (your step 1 *Form* should navigate to a screen where step 2 *Form* is present etc.)
3. Configure the details of event sending:
   1. If you want to send an event only after the last step is completed, enable the **Ignore event sending** property on all the steps that are not the last step.
   2. If you want some step to send the partial data, disable the **Ignore event sending** property in a respective *Form* component
4. Set up form data reset as you wish.
   1. By default the data in forms that have their own Form IDs is preserved between submissions. That means that if you want to fill out the form again and clear the previous data, you need to **enable the "Overwrite form data on submit" property on the first step of your form**. This way you will make sure that once someone fills out the first step of the form again, the previous data will be cleared out.

::Image[]{src="https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/dT-QVmAagsiA9I1wcuBz8_image.png" size="46" width="554" height="517" position="center" showCaption="false"}