The Morf form definition is a text document in standard JSON format. The form definiton must be valid JSON for the Morf rendering engine to parse and render the form. All commas, curly braces, colons and square brackets must be in the correct location.
The form definiton is in 3 sections: config, head, and body. The config section contains configurations that affect the whole form, such as the submission endpoint or theme to style the form. The head section describes the form and contains elements such as the title and logo. The body section contains the field objects and their properties and may also contain organization elements such as panels. The field objects are within the items array. Objects within a panel must also be in an items array.
Below is a collapsed view of the form definition:
{
"config": {
...
},
"head": {
...
},
"body": {
"items": [
...
]
}
}
The tables below describes the valid syntax of the elements of the form definition.
The config section is the first section in the form description.
| Syntax | Description | Format |
|---|---|---|
| submit | Location where form data will be submitted via HTTP post. | URL |
| successUrl | Location where form page will be redirected upon successful submission of form data. | URL |
| sitekey | API authentication key required for form rendering | Unique Key |
| theme | CSS theme for styling the form. | URL of CSS |
| externalId | ID used to identify a form at the author's descretion | Alpha numberic ID |
The second section in the form description is the head section.
| Syntax | Description | Format |
|---|---|---|
| title | Form title, appears centered justified at the top of the form. | Text content |
| logo | Image to appear in top left corner | URL of image file |
The final section in the form description is the body section. Items in the body section are inside the items array. Each item begins with a type which set the type of object and is follow by optional settings which dictate it's behavior.
Form objects are defined by their type property. The table below describes the valid types of form objects.
| Syntax | Description | Notes | Example (copy and paste) |
| Button | Displays a button |
{
"type": "button",
"label": "Button Label"
} |
|
| checkbox | Displays one or more checkboxes in a group | Contains an `options` array to list checkboxes in the group. The `options` array is composed of objects with `label` and `value` properties |
{
"type": "checkbox",
"label": "Select your favorite color(s)",
"bind": "fav_color",
"options": [
{
"label": "Red",
"value": "R"
},
{
"label": "Blue",
"value": "B"
},
{
"label": "Green",
"value": "G"
}
]
} |
| color | Displays a color picker |
{
"type": "color",
"bind": "color_value"
}, | |
| date | Displays a date field with date picker | Allows optional text entry |
{
"type": "date",
"label": "Date",
"bind" : "date_value"
} |
| datetimelocal | Displays a date and time field with date/time picker | Allows optional text entry |
{
"type": "datetimelocal",
"label": "Date and Time",
"bind" : "date_time_value"
} |
| dropdown | Displays a dropdown field with the ability to select an option | Contains an `options` array to dropdown values. The `options` array is composed of objects with `label` and `value` properties |
{
"type": "dropdown",
"label": "What's your favorite color?",
"bind": "fav_color",
"options": [
{
"label": "Red",
"value": "R"
},
{
"label": "Blue",
"value": "B"
},
{
"label": "Green",
"value": "G"
}
]
}, |
| Displays a text field that validates email address format |
{
"type": "email",
"label": "Contact email",
"placeholder": "E.g. [email protected]",
"bind": "contact_email"
} | ||
| file | Displays a file picker object |
{
"type": "file",
"label": "Attach a file",
"bind": "attachment"
} | |
| hidden | Creates a hidden fields | This object can be used to hold values/variables off screen |
{
"type": "hidden",
"bind": "hidden_value"
} |
| month | Displays a month picker | Allows optional text entry |
{
"type": "month",
"label": "Month",
"bind": "month_value"
} |
| number | Displays a field which only allow numberical values |
{
"type": "number",
"label": "Enter a Number between 1 and 5",
"minValue": 1,
"maxValue": 5
} | |
| panel | Display a panel object for grouping objects together |
{
"type": "panel",
"width": "full",
"label": "Contact Information",
"items": [
{
"type": "text",
"label": "Contact Name",
"placeholder": "E.g. Jane Doe",
"bind": "name"
},
{
"type": "email",
"label": "Email",
"placeholder": "E.g. [email protected]",
"bind": "email"
}
]
} | |
| password | Displays a field which masks the characters entered |
{
"type": "password",
"label": "Enter your password",
"bind": "password"
} | |
| paragraph | Displays a static text paragraph |
{
"type": "paragraph",
"label": "The quick brown fox jumps over the lazy dog",
"bind": "para_text"
}, | |
| radio | Displays one or more radio buttons in a group | Contains an `options` array which lists radio buttons in the group. Choices are mutually exclusive. The `options` array is composed of objects with `label` and `value` properties |
{
"type": "radio",
"label": "What's your favorite color?",
"bind": "fav_color",
"options": [
{
"label": "Red",
"value": "R"
},
{
"label": "Blue",
"value": "B"
},
{
"label": "Green",
"value": "G"
}
]
} |
| range | Displays a slider for selecting a range |
{
"type": "range",
"label": "Select Range",
"bind": "range_value",
"maxValue": 5,
"minValue": 1,
"step": 1
} | |
| reset | Displays a button for clearing form data |
{
"type": "reset",
"label": "Clear Data"
} | |
| search | Displays a text field with X for clearing value |
{
"type": "search",
"label": "Search",
"placeholder": "e.g. The quick brown fox",
"bind": "search_value"
} | |
| submit | Displays a button which submits the form data | Data is submitted to the URL in the submit element of the `config` |
{
"type": "submit",
"label": "Submit Form"
} |
| tel | Displays a text field which formats data according to telephone number pattern |
{
"type": "tel",
"label": "Mobile Number",
"placeholder": "e.g. 1-555-555-5555",
"bind" : "mobile_value"
} | |
| text | Displays a text field |
{
"type": "text",
"placeholder" : "e.g. The quick brown fox jumps over the lazy dog",
"label": "Text Field Label",
"bind": "text_field"
} | |
| textarea | Displays a multiline text field |
{
"type": "textarea",
"label": "Describe the issue",
"bind": "issue_desc"
} | |
| time | Displays a time picker |
{
"type": "time",
"label": "Time",
"bind" : "time_value"
} | |
| url | Displays a text field |
{
"type": "url",
"label" : "Please provide your website address",
"placeholder" : "e.g. http://www.aftia.com",
"bind" : "website_value"
} | |
| week | Displays a week picker | Allows optional text entry |
{
"type": "week",
"label": "Pick a Week",
"bind" : "week_value"
} |
All form objects share a common set of properties which modify their behavior.
| Syntax | Description | Notes |
|---|---|---|
| ariaLabel | Provides accessible description of an object | Note: Preview only, not a generally available feature. Overrides use of other properties when read by assistive technology. |
| ariaRole | Provides accessible role for an object | Note: Preview only, not a generally available feature. |
| bind | Provides name and location of where values are written in the JSON data used during submission | Use a valid JSON dot (.) notation to nest bindings within data. Repeatable panels can use the [*] to indicate that the number of instances will be dynamically controlled by the form. E.g. root.repeated[*] where the child panel has min and/or max properties. |
| dataType | Defines the type of data contained in the field. This attribute is used to validate the input | Valid values are alpha, alphaNum, numeric, integer, decimal, email, url. |
| description | Displays a text description of the field object, can be used for instructions | |
| disabled | Specifies if a form object is interactive or read-only | Valid values are true and false. Default: false. |
| id | Used to identify a form object | |
| invalidMessage | A custom validation message to be displayed for invalid fields | |
| label | Displays a label to identify a field | |
| mask | Specifies how data is displayed while a user enters field data | Note: Preview only, not a generally available feature. |
| minLength | Specifies the minimum length of the entered field value | Accepts numerical values |
| maxLength | Specifies the maximum length of the entered field value | Accepts numerical values |
| minValue | Specifies the minimum value of the entered field value | Accepts numerical values |
| maxValue | Specifies the maximum value of the entered field value | Accepts numerical values |
| name | Name of the form object. Will be used as a relative bind path if one is not specified |
Used to refer to a object in rules and logic. |
| placeholder | Specifies text to be displayed in an empty field | Used to prompt user for appropriate input |
| regex | Regular expression | Pattern that must be matched for input validation. Regular expressions follow a standardized format using special characters to denote the pattern. Regular expressions are used by many popular programming languages. Note: Slashes (\) are escape characters in JSON. To use them in your pattern, make sure to include a double escape e.g. (\\) |
| rules | Array of event/rule objects that will be bound to the form element | Note: Preview only, not a generally available feature. |
| required | Specifies if a form object is required or optional | Valid values are true and false. Default: true |
| value | Data value with which will be used to pre-populated the form element | Valid values are alpha numerical. |
| validation | Specifies if the default dataType field validation should be applied. E.g. "type": "email" will automatically validate that the input is a valid email address format. |
Valid values are true and false. Default: true |
| width | Specifies the screen width the form object should occupy given sufficient space | Valid values are full, half, quarter, third |
The panel object groups other form objects together. Form objects in the panel object are listed in the items array much like the body. Panels may be dynamically added or removed. The min and max properites dictate the minimum and maximum number or times the panel may be repeated.
{
"type": "panel",
"label": "panel label",
"name": "mypanel",
"width": "full",
"min": 1,
"max": 3,
"items": [
{
"type": ...
},
{
"type": ...
},
]
}