# Forms

## Introduction

Using [Form.io](https://form.io/), OE allows you to build highly customizable forms. The platform offers extensive customization options, makes it possible to control various aspects of the form's appearance and behavior. You can streamline the data collection processes by creating forms that perfectly align with your specific needs and guidelines.

The forms page is available in the **Management Dashboard**, under **OE**. On this page you can:

* see all the forms that were created in your tenant
* create a new form
* create a form link
* duplicate a form
* remove a form
* import and export multiple forms

Moreover, you can filter the forms by name, ID, or the language in which they were prepared.

<figure><img src="https://2734760799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8dAaH7DfB59pzZwLxmur%2Fuploads%2Fgit-blob-b6c8acc0904dc761621d9b36ebe3f49141b29741%2Fforms_vs.png?alt=media" alt=""><figcaption></figcaption></figure>

## Prerequisites

To start working with the forms builder, you should get familiar with the basic features and the components that are used there.\
To learn about the solution, see the [Form Building](https://help.form.io/userguide/form-building) documentation.

## Creating a new form

To create a new form:

1. Go to **Management Dashboard** -> **OE** -> **Forms**.
2. In the forms page, choose the **Create Form** button.
3. Add the name for your new form.
4. Choose the components that you want to have in the form. You can select among the [basic](https://help.form.io/userguide/form-building/form-components), [advanced](https://help.form.io/userguide/form-building/advanced-components), [layout](https://help.form.io/userguide/form-building/layout-components) and [data](https://help.form.io/userguide/form-building/data-components) components.

Add the components by using the drag and drop feature, which allows for putting the components at any place, before or after other components.

<figure><img src="https://2734760799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8dAaH7DfB59pzZwLxmur%2Fuploads%2Fgit-blob-7bf86f38418b50bd45c164444ce404c3b8fc4608%2Fforms1.png?alt=media" alt=""><figcaption></figcaption></figure>

For every component that you add, there's a detailed view with the configuration settings for this specific field in the form. You can customize your component with different values, data or conditions.

For more details, see the [Component Settings](https://help.form.io/userguide/form-building/component-settings) documentation.

<figure><img src="https://2734760799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8dAaH7DfB59pzZwLxmur%2Fuploads%2Fgit-blob-f7b46afb037be61a52879153c45037678fae573d%2Fforms2.png?alt=media" alt=""><figcaption></figcaption></figure>

5. To preview the form after you've added all the components, choose the **Preview Form** button.

<figure><img src="https://2734760799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8dAaH7DfB59pzZwLxmur%2Fuploads%2Fgit-blob-a5d2a496bfc818b68314e00d07eb1b9c3893ed04%2Fforms3.png?alt=media" alt="" width="563"><figcaption></figcaption></figure>

6. When your form is ready and you want to save it, choose the **Save Form** button. The form will appear in the forms page list.

### Dynamic data in Forms

Forms can be customized to incorporate dynamic data, allowing for the creation of personalized forms tailored to specific recipients. See the Coffee Preferences example below, to learn how to set up such a form.

1. Go to **Forms** and choose to create a new form.
2. Add a dropdown menu component and call it, for example, Coffee Preferences.
3. In the Coffee Preferences component, go to the **Data** tab select **Custom** as a **Data Source Type**.
4. Add Custom Values, they are needed to return the value options. For example, `values = data._magicLinkCustomAttributes.coffeeType[0].options`.

<figure><img src="https://2734760799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8dAaH7DfB59pzZwLxmur%2Fuploads%2Fgit-blob-920c035ec154012fd088486bcb18176c3d9551de%2Fform_coffee.png?alt=media" alt=""><figcaption></figcaption></figure>

5. Add **Text Field** components that will also work as additional custom attributes to choose in a form. For example, **milk\_type** and **sugar\_amount**.
6. In the **milk\_type** component go to **Data** tab and add a JavaScript code under **Custom Default Value**. For example, `value = data._magicLinkCustomAttributes.defaults[0].milkType`.
7. Save the form.

<figure><img src="https://2734760799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8dAaH7DfB59pzZwLxmur%2Fuploads%2Fgit-blob-9baf1a6b4fd6abf0b94289af745cced22a3c2e55%2Fform_milk_value.png?alt=media" alt="" width="487"><figcaption></figcaption></figure>

After creating the components, you can check the preview of the created form:

<figure><img src="https://2734760799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8dAaH7DfB59pzZwLxmur%2Fuploads%2Fgit-blob-002b6b20754af5509b0a2bbab2d9e8b0069ddb69%2Fform_custom_attributes.png?alt=media" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
Forms are referenced by the [Create Form Magic Link](https://developer.emporix.io/oe/value-streams/working-with-value-streams/oe-make-modules#forms-modules) module that allows you to configure custom form attributes. Using forms builder and the module together you can add dynamic, personalized behavior for each recipient. For more information, see the [Form Builder](https://help.form.io/developers/form-development/form-builder) and [OE Make Modules](https://developer.emporix.io/oe/value-streams/working-with-value-streams/oe-make-modules) documentation.
{% endhint %}

## Editing an existing form

To edit an existing form, click on it in the forms list. The edit mode is opened straight away and you can apply your changes.

If you want to reorder or edit the selected components, you use the inline components settings and adjust the component to your needs.

For more details, see the [Inline Component Settings](https://help.form.io/userguide/form-building/form-builder-ui#inline-component-settings) documentation.

## Duplicating a form

To duplicate an existing form, choose the **Duplicate** icon.

After you duplicate the form, it's added to the forms list and displayed with the suffix "copy" in the name. You can then rename the form.

<figure><img src="https://2734760799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8dAaH7DfB59pzZwLxmur%2Fuploads%2Fgit-blob-ae541323baf30afdeb96dd958a9109dbe86a9165%2Fforms6.png?alt=media" alt="" width="476"><figcaption></figcaption></figure>

## Deleting a form

To delete a form, choose the **Delete** icon for the selected form. You have to confirm the deletion of the form by entering its name in the confirmation window.

<figure><img src="https://2734760799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8dAaH7DfB59pzZwLxmur%2Fuploads%2Fgit-blob-8697b92d951787d31344c37aa4e6637043ef9e8c%2Fforms7.png?alt=media" alt="" width="544"><figcaption></figcaption></figure>

## Multiple forms import and export

The import/export feature makes it easy to move multiple forms from one tenant to another.

To export multiple forms from your tenant:

1. Go to **OE** -> **Forms** and choose **Import/Export** button.
2. Select the forms that you want to export and choose **Download**. This downloads separate files in a JSON format with all the selected forms.

<figure><img src="https://2734760799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8dAaH7DfB59pzZwLxmur%2Fuploads%2Fgit-blob-a649f45736a1b40c0bb65437eee7b624c194f29a%2Fforms_export.png?alt=media" alt="" width="563"><figcaption></figcaption></figure>

3. Go to the tenant where you wish to import the forms. In **OE** -> **Forms** choose **Import/Export** button.
4. Choose import and add the previously downloaded JSON file.
5. Choose **Upload**. This imports all the forms that were previously exported. When the process completes, you get a notification message about successful upload.

<figure><img src="https://2734760799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8dAaH7DfB59pzZwLxmur%2Fuploads%2Fgit-blob-bcdb04e54b4a91a3a5c1352373b7e9074e09dfa7%2Fforms_import.png?alt=media" alt="" width="563"><figcaption></figcaption></figure>

## Forms localization

Forms localization makes it possible to translate your forms from the base language to other languages. You can create forms with multiple languages, with the same structure as in the original language but with corresponding fields translated.

{% hint style="warning" %}
The translations should always be prepared before the link with the form is sent to the contact.
{% endhint %}

1. Go to **OE** -> **Forms**.
2. Open the form that you want to translate.
3. To start the translation, choose the current language that you use and then click on the **Download** button. This downloads `myData.json` file with the names of the fields. you can also use **Download Template**, which downloads a `.json` file without the selected language. For example:

```json
{
  "Text Field": "",
  "Number": "",
  "Password": "",
  "Radio": ""
}
```

4. Open the downloaded `.json` file and enter the translated text.

Example of an English to German translation:

```json
{
  "Text Field": "Textfeld",
  "Number": "Nummer",
  "Password": "Passwort",
  "Radio": "Radio"
}
```

5. Save the file.
6. Choose **Upload Translations** to upload the translated `.json` file back to the form in Management Dashboard.
7. Choose the translation language and add the `.json` file.

<figure><img src="https://2734760799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8dAaH7DfB59pzZwLxmur%2Fuploads%2Fgit-blob-fe0be7e3ac5197acde33fc51ac474d26f05149d6%2Ftranslations.png?alt=media" alt="" width="532"><figcaption></figcaption></figure>

8. Choose **Save**.

**Result**: Your form is now available in two languages: English (in this case it's the default) and German. Both of the versions are visible in the form preview.

When the form is translated, there's a relevant `lang` parameter visible in the URL of the form. The parameter can also be used in configuration of a mail module in a Make scenario responsible for sending the forms.

<figure><img src="https://2734760799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8dAaH7DfB59pzZwLxmur%2Fuploads%2Fgit-blob-b74b0cf2b880ea1ba468f41b4c0b1cd6e86da557%2Flang_param.png?alt=media" alt="" width="545"><figcaption></figcaption></figure>

{% hint style="info" %}
To learn how to send forms submission data to Celonis, see [Sending Form Submission Data from OE to Celonis](https://developer.emporix.io/oe/value-streams/oe-celonis-data-flow/sending-form-submission-data-to-celonis) documentation.
{% endhint %}