Form-Editor

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. 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. Advanced response formatting via the plus icon
   3.1 Text
   3.2 Image
   3.3 Video
   3.4 Slides
   3.5 Paste
   3.6 Context
   3.7 Webhook
   3.8 Notification
4. Cancellation
5. Completion
6. Reading view
7. Sidebar
   5.1 Flow preview
   5.2 Analysis
   5.3 Change log
8. Further features
   6.1 Copy to channel
   6.2 Switch channel
   6.3 Export
   6.4 Import
9. Save, discard and publish forms
   
   

1. Functionality

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

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.
      

2. Elements

Each form consists of conversational design elements. Those elements include multiple choice questions, free text questions, yes/no questions, email queries, conditional switches, file uploads, simple text entry and validatable input.

Selecting Conversational Design Elements

1. After opening the form editor in the form overview using the pencil icon, select the first element in the green selection field Continue with.
2. Click on the pencil icon to open the Choose next step window. Here, the 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 ‘Multiple Choice Question [2]’ 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. The explanation is described in this chapter.

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

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. The explanation is described in this chapter.

2.4 Email

Collecting email addresses enables us to contact customers at a later date and to send them further information automatically. As a rule, requesting the email address is the final step in the form. A validation check is already built into the email template.

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.

Optional: Customising the section name

The generic name ‘Email [7]’ for the query step can be customised. This helps with recognising and handling the form steps. The explanation is described in this chapter.

Automatic email dispatch

Once an email address has been entered, the automatic email template can be used to trigger an email notification to Hub users’ email addresses or to any other email address of your choice. Please note that the customer’s email address must be entered in the form beforehand so that recipients can reply directly to the enquiry. The process for setting up automatic email dispatch is described in this chapter on notifications.

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

Optional: Customising the section name

The generic name ‘Conditional Switch [5]’ for the query step can be customised. This helps with recognising and handling the form steps. The explanation is described in this chapter.

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 Allowed 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. The Customer Success team will assist with the implementation.

Optional: Customising the section name

The generic name ‘File Upload [8]’ for the query step can be customised. This helps with recognising and handling the form steps. The explanation is described in this chapter.

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.

Optionally, links to external websites can be added via new button. 

 

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.

Optional: Customising the section name

The generic name ‘Text’ for the query step can be customised. This helps with recognising and handling the form steps. The explanation is described in this chapter.

2.8 Validatable input

Validatable inputs, also known as validatable types, are pieces of information that are checked against certain conditions. An input is either valid (meets the conditions) or invalid (does not meet the conditions). If the input does not meet the conditions, the chatbot prompts the user to enter a correct input.

Validatable inputs include: Email, URL, postcode, number, date, telephone number, vehicle registration number, IBAN and RegExp.

The following types have specific definitions:

• Email: This type validates whether the input corresponds to the structural format of an email address (e.g. text@text.domainextension). The syntactic correctness is checked. However, there is no check as to whether the email address actually exists.

• Number: This type refers to a number in the mathematical sense (technical number range) and not to a sequence of numbers of any length. Validation is limited to the range from -9007199254740991 to 9007199254740991.

Country-specific standards apply to the following types:

Input type	Validation	Recommendation in Case of deviations
Telephone number	Supports German numbers (country code +49).	Use of free text for international numbers. Add the note ‘Please enter the area code’.
Postcode	Supports German postcodes (5-digit number combination).	Use of free text for foreign postcode formats.
Date	Supports standard date formats (DD.MM.YYYY).	Use of free text for special date formats.
Vehicle registration number	Supports the German registration number format.	Use of free text if special registration numbers or international formats are to be queried.

• RegExp (Regular Expression): RegExp entries can be added via the hub. They describe a validation as a regular expression. They enable the validation of user-defined formats (e.g. customer numbers with a specific combination of numbers, letters and special characters). The Customer Success team will be happy to assist you with implementation.

Example
Validation of whether the input is an email address or not.

3. Advanced response design using the plus icon

The plus icon within a form step can be used to add further elements, helping to visually structure the conversation with users and optimise the communication of information. These include the Text, Image, Video, Slides, Paste, Context, Webhook and Notification functions.

3.1 Text

This element functions in the same way as the text element in Conversational Design.

3.2 Images

Images are used to illustrate products or supplement instructions. This builds trust and makes complex content easier to understand.

• Example of use: In a transport scenario, the AI chatbot uses the image element to show customers where to find the required booking reference on their ticket when they are making a complaint about a journey ticket. This helps customers provide the correct information straight away without needing to ask for further details.

An image can be selected by uploading a file or by dragging and dropping it directly into the field. To ensure accessibility, meaningful alt text should be entered in the designated field for each image. Clicking Save adds the element to the form section.

Optimal image format

To optimise loading times, we recommend using web-optimised images. Graphics should be uploaded in landscape format (width greater than height) and with a small file size (under 150 kb) (e.g. in .png or .jpg format). An example aspect ratio of 1:2.35 (e.g. 500 x 1175 px) ensures optimal display within the widget.

3.3 Video

Videos work in the same way as image embedding. They are ideal for explaining topics in a dynamic way.

Example of use: In the financial sector, a short explanatory video within a form helps users find the correct place to upload the required documents in an application.

 

Optimal video format

Videos can be added in .mpg or .mov format. Here too, to ensure short loading times in the chat widget, the file size should be kept as small as possible. The maximum file size per video is 100 MB.

3.4 Slides

The Slides option allows you to add multiple images to an interactive image carousel. Unlike the Image option, you can add a title, a description and a link (including a link title) for each individual slide using New button. These slides are permanently embedded in the form design.

