Form-Editor

Structured capture and processing of user data via form dialogues

Forms in the AI chatbot collect user data in a structured manner. Forwarding the data collected in this way to the responsible service employees then speeds up the processing of enquiries. Forms are customisable and a prerequisite for transfer to human employees (human takeover). The form editor allows you to create and edit forms, including all conversation steps and links (e.g. webhooks). All entries, including buttons for multiple-choice or other conversational design elements, are stored in context.

1. Functionality
2. Conversational design elements
   2.1 Multiple choice question
   2.2 Free text question
   2.3 Yes/No question
   2.4 Email
   2.5 Conditional switch
   2.6 File upload
   2.7 Text
   2.8 Validatable input
3. Completion
4. Reading mode
5. Sidebar
   5.1 Flow preview
   5.2 Analysis
   5.3 Change log
6. Exporting, importing, moving and copying forms
   6.1 Copy to channel
   6.2 Change channel
   6.3 Export
   6.4 Import
7. Saving, discarding and publishing forms

1. Functionality

The form editor works in the same way as the response editor.

2. Conversational design elements

Conversational design elements include multiple choice questions, free text questions, yes/no questions, email queries, conditional switches, file uploads, simple text entry and validatable types. Below is a step-by-step guide to creating a form and selecting conversational design elements. All elements and their functions are then described.

Create form

1. In the Forms menu item, click on New Form at the top right.
   
2. Give the form a meaningful name in the Name field.
3. Click on Create to generate the form.
   
4. The created form now appears in the form overview.
   
   1. Clicking on the form name opens a sidebar. Here, the form name can be changed via Edit.
   2. Clicking on the pencil icon next to the form name opens the form editor. This is where the form is edited.
      

Selecting conversational design elements

1. After opening the form editor in the form overview using the pencil icon, select the first conversational design element in the green selection field Continue with.
2. Click on the pencil icon to open the Choose next step window. Here, the conversational design element can be selected.
   Important: Only the first five conversational design elements are visible when the window opens. To access the rest, scroll down using the mouse pad/mouse wheel.
   
   

The individual conversational design elements and their ideal areas of application are explained below.

2.1 Multiple choice question

A multiple choice question offers several predefined answer options to choose from. The conversational design element always begins with the actual question. This is inserted in the text field before the quick reply buttons. The possible answers are added as quick reply buttons, with additional buttons being added using the plus symbol.

Quick reply buttons disappear from the chat widget after selection. They redirect to the specific partial answer. As a rule, each quick reply button is followed by its own answer.

By clicking on the 3-dot menu next to the quick reply buttons, you can edit the name of the button and the order in which the buttons appear. It is also possible to delete the response.

Example

Users ask how they can reset their password. As there are several options, they must first be asked where they would like to reset their password.

The follow-up multiple-choice question is therefore: ‘Where would you like to reset your password?’

Quick reply button selection:

1. App
2. Website

The next step depends on the answer you select. If customers click on App, they will be directed to the FAQ section. If they click on Website, they will be asked to enter their email address.

Optional: Customising the section name

The generic name ‘Free-text Question [5]’ for the query step can be customised. This helps with recognising and handling the form steps. Click on the icon next to the name and then on Edit to open the input mask for renaming. Click OK to apply the new name.

2.2 Free text question

The free text question allows any text to be entered. Free text questions are always suitable when variable answers are expected, e.g. names, address details or customer numbers.

Example

Users should enter their name.

Optional: Customising the section name

The generic name ‘Free-text Question [5]’ for the query step can be customised. This helps with recognising and handling the form steps. Click on the icon next to the name and then on Edit to open the input mask for renaming. Click OK to apply the new name.

2.3 Yes/No question

The Yes/No question can be used in the same way as the multiple-choice question, but only has two options, Yes and No, as answer choices.

If users answer the question with free text, e.g. with ‘Yes, please’, this is understood.

Example

In the following example, a query for entering the customer number is implemented. The aim is to assign enquiries to existing customer data or processes. If the Yes option is selected, the customer number is requested. If No is selected, the name is requested instead.

Yes selection

No selection

2.4 Email

Collecting the email address enables subsequent contact with the customer as well as the automated sending of further information. As a rule, requesting the email address is the last step in the form.

A validation is already built into the email template.

• Email OK: Email is valid.
• Not valid: Email is invalid. Here, the process following an invalid email address can be defined.

2.5 Conditional Switch

A conditional switch allows different paths to be selected in forms based on defined conditions. The definition of conditions determines which follow-up questions or actions are triggered in the form.

The decision logic is based on the evaluation of stored values. User entries, context information stored via addContext, and results from webhook queries are compared with the stored values. The comparison is based on defined criteria, e.g. the existence of a value, a check for equality, inequality, greater than or less than a certain value.

Example

2.6 File upload

The file upload function allows files to be uploaded to the AI chatbot. File uploads can include, for example, uploading a document (ID card, receipts, etc.). Permitted file types are defined using the drop-down menu under Permitted file types.

• Supported file formats are: PDF, ZIP, XML, TXT, CSV, MS Word, MS Excel, MS PowerPoint, PNG, JPEG and GIF.

To prevent unusable file types from being uploaded, the selection should be defined here. If an unauthorised file type is uploaded, users will be prompted to upload the file again. Only when the authorised file type has been uploaded can the form be continued.

Example

To process the respective request, it is possible to upload a copy of an identity document (identity card or passport). In the example, only JPEG and PDF document types are permitted.

