A form node enables to capture user inputs on which the flow of the chatbot depends on.
A from node can be added to the chatbot from the 'Extension' section of the flow builder A simple form node has many options to choose from to display messages to the user like Text, PDF, GIF rich Text etc.,
Once the option is choose, click on 'save flow' to go ahead and save the changes.
Once the option to display messages is chose and output is selected, ex text an option to create form is visible in the same panel, where you have to create a form for the user to provide details, which should look like this.
Upon clicking on create form details, a window pops up where you can select the type of the form to be displayed to the user for the user inputs.
Note: The down arrow next to Create form gives two options whether to create a new form or use an existing one.
From the above screenshot, you can see the types of forms available on the left side panel and upon dragging and dropping one, we select the type of form to be displayed for the user input. Here i have selected text field under the 'basic' tab and gave email id as the header title.
This is what a basic form with text field should look like.
The Advanced Tab has predefined form types like Number, Password and File types, which will be used to validate if the correct input is being given or not.
For example, a number field is selected and if the user tries to enter a letter/word instead of a number, it won't accept any other data type other than a number.
From Settings:
The form settings page lets you select and manage multiple things like the input and output handling, CSS.
Input Handling:
Inout Handling has an option, a checkbox which is used to Initialize form data upon checking which, a text box is enabled.
Output Handling:
Output handling tabs allows you to choose between the two Output Handling Types
a) Capture Form Data
b) Capture Clicked Button
Upon choosing Capture Clicked Button, it lets you add a Button Capture filed name and click on submit to save the changes.
CSS:
The CSS tab allows you to select the check box 'Use Custom CSS' where you can use the custom CSS in the editor which gets enabled upon selecting the checkbox. Click on submit to save the changes.