Form component blocks collect input from users. All form input blocks have two required attributes: sfdc_cms:formInputLabelProperty (the field label) and sfdc_cms:formInputNameProperty (the field name).
A field that accepts one line of input text.
| Attribute | Type | Description |
|---|---|---|
sfdc_cms:formInputLabelProperty | string | Required. The label shown above the input field to describe what the user should enter. |
sfdc_cms:formInputNameProperty | string | Required. The internal name for the field. Use this field to identify the form after it’s submitted. |
maxLength | integer | Required. The maximum number of characters a user can enter in the field. The maximum value is 10000. |
placeholder | string | The text that’s shown in the input field before the user types anything. Use this text to suggest the expected format or value. |
width | object | The width of the input field within its container. |
This example shows how to create a basic input text field.
1{
2 "type": "block",
3 "definition": "lightning/inputText",
4 "attributes": {
5 "sfdc_cms:formInputLabelProperty": "Full Name",
6 "sfdc_cms:formInputNameProperty": "fullName",
7 "maxLength": 100,
8 "placeholder": "Enter your full name"
9 }
10}A field for inputting an email address. This block type performs validation to make sure that the input value is a valid email address.
| Attribute | Type | Description |
|---|---|---|
sfdc_cms:formInputLabelProperty | string | Required. The label shown above the input field to describe what the user should enter. |
sfdc_cms:formInputNameProperty | string | Required. The internal name for the field. Use this field to identify the form after it’s submitted. |
maxLength | integer | Required. The maximum number of characters a user can enter in the field. The maximum value is 10000. |
placeholder | string | The text that’s shown in the input field before the user types anything. Use this text to suggest the expected format or value. |
This example shows how to create a basic email entry field.
1{
2 "type": "block",
3 "definition": "lightning/inputEmail",
4 "attributes": {
5 "sfdc_cms:formInputLabelProperty": "Email Address",
6 "sfdc_cms:formInputNameProperty": "email",
7 "maxLength": 255,
8 "placeholder": "Enter your email address..."
9 }
10}A checkbox input for boolean values, such as opt-in or agreement confirmations.
| Attribute | Type | Description |
|---|---|---|
sfdc_cms:formInputLabelProperty | string | Required. The label shown next to the checkbox to describe what the user is agreeing to or selecting. |
sfdc_cms:formInputNameProperty | string | Required. The internal name for the field. Use this field to identify the form after it’s submitted. |
This example shows how to create a simple checkbox.
1{
2 "type": "block",
3 "definition": "lightning/inputCheckbox",
4 "attributes": {
5 "sfdc_cms:formInputLabelProperty": "Subscribe to our newsletter",
6 "sfdc_cms:formInputNameProperty": "subscribe"
7 }
8}A dropdown list that contains several predefined options.
| Attribute | Type | Description |
|---|---|---|
sfdc_cms:formInputLabelProperty | string | Required. The label shown above the dropdown to describe what the user should select. |
sfdc_cms:formInputNameProperty | string | Required. The internal name for the field. Use this field to identify the form after it’s submitted. |
options | array | Required. The list of selectable options in the dropdown. Each option requires a label string, which is visible to the user, and a value string, which is an identifier that’s submitted with the form. |
placeholder | string | The text that’s shown in the dropdown before the user selects an option. Use this property to prompt the user to select an option. |
This example shows how to create a basic dropdown list with two options.
1{
2 "type": "block",
3 "definition": "lightning/inputDropdown",
4 "attributes": {
5 "sfdc_cms:formInputLabelProperty": "Country",
6 "sfdc_cms:formInputNameProperty": "country",
7 "placeholder": "Select your country...",
8 "options": [
9 { "label": "Canada", "value": "CA" },
10 { "label": "United States", "value": "US" }
11 ]
12 }
13}
j