Form Component
Form Component
Use forms when you need to collect information from the user during a chat. Below is a simple example of a form that asks the user for their order ID.
{
"type": "form",
"payload": {
"closeFormMessage": "Ask about something else",
"closeButtonEnabled": true,
"fields": [{
"name": "ordernumber",
"label": "Order Number",
"type": "text",
"placeholder": "r123456789",
"validation": {
"required": {
"value": true,
"message": "required"
},
"pattern": {
"value": "^r[0-9]{9}$",
"message": "Please provide a valid order number"
},
"maxLength": {
"value": 10,
"message": "The order number is too long"
}
}
}]
}
}
Key Features:
- closeFormMessage: A message that appears when the user closes the form, prompting them to ask about something else.
- closeButtonEnabled: Set this to true to allow users to close the form if needed.
- fields: Contains the form fields to collect user input. In this example:
- name: The identifier for the field (in this case, ordernumber).
- label: The label displayed above the input field.
- type: Specifies the input type (e.g., text).
- placeholder: Sample text shown in the field as a guide for the user.
- validation: Ensures the user enters correct information, with the following rules:
- required: Makes the field mandatory.
- pattern: Validates the order number format (e.g., starts with 'r' followed by 9 digits).
- maxLength: Limits the length of the input to 10 characters.
Important Note:
You don't need to set "hideChatInput": true for forms. The chat input is automatically hidden while the form is visible, and will reappear once the form is submitted, so there’s no need to refresh the page.
Updated 9 days ago