# Form Helper

<figure><img src="/files/5yVumchHxSlmJkBmSzJq" alt="" width="151"><figcaption></figcaption></figure>

## Overview

The Form Helper can be used together with the [**Embed Feature**](/embed-white-label-portal/embed-admin-setup.md) (white label integration portal) to receive custom user input from your users which can then be used in the Embed Flow.

## Actions

The **Form Helper** has only one default action - **Create Form**.\
It has only one field, which is used to create the form using the [**UI Form Schema**](/connectors/building-connectors/building-connector-actions.md#example-of-ui-form-schema-to-display-the-form) that is also used to create the input forms for actions within Locoia.

There you can specify all attributes of the field seen by your users - such as if a field is required, what kind of field it is, etc. Learn how to get started with creating UI Form Schemas on this page:

{% content-ref url="/pages/-McylTXtFk6dgtbr348a" %}
[Building Connector Actions](/connectors/building-connectors/building-connector-actions.md)
{% endcontent-ref %}

## Referencing User Input within Embed Flows

The Form Helper can accept various types of input: **select**, **switch**, and **nested objects**. \
Use regular [**Jinja referencing**](https://docs.locoia.com/connectors/helpers/pages/-Mek0SP78XcK9PoERs--#id-1.-referring-to-previous-steps-and-connectors-in-a-flow) to reference user input within Embed flows. This starts with the Form Helper's reference, followed by referencing the individual fields by their unique reference. Nested properties can also be used.

Example based on the **UI Form Schema** below:`{{ form.contact_info.company }}`\
`{{ form.contact_info.email }}`\
`{{ form.accept_terms }}`

{% code title="Schema" %}

```json
{
   "contact_info":{
      "title":"Contact information",
      "type":"nested_object",
      "children":{
         "company":{
            "type":"text",
            "title":"Company name",
            "required":false
         },
         "email":{
            "title":"E-Mail",
            "type":"select",
            "enum":[
               ""
            ],
            "allowCreate":true,
            "multiple":true,
            "placeholder":"example@example.com",
            "required":true
         }
      }
   },
   "accept_terms":{
      "title":"Accept terms",
      "type":"switch",
      "default":true,
      "info":"please accept terms and conditions",
      "required":true
   }
}
```

{% endcode %}

## Setup Step-by-Step

### 1. Creating a Flow with a Form Helper

A part of the flow could involve reading an export file from an FTP server, for example. The challenge is that each customer's folder name may vary slightly. Thus, the user needs to specify their folder name in the embed setup.

The UI Form Schema in the form helper could in this case be:

{% code title="Schema" %}

```javascript
{
  "folder_name": {
    "title": "Folder Name",
    "type": "text",
    "required": true,
    "placeholder": "external-exports",
    "info": "The folder name used for exporting data"
  }
}
```

{% endcode %}

To reference this field later in the Flow, you need to consider the references assigned to the Form Helper itself—in this case, `ftp_user_details:`

<figure><img src="/files/L0fW0fGPE4jDcfFRpoXL" alt="" width="375"><figcaption></figcaption></figure>

So, you can read the name of the folder entered by user and use it in the next step (here [FTP helper](/connectors/helpers/ftp-client.md) step) `ftp_user_details.folder_name`&#x20;

<figure><img src="/files/4J4RelfixMEbUiCKGwNV" alt=""><figcaption><p>Reference to FTP Helper step examlpe</p></figcaption></figure>

### 2. User input their details

During the Flow setup, your users will now see your form and can use it to fill in their individual details (or in this case have to, as you marked the field as required):&#x20;

<figure><img src="/files/u3v3Z3O7UT7d7RerFSq0" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
The Form Helper Step will always be shown as the last step in the Flow setup.
{% endhint %}

That's it! Now all the created Embed Flows include the user input of your respective end user.


---

# 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.locoia.com/connectors/helpers/form-helper.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.