Message with Form Field

New: This message type now supports Markdown and @mentions!

The message of type fields displays form fields that can be edited or used to display with a label and value.

To add a default value for a form field, set a value for the "value" key. Or you can pass in a space to make it blank "value": " "

Add the "editable": true key value to allow editing or set it to false to enable read only.

If two sequential key/value pairs have the short style set to true, then clients may display both pairs side-by-side, in two columns. Windows and Mac clients always displays the pairs side-by-side, even if line breaks are needed. iOS and Android clients will always display short fields in two columns if the keys and values do not require line breaks. If the keys or values require a line break, a mobile client may display the fields as stacked.

To see the style options reference the

Full JSON Schemabelow.

To see the functionality reference the

Functionality Sectionbelow.

Example

Example

Example’s JSON

{
  "head": {
    "text": "I am a header",
    "sub_head": {
      "text": "I am a sub header"
    }
  },
  "body": [
    {
      "type": "fields",
      "items": [
        {
          "key": "Name",
          "value": " ",
          "editable": true
        },
        {
          "key": "Title",
          "value": " ",
          "editable": true
        },
        {
          "key": "Company",
          "value": "Zoom",
          "editable": false
        }
      ]
    }
  ]
}

Full JSON Schema

{
  "type": "object",
  "properties": {
    "head": {
      "type": "object",
      "required": ["text"],
      "properties": {
        "text": {
          "type": "string"
        },
        "style": {
          "type": "object",
          "properties": {
            "color": {
              "type": "string",
              "format": "Hex"
            },
            "bold": {
              "type": "boolean"
            },
            "italic": {
              "type": "boolean"
            }
          }
        },
        "sub_head": {
          "type": "object",
          "required": ["text"],
          "properties": {
            "text": {
              "type": "string"
            },
            "style": {
              "type": "object",
              "properties": {
                "color": {
                  "type": "string",
                  "format": "Hex"
                },
                "bold": {
                  "type": "boolean"
                },
                "italic": {
                  "type": "boolean"
                }
              }
            }
          }
        }
      }
    },
    "body": {
      "type": "array",
      "items": {
        "type": "object",
        "required": ["type", "items"],
        "properties": {
          "type": {
            "type": "string",
            "enum": ["fields"]
          },
          "items": {
            "type": "array",
            "items": {
              "type": "object",
              "required": ["key", "value"],
              "properties": {
                "key": {
                  "type": "string"
                },
                "value": {
                  "type": "string"
                },
                "short": {
                  "type": "boolean"
                },
                "style": {
                  "type": "object",
                  "properties": {
                    "color": {
                      "type": "string",
                      "format": "Hex"
                    },
                    "bold": {
                      "type": "boolean"
                    },
                    "italic": {
                      "type": "boolean"
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

Functionality

User Actions

When a user fills out a form field, a POST request with data about the form field is sent to the Bot Endpoint URL you specified in your apps dashboard. Here is an example request body.

{
  "event": "interactive_message_fields_editable",
  "payload": {
    "accountId": "gVcjZnWWRLWvv_GtyGuaxg",
    "channelName": "Tommy Gaessler",
    "fieldEditItem": {
      "currentValue": "",
      "key": "Title",
      "newValue": "Developer Advocate"
    },
    "messageId": "20190618205323327_EZjIqCQ_aw1",
    "original": {
      "head": {
        "sub_head": {
          "text": "I am a sub header"
        },
        "text": "I am a header"
      },
      "body": [
        {
          "type": "fields",
          "items": [
            {
              "editable": true,
              "value": " ",
              "key": "Name"
            },
            {
              "editable": true,
              "value": " ",
              "key": "Title"
            },
            {
              "editable": false,
              "value": "Zoom",
              "key": "Company"
            }
          ]
        }
      ]
    },
    "robotJid": "v1m0yn1imztuogsxjje8fdew@xmpp.zoom.us",
    "timestamp": 1560891222018,
    "toJid": "kdykjnimt4kpd8kkdqt9fq@xmpp.zoom.us/robot_v1m0yn1imztuogsxjje8fdew@xmpp.zoom.us",
    "userId": "KdYKjnimT4KPd8KKdQt9FQ",
    "userJid": "kdykjnimt4kpd8kkdqt9fq@xmpp.zoom.us",
    "userName": "Tommy Gaessler"
  }
}

For more information, see the Form Field Webhook Reference.

Need help?

If you're looking for help, try Developer Support or our Developer Forum. Priority support is also available with Premier Developer Support plans.