Form Message

Updated on 05 Jun 2024
7 Minutes to read
Contributors

Print
Share
Dark
Light
PDF

Article summary

Did you find this summary helpful?

Thank you for your feedback

Overview

With Form Message, you can create rich, multi-page interactive flows for users on iOS and iPadOS devices using a single JSON payload.

For more information on Rich Link, go to the official documentation of Apple Messages for Business: Form Message.

Example

Below, you can see the abcForm task reference in the Attachments State Diagram.

   {
    "abc": {
        "type": "form",
        "interactiveData": {
            "bid": "com.apple.messages.MSMessageExtensionBalloonPlugin:0000000000:com.apple.icloud.apps.messages.business.extension",
            "data": {
                "version": "1.0",
                "requestIdentifier": "{{id}}",
                "dynamic": {
                    "version": "1.1",
                    "template": "form",
                    "data": {
                            "splash": {
                            "header": "Messages for Business Form Demo",
                            "splashtext": "Check out the types of pages available",
                            "buttonTitle": "Continue",
                            "imageIdentifier": "2"
                        },
                        "startPageIdentifier": "001",
                        "showSummary": true,
                        "pages": [
                              {
                                "pageIdentifier": "001",
                                "type": "select",
                                "title": "Please Choose One Selection To Move On To The Next Page",
                                "subtitle": "Single Select Page",
                                "multipleSelection": true,
                                "items": [
                                    {
                                        "title": "Single 1",
                                        "imageIdentifier": "2",
                                        "value": "option01",
                                        "identifier": "001_01",
                                        "nextPageIdentifier": "002"
                                    },
                                    {
                                        "title": "Single 2",
                                        "imageIdentifier": "2",
                                        "value": "option02",
                                        "identifier": "001_02",
                                        "nextPageIdentifier": "002"
                                    },
                                    {
                                        "title": "Single 3",
                                        "value": "option03",
                                        "imageIdentifier": "2",
                                        "identifier": "001_03",
                                        "nextPageIdentifier": "002"
                                    },
                                    {
                                        "title": "Single 4",
                                        "value": "option04",
                                        "imageIdentifier": "2",
                                        "identifier": "001_04",
                                        "nextPageIdentifier": "002"
                                    },
                                    {
                                        "title": "Single 5",
                                        "value": "option01",
                                        "imageIdentifier": "2",
                                        "identifier": "001_05",
                                        "nextPageIdentifier": "002"
                                    }
                                ]
                            },
                            
		{
                                "pageIdentifier": "002",
                                "title": "Select All That Apply",
                                "subtitle": "Multiple Selection",
                                "type": "select",
                                "multipleSelection": true,
                                "nextPageIdentifier": "003",
                                "items": [
                                    {
                                        "title": "Multi 1",
                                        "value": "multi1",
                                        "identifier": "002_01"
                                    },
                                    {
                                        "title": "Multi 2",
                                        "value": "multi2",
                                        "identifier": "002_02"
                                    },
                                    {
                                        "title": "Multi 3",
                                        "value": "multi3",
                                        "identifier": "002_03"
                                    },
                                    {
                                        "title": "Multi 4",
                                        "value": "multi4",
                                        "identifier": "002_04"
                                    },
                                    {
                                        "title": "Multi 5",
                                        "value": "multi5",
                                        "identifier": "002_05"
                                    }
                                ]
                            },
                            {
                                "pageIdentifier": "003",
                                "title": "Date Picker With Min/Max Date and Label Text",
                                "subtitle": "Date Picker",
                                "type": "datePicker",
                                "options": {
                                    "minimumDate": "01/01/1970",
                                    "maximumDate": "01/01/2050",
                                    "labelText": "Select Date:"
                                
		},
                                "nextPageIdentifier": "004"
                            },
                            {
                                "pageIdentifier": "004",
                                "title": "With Custom Label, Prefix, Regex and Placeholder Text",
                                "subtitle": "Numeric Input - Currency",
                                "type": "input",
                                "options": {
                                    "keyboardType": "decimalPad",
                                    "regex": "^\\d*\\.?\\d?\\d?$",
                                    "labelText": "Enter Amount:",
                                    "placeholder": "50.00",
                                    "prefixText": "$"
                                },
                                "nextPageIdentifier": "005"
                            },
                            {
                                "pageIdentifier": "005",
                                "title": "With Placeholder, Label and Expecting a Name",
                                "subtitle": "Text Input - Single Line",
                                "type": "input",
                                "nextPageIdentifier": "006",
                                "options": {
                                    "placeholder": "J. Appleseed",
                                    "labelText": "Name:",
                                    "textContentType": "name",
                                    "required": true
                                }
                            },
                            {
                                "pageIdentifier": "006",
                                "title": "Optional Additional Comment Field",
                                "subtitle": "Text Input - Multiple Lines",
                                "type": "input",
                                "submitForm": true,
                                "options": {
                                    "inputType": "multiline",
                                    "placeholder": "Add any additional details here"
                                }
                            }
                        ]
                    }
                },
                
	         "images": [
                    {
                        "identifier": "1",
                        "data": "{{imageBit}}"
                    },
                    {
                        "identifier": "2",
                        "data": "{{imageBit}}"
                    }
                ]
            },
            "receivedMessage": {
                "title": "Messages for Business Form",
                "subtitle": "Tap to view the available pages",
                "style": "small",
                "imageIdentifier": "1"
            },
            "replyMessage": {
                "title": "Messages for Business Form",
                "subtitle": "Tap to review your selections",
                "style": "small",
                "imageIdentifier": "1"
            }
        },
        "attachments": [
            
        ]
    }
}

