Forms

A value stream may require collecting information from users. Use Form.io to collect data and build customized forms.

Introduction

Using Form.io, Value Stream Modeller allows you to build highly customizable forms. The platform offers extensive customization options and 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.

Forms is available as an extension in Value Stream Modeller. To access it, go to VSM -> Extensions -> Forms. On the forms 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.

Forms is one of the extensions available in VSM. To learn more about how extensions work in Value Stream Modeller, see the Extensions documentation.

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

1

Open Forms

In VSM go to Extensions -> Forms.

2

Create a new form

In the forms page, choose the Create Form button.

3

Add a form name

Add the name for your new form.

4

Add components

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.

5

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

6

Preview the form

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

7

Save the form

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

Create a new form

In VSM go to Extensions -> Forms and choose to create a new form.

2

Add a dropdown component

Add a dropdown menu component and call it, for example, Coffee Preferences.

3

Configure the data source

In the Coffee Preferences component, go to the Data tab and select Custom as a Data Source Type.

4

Add custom values

Add Custom Values, they are needed to return the value options. For example, values = data._magicLinkCustomAttributes.coffeeType[0].options.

5

Add text field components

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

Set a custom default value

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 and preview the form

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 VSM and CE Make Modules documentation.

Editing an existing form

1

Open the form

Click on the form in the forms list. The edit mode is opened straight away and you can apply your changes.

2

Adjust components

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

1

Duplicate the form

Choose the Duplicate icon for the selected form.

2

Rename the form

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

1

Delete the form

Choose the Delete icon for the selected form.

2

Confirm deletion

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.

Export forms

1

Open Import/Export

Go to Management Dashboard -> VSM -> Extensions -> Forms and choose Import/Export button.

2

Download selected forms

Select the forms that you want to export and choose Download. This downloads separate files in a JSON format with all the selected forms.

Import forms

1

Open Import/Export on the target tenant

Go to the tenant where you wish to import the forms. In Management Dashboard -> VSM -> Extensions -> Forms choose Import/Export button.

2

Upload the JSON file

Choose import and add the previously downloaded JSON file.

3

Complete the import

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

Open Forms

Go to Management Dashboard -> VSM -> Extensions -> Forms.

2

Open the form to translate

Open the form that you want to translate.

3

Download the translation template

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": ""
}

4

Add translated text

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

Save the file.

5

Upload translations

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

6

Select the translation language

Choose the translation language and add the .json file.

7

Save the form

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 VSM to Celonis documentation.