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.