Form view

Request and capture some input from the user. You can send the form data using a GET or POST request.

Parameters

type : "form"
fields : An array of FormField objects. By default, each field will be displayed in a separate row. If you want some fields to be displayed in the same row – put them in a nested array, the available space will be evenly split between them. See examples below for more details.
title : Optional. Title of the form.
submitLabel : Optional. Text label for the submit button.
cancelLabel : Optional. Text label for the cancel button.
method : Optional. "get" or "post" (default). HTTP request method that will be used to submit the form.
error : Optional. The error message to show for the whole form.

Examples

A simple form to order a drinkA form with multiple fields on the same row

Copy

Copied

{
  "view": {
    "type": "form",
    "title": "Order Drink",
    "submitLabel": "Order",
    "fields": [
      {
        "type": "text",
        "id": "name",
        "label": "Your Name"
      },
      {
        "type": "select",
        "id": "drink",
        "label": "Drink",
        "options": [
          "Cappuccino",
          "Latte",
          "Green Tea",
          "Coke"
        ]
      }
    ]
  }
}

Copy

Copied

{
  "view": {
    "type": "form",
    "fields": [
      [
        {
          "type": "text",
          "id": "firstName",
          "label": "First Name"
        },
        {
          "type": "text",
          "id": "lastName",
          "label": "Last Name"
        },
        {
          "type": "toggle",
          "id": "subscribe",
          "label": "Subscribe to Newsletter"
        }
      ],
      {
        "type": "textarea",
        "id": "notes",
        "label": "Notes"
      }
    ]
  }
}

FormField Objects

There are multiple different form field types that allow you to create sophisticated forms, including:

TextField

A plain-text input, similar to the HTML <input/> tag, defines a field where a user can enter free-form data.

Parameters

type : "text"
id : ID of the field. Must be unique in the Form view.
label : Label for the field.
required : Optional, true or false. Whether this field is required.
defaultValue : Optional. The initial text value for this field.
error : Optional. If set, shows an error message under the field.
helpText : Optional. A Markdown text which will be displayed under the field.
placeholder : Optional. Placeholder for this field, displayed inside the field in gray.
multiline : Optional, true or false. Whether the field should be displayed as a large textarea.

Single line text fieldText area field

Copy

Copied

{
  "view": {
    "type": "form",
    "fields": [
      {
        "type": "text",
        "id": "name",
        "label": "Name",
        "required": true,
        "defaultValue": "Steve",
        "placeholder": "Tell us your name"
      }
    ]
  }
}

Copy

Copied

{
  "view": {
    "type": "form",
    "fields": [
      {
        "type": "text",
        "id": "notes",
        "label": "Your Notes",
        "placeholder": "What is on your mind?",
        "multiline": true
      }
    ]
  }
}

ToggleField

Defines a field that allows the user to enable or disable something.

Parameters

type : "toggle"
id : ID of the field. Must be unique in the Form View.
label : Label for the field.
required : Optional, true or false. Whether this field is required.
defaultValue : Optional, true or false. The default value for this field.
error : Optional. If set, shows an error message under the field.
helpText : Optional. A Markdown text which will be displayed under the field.

Copy

Copied

{
  "view": {
    "type": "form",
    "fields": [
      {
        "type": "toggle",
        "id": "subscribe",
        "label": "Subscribe to Newsletter",
        "defaultValue": true
      }
    ]
  }
}

SelectField

Defines a field that allows the user to select one or multiple options.

Parameters

type : "select"
id : ID of the field. Must be unique in the Form View.
label : Label for the field.
options : A list of strings or SelectOption objects that a user can select from.
required : Optional, true or false. Whether this field is required.
defaultValue : Optional. Default value for this field. If the field allows selecting multiple values (see multiple), an array of strings can be provided.
error : Optional. If set, shows an error message under the field.
helpText : Optional. A Markdown text which will be displayed under the field.
multiple : Optional, true or false. Whether the field allow selecting single or multiple options.
placeholder : Optional. Placeholder of the field, shown inside in gray.

SelectionOption Objects

Select field that only lets you pick one optionSelect field with custom optionsSelect field that lets you pick multiple options

Copy

Copied

{
  "view": {
    "type": "form",
    "fields": [
      {
        "type": "select",
        "id": "country",
        "label": "Country of Residence",
        "options": [
          "Ukraine",
          "Spain",
          "Germany"
        ]
      }
    ]
  }
}

Copy

Copied

{
  "view": {
    "type": "form",
    "fields": [
      {
        "type": "select",
        "id": "country",
        "label": "Country of Residence",
        "options": [
          {
            "value": "ukr",
            "label": "Ukraine"
          },
          {
            "value": "s",
            "label": "Spain"
          },
          {
            "value": "g",
            "label": "Germany"
          }
        ]
      }
    ]
  }
}

Copy

Copied

{
  "view": {
    "type": "form",
    "fields": [
      {
        "type": "select",
        "id": "country",
        "label": "Where do you want to travel to?",
        "multiple": true,
        "placeholder": "Select Countries",
        "options": [
          "Ukraine",
          "Spain",
          "Germany"
        ]
      }
    ]
  }
}

DateField

Defines a field which lets the user easily select a date using a calendar.

Parameters

type : "date"
id : ID of the field. Must be unique in the Form View.
label : Label for the field.
required : Optional, true or false. Whether this field is required.
defaultValue : Optional. Default value for this field as a Date string.
error : Optional. If set, shows an error message under the field.
helpText : Optional. A Markdown text which will be displayed under the field.
timeSelect : Optional, true or false (default). Whether the field allows selecting the time too.

Copy

Copied

{
  "view": {
    "type": "form",
    "title": "When is your birthday?",
    "fields": [
      {
        "type": "date",
        "id": "dateOfBirth",
        "label": "Your Date of Birth"
      }
    ]
  }
}