Link file uploads in forms via email

A link can be included in the form that allows access to uploaded files. This must be activated in advance. Customer Success Management will assist with implementation.

2.7 Text

Simple text entry allows information to be provided without requiring a response from the user. Unlike questions with free text answers, yes/no buttons or multiple-choice selections, only a text block appears here, with no option to respond. The conversational design element Text is selected for this purpose.

Example

Before users are asked a question, basic information, e.g. the form process, should be explained. This is done using text blocks without the need for a response.

2.8 Validatable input

Validatable inputs are pieces of information that are checked against certain conditions. Either the inputs meet the preset conditions (valid) or they do not (invalid). If the input does not meet the conditions, a request for a valid input is issued.

• Validatable types include: email, URL, postcode, number, date, telephone number, vehicle registration number, IBAN, RegExp

A selection of validatable types is provided. Individual extensions with RegExp are possible. The moinAI team will assist with setup.

Example

Validating whether the input is a vehicle registration number or not.

3. Completion

The Completion section defines how a form is completed. Depending on the completion form, the interaction varies after the form is completed. The options Happy Path and Live Chat are available. The two different completion options are described below.

3.1 Happy Path

The Happy Path is used when a form has been successfully completed or a topic has been rated positively.

1. Happy Path is selected by default in the After Completion section.
2. If this is not the case, clicking on the pencil icon next to Completion opens the completion selection.
3. When Happy Path is selected, this follow-up option is applied and played out in the AI chatbot.
   

Example

3.2 Live chat

If the form is used to qualify a complex issue that will ultimately be handled by a human being,  the transition to live chat can be set up. This connects users directly to a service representative. The live chat is linked to the form as follows:

The Happy Path is selected by default in the conclusion section. The conclusion selection opens via the pencil icon.

After selecting Live Chat, the live chat section is added to the form.
The paths for the scenarios Available, Agents are busy and Not available are then defined.
At this point, it is advisable to insert a text element that informs the user that a connection is being established.
In the Send users to agent(s) in group(s) area, you can specify which employee group the live chat request will be forwarded to.

3.3 Email

Alternatively, the automatic sending of an email can be used as a closing option. This is particularly helpful if the live chat is unavailable (path "Not available").

The email query allows you to contact the user at a later date.

Setup is done in two steps:

1. The email query is created in a separate form, as only topics or forms can be selected in the Not available path, but no individual conversational design elements.
2. The automatic email dispatch is set up by moinAI. The Customer Success Management team will be happy to assist you.

4. Reading mode

Read mode allows you to view the form in a continuous flow without edit buttons. Read mode opens by clicking on the glasses icon.

5. Sidebar

The sidebar provides access to Flow Preview, Analysis, and the change log. It opens via the sidebar icon on the right.

5.1 Flow preview

Clicking on the sidebar icon opens the Flow Preview. It provides a compact overview of the form sections.

• In the Flow Preview, the names of the sections can be changed by clicking on the pencil icon.
• You can navigate to the form sections by clicking on the section name. This function is particularly helpful for longer forms.

5.2 Analysis

The analysis is opened via the sidebar icon and then clicking on the line graph icon. The analysis shows the success rate of the form.

• Period: Set the analysis period via Change next to the calendar icon.
• Total success rate: Number and percentage of fully completed forms.
  • Submissions: List of all fully completed forms. Clicking on the rectangle with the arrow opens the complete form. The CSV Download button allows you to download all information as a CSV file.
  
  
  
• Success rates per step: Percentage of information submitted within individual form sections.
  • Leads: Overview of forms with entries in the respective sections. Clicking on the rectangle with arrow icon allows you to view the entire form. The CSV Download button allows you to download all information as a CSV file.

5.3 Change log

The change log can be opened by clicking on the sidebar icon and then on the clock icon. All changes to the form are documented there.

The glasses icon allows you to view previous versions of the form in read-only mode.

You can edit a previous version by using the Exit read view function. Clicking Apply overwrites the current form with the opened version.

• Additional information, such as the person who made the changes, can be viewed by clicking on the Complete overview button.

6. Exporting, importing, moving and copying forms

You can open a form via the Forms menu item and edit it using the pencil icon. The three-dot menu offers the following options: Switch channel, Copy to channel, Export and Import. These functions are described below.

6.1 Copy to channel

The Copy to channel function allows you to copy a form to another channel of the AI chatbot. After selecting the option, a window opens for selecting the target channel. The copy is created by clicking on the Copy button.

Copying a form simplifies the multiple use of identical structures and the reuse of individual form components.

6.2 Change channel

The Change Channel function allows you to move a form from one channel to another. The move takes place immediately after selecting the destination channel.

6.3 Export

The form can be downloaded in JSON format via Export. This function is used to save and reuse form structures externally.

6.4 Import

The Import option allows you to upload a form in JSON format from your local computer to the AI chatbot.

7. Saving, discarding and publishing forms

The form can be saved, discarded and published using the arrow next to the diskette icon.

Clicking on the disk icon itself also saves the form.

• Changes must be confirmed manually using the Save button before they can be published.
• The Publish button can only be clicked after changes have been saved and is otherwise greyed out.

Important: The form will only be used in the live AI chatbot once it has been published.

Recommended procedure:

1. Enter or adjust content and save
2. Click the Preview button.
3. Test the changes you have made in the AI chatbot preview.

Everything perfect? Then click the Publish button and you're good to go! 🚀