Parameters

Parameter	Type/Object	Required	Description	Example/Allowed value
bid	string	+	Static parameter, which is sent in the Form.	See the example above.
data.dynamic.version	string	+	Should be 1.1 or the specified value when the feature launches.	1.1
data.dynamic.template	string	+	The type is `form`. Tells the client which template to use to render the view.	Form.
data.dynamic.data	object	+	Place all the Form data in this field.
...dynamic.data.splash.header	string	+	Shown at the start of the Form. When using splash, ensure the appropriate fields listed below display.	Messages for Business Form Demo.
...dynamic.data.splash.splashtext	string		The main text of the Form starting page.
...dynamic.data.splash.buttonTitle	string	+	Text on the button shown on the page. If `buttontext` is missing, then this view doesn't display and continues onto the first module.	Continue.
...dynamic.data.splash.imageIdentifier	string		Identifier of the image to be shown at the top of the view.	2
...dynamic.data.startpageIdentifier	string	+	Identifier of the starting page for the Forms. Defaults to the first object in the `pages[]` array if not defined.	2
...dynamic.data.showSummary	boolean		Defaults to “false”. If set to “true”, then shows the summary of all the selections made within the Form.	false (default), true
...dynamic.data.pages[].pageIdentifier	string	+	A unique identifier for the page being shown that is less than 20 characters in length. Do not reuse.	001
...dynamic.data.pages[].type	string	+	Data input type for the page. Use one of the following values: `select` (item selection list), `datePicker` (date selection menu), or `input` (keyboard data input).	select, datePicker, input.
...dynamic.data.pages[].title	string		If set this displays the title in bold on the page. The title is located between the page title image (see `imageIdentifier`) and the main text.	Choose one selection to move on to the next page.
...dynamic.data.pages[].subtitle	string	+	Used to display the title text of Form pages. For example, an explanation for a page text or a question.	Answer the following question.
...dynamic.data.pages[].multipleSelection	boolean		By default, is set to “false” allowing the user to select only one item (`singleSelect`). Enables multiple item selection for the page when set to “true”.	true, false (default)
...data.pages[].items[]title	string	+	Localized string value for display in the page title.	001
...data.pages[].items[]imageIdentifier	string	+	Identifier of the image, which is displayed at the top of a Form page.	01
...data.pages[].items[]value	string	+	A string value of the object itself.	option01
...data.pages[].items[]identifier	string	+	A unique identifier for the item.	001_01
...data.pages[].items[]nextPageIdentifier	string	+	A unique page identifier to show the next page. Set this value only when multipleSelection is not defined or set to “false”.	002
...dynamic.data.pages[]datePicker.options	string, `dateFormat` object	+	A string representing the date format on the page. The default format is MM/DD/YYYY. Unless this property is explicitly set, all of the date properties are defined using this format.	02/15/2021
...dynamic.data.pages[]datePicker.options	string, `startDate` object	+	A string representing the date displayed by the date picker. The current date is used by default.	02/15/2021
...dynamic.data.pages[]datePicker.options	string, `maximumDate` object	+	A string representing the maximum date that a date picker can show. The current date is used by default.	02/15/2050
...dynamic.data.pages[]datePicker.options	string, `minimumDate` object	+	A string representing the minimum date that a date picker can show.	02/15/2000
...dynamic.data.pages[]datePicker.options	string, `labelText` object	+	A string representing the text string to be shown next to the date field. The default text used is "Date".	Date (default)
...dynamic.data.pages[]options	string, `regex` object	+	A string representing a JSON encoded Regex string to limit the type of input for the input field to use.
Note: all Regex strings are JSON-coded.	An example to limit input to only have proper decimal values that provides a regex string: ^\ \d*\.?\d?\d?$
...dynamic.data.pages[]options	string, `placeholder` object	+	A text string used when there is no other text in the input text field.	Default values: Required, Optional.
...dynamic.data.pages[]options	boolean, `required` object	+	The default Boolean value is "false". When set to "true", the next button on the page is disabled until the user provides input.	false (default), true.
...dynamic.data.pages[]options	string, `inputType` object	+	The default string value is singleline. When set to multiline, a multiline user data input is enabled.	singleline, multiline.
...dynamic.data.pages[]options	string, `labelText` object	+	A string value representing a text label shown to identify the input field. The default value is an empty string. Only applies to `inputType:singleline`	Enter amount .
...dynamic.data.pages[]options	string, `prefixText` object	+	A string value representing optional text shown next to the text field. The default value is an empty string. For example, you can set this value to denote the $ character for the field. Only applies to `inputType:singleline`.	$
...dynamic.data.pages[]options	string, `maximumCharacterCount` object	+	An integer value representing the field size in characters for singleline and multiline. The default field size represents 30 characters for singleline and 300 characters for multiline.	Default values: 30 (for `singleline` field type), 300 (for `multiline` field type).
...dynamic.data.pages[]options	string, `keyboardType` object		Type of keyboard to be shown.	default, asciiCapable, numbersAndPunctuation, URL, numberPad, phonePad, namephonePad, emailAddress, decimalPad, UIKeyboardTypeTwitter, webSearch.