• Example of use: A company in the tourism sector uses Slides to present various hotel room categories, including a brief description and a direct link to the booking page, to help users make a decision.

3.5 Paste

This function allows you to copy form elements that have already been created and insert them again at a different location in the form. This saves time when creating complex structures with an identical layout. The Paste button is only available if an element has previously been copied via the three-dot menu. If no copying has taken place yet, the option is automatically greyed out and cannot be selected.

Setup:

1. Select the desired element via the three-dot menu and click Copy.
   

2. In the target section of the form, click on the plus icon to open the element selection.

3. Click on paste to place the element in the new position.

3.6 Context

The Context option allows you to specifically expand the AI chatbot’s knowledge of the current conversation. A context acts like a ‘memory notebook’: The AI chatbot stores specific information about the user or their progress through the form so far. This information can be used later to precisely control the AI chatbot’s behaviour in subsequent conversations.

• Analogy – a hotel reception: If a guest mentions during their first contact that they are vegan, the receptionist notes this down in their notebook. If the guest later asks for a restaurant recommendation, the receptionist is immediately aware of this and suggests only vegan options, without the guest having to mention it again. Context works in exactly the same way within the form: it remembers important information so that the AI chatbot can ‘think along’ later on.

3.7 Webhook

Webhooks enable real-time communication between different applications. In the context of moinAI, this means that data collected during the chat can be transmitted to an external system, or information can be retrieved from there to be displayed to users directly within the chat widget. This allows enquiries about order status or data (e.g. meter readings) to be sent.

When a webhook is selected, it is embedded in the relevant part of the form and put into use. Further information on webhooks and how to set them up is provided in this article.

 

3.8 Notification

The Notification option allows you to use the automatic email template to trigger an email notification to users in the Hub or to any other email address of your choice. Please note that the customer’s email address must be entered in the form beforehand so that recipients can reply directly to the enquiry.

In the email template settings, you can specify whether the notification should include a button for a direct reply (e.g. a ‘Reply’ button). You can also configure further specific settings for the layout of the email.

Setup

1. After the Completion section, click on the plus icon in the middle.
   

2. The email template will then open, in which the following fields are defined:

   • Recipient emails: These can be both Hub users and external email addresses.

   • Email subject: Used for all emails sent via this form.

   • Sender name: Here, Handlebars (dynamic placeholders) can be used to automatically insert the sender name requested earlier. Alternatively, a generic term such as ‘customer’ can be used.

   • Email language: Select the language of the automatically sent email. This does not affect the content of the customer’s entered data.
     

3. By toggling the relevant switch, additional email options can be added to the automated email template:

   • Answer: A ‘Reply’ button is displayed in the email to allow recipients to quickly compose a reply.

   • To conversation: The email contains a button that redirects recipients directly to the full conversation. This helps them to better understand the context of the enquiry.

   • Recent history: Includes the last 100 messages from the conversation directly within the email.

4. Clicking the Preview button allows you to view a sample email template based on the settings.

5. The Send test to me button allows you to test the email delivery in practice.

 

3. Cancellation

The cancel function allows users to terminate a running form dialogue prematurely. This can be done either automatically by the system or through manual configuration.

3.1 Automatic cancel option

In certain query steps, the AI chatbot automatically displays a cancel option to prevent dead ends in the dialogue:

• Validation steps: For elements such as email or validatable input (e.g. telephone number), the question is repeated if the input is incorrect. In this case, a cancel button is also offered.

• Multiple choice & yes/no questions: If users do not use the provided buttons but send a text message instead, the question is repeated with the options and an additional cancel button.

• Deactivated input field: If the text input field for multiple choice or yes/no questions is globally deactivated for the AI chatbot, the cancel button is displayed directly for these questions.

3.2 Manual cancel option

In addition to the automatic option, an individual cancel path can be incorporated into each form step. This is particularly useful for offering users maximum flexibility.

1. Within a multiple-choice question, a quick reply button labelled ‘Cancel’ (or similar) is created.

2. The Text element is selected as the next step for this button.

3. The Exit form checkbox is activated in this text block area.

4. The Continue with option selects an empty form without a defined endpoint.

This configuration triggers the chatbot's happy path immediately after clicking the manual cancel button.

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

4.1 Happy Path

The Happy Path is used when a form has been successfully completed or a topic has been rated positively. Happy Path is selected by default in the After Completion section.

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

Details on setting up and editing the Happy Path are described in this article.

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

1. The Happy Path is selected by default in the completion section. The completion selection opens via the pencil icon.
   
   
2. After selecting Live Chat, the live chat section is added to the form.
3. The paths for the scenarios Available, Agents are busy and Not available are then defined.
4. At this point, it is advisable to insert a text element that informs the user that a connection is being established.
5. 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.
   
   

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 team will be happy to assist you.

5. Reading View

Reading mode allows you to view the form in a continuous flow without edit buttons. The mode is entered by clicking on the glasses icon and exited by clicking the Exit reading view button.

6. Sidebar

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

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

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

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

7. Further features

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: Copy to channel, Switch channel, Export and Import.

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

7.2 Switch channel

The Switch Channel function allows you to move a form from one channel to another. Attention: The move takes place immediately after clicking choose channel and selecting the destination. The change can be reversed in the same way.

7.3 Export

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

7.4 Import

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

8. Save, discard and publish 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 Deploy button to publish the content 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 them.
2. Click the Preview button.
3. Test the changes you have made in the preview.

Everything perfect? Then click the Deploy button and you are good to go! 🚀