Forms

A digital process may require collecting information from users. Use Forms.io to collect data and build customized forms.

Introduction

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

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 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, advanced, layout and data 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.

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

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

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

1. Add Text Field components that will also work as additional custom attributes to choose in a form. For example, milk_type and sugar_amount.

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

3. Save the form.

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

Forms are referenced by the Create Form Magic Link 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 and OE Make Modules documentation.

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

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.

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.

1. Go to the tenant where you wish to import the forms. In OE -> Forms choose Import/Export button.

2. Choose import and add the previously downloaded JSON file.

3. Choose Upload. This imports all the forms that were previously exported. When the process completes, you get a notification message about successful upload.

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.

The translations should always be prepared before the link with the form is sent to the contact.

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:

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

1. Open the downloaded .json file and enter the translated text.

Example of an English to German translation:

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

1. Save the file.

2. Choose Upload Translations to upload the translated .json file back to the form in Management Dashboard.

3. Choose the translation language and add the .json file.

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

To learn how to send forms submission data to Celonis, see Sending Form Submission Data from OE to Celonis documentation.