Types of keyboard supported for `keyboardType`

Type of keyboard	Description	Allowed value
default	Default value. Specifies the default keyboard for the current input method.
asciiCapable	Specifies a keyboard that displays standard ASCII characters.
numbersAndPunctuation	Specifies the numbers and punctuation keyboard.
URL	Specifies a keyboard optimized for URL entry. This keyboard type prominently features the period (.), forward slash (/) characters, and the “.com” string	".","/",“.com”...
numberPad	Specifies a numeric keypad designed for PIN entry. This keyboard type prominently features the numbers 0 through 9. This keyboard type does not support auto capitalization.	1,2,3,4,5,6,7,8,9,0.
phonePad	Specifies a keypad designed for entering telephone numbers. This keyboard type prominently features the numbers 0 through 9 and the asterisk (*) and hashtag (#) characters	1,2,3,4,5,6,7,8,9,0, "*", "#".
namePhonePad	Specifies a keypad designed for entering a person’s name or phone number. This keyboard type does not support auto-capitalization.
emailAddress	Specifies a keyboard optimized for entering email addresses. This keyboard type prominently features the at (@), period (.), and space characters.
decimalPad	Specifies a keyboard with numbers and a decimal point	1,2,3,4,5,6,7,8,9,0, "."
UIKeyboardTypeTwitter	Specifies a keyboard optimized for Twitter text entry, with easy access to the at (@) and hashtag (#) characters.
webSearch	Specifies a keyboard optimized for web search terms and URL entry. This keyboard type prominently features the space and period (.) characters.
textContentType	A string value representing the keyboard and system information about the expected semantic meaning for the content that users enter. For a full description of each supported value, go to UITextContentType on Apple Developer.	name, namePrefix, givenName, middleName, familyName, nameSuffix, nickname, jobTitle, organizationName, location, fullStreetAddress, streetAddressLine1, streetAddressLine2, addressCity, addressState, addressCityAndState, sublocality, countryName, postalCode, telephoneNumber, emailAddress, URL, creditCardNumber, username, password, newPassword, oneTimeCode

Was this article helpful?

What's Next

Apple Pay

Table of contents

Overview
Example
Parameters
Types of keyboard supported for keyboardType