# Form field

<!-- WARNING: THIS FILE WAS AUTOGENERATED! DO NOT EDIT! -->

The `fields` message type displays form fields that you can edit or use to display with a label and value. This message type also supports [Markdown and @mentions](/docs/chat/customizing-messages/message-with-markdown).

-   To add a default value for a form field, set a value for the `"value"` key. Or pass in a space to make it blank. For example: `"value": " "`.
-   To allow editing, add the `"editable": true` key value. To enable read only, set it to `false`.
-   If two sequential key/value pairs have the `short` style set to `true`, then clients can display both pairs side-by-side in two columns.
    -   macOS and Windows clients always displays the pairs side-by-side, even if they need line breaks.
    -   Android and iOS clients always display short fields in two columns if the keys and values do not require line breaks. If the keys or values require line breaks, a mobile client may display the fields as stacked.

## Example

![Example](/img/1560532168172.png)

## JSON example

```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
                }
            ]
        }
    ]
}
```

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

```json
{
    "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"
    }
}
```