The basic elements

Current version: 9.1

Frequently used elements for forms, such as Text, Email, and Telephone, are grouped in the Basic section of the Form elements pane. You can drag these elements from the General tab on the Form elements pane onto the form canvas, where they become form fields, which you can edit.

Text

Use the Text element to add a text field to your form. You can use this element for the title of your form to state its purpose. For example, Careers inquiry form, or Contact us.

Section

Item

Description

Details

Text

Text that appears in, for example, the title of your form when you add the text element.

Field name

Name of the element.

Html tag

Select an HTML tag for the text. To add tags, go to sitecore/System/Settings/Forms/Meta Data/Text Tags

Styling

CSS class

Defines the CSS class of the field.

Number

Use the Number element to add a field to enter numerals.

Section

Item

Description

Details

Label

Caption that tells your contacts what information a particular form field is asking for.

Field name

Name of the element. Always use meaningful names for the Field name. The Field name is the actual Item name for the Sitecore definition item for the form field. 

Default value

Initial value.

Placeholder text

Text in a form field that functions as a hint to describe the expected value. The placeholder text disappears when the contact clicks the field. For example, Enter your first name here.

Min value

Determines the minimum value. Contacts see a validation error message if their input is lower than the value specified in this field.

Max value

Determines the maximum value. Contacts see a validation error message if their input is higher than the value specified in this field.

Step

Specifies the number intervals, for example, if you want the contact to fill in even numbers only. The default value is 1.

Validation

Field validation

Determines whether field validation is applied.

Field importance

Indicates whether the visitor must fill in the field. The options are Optional or Mandatory.

Styling

CSS class

Defines the CSS class of the field.

CSS class for label

Defines the CSS class of the label.

Advanced settings

Allow save

Enables or disables saving the filled-in field data upon form submission.

Single-line text

Use the Single-line text element to add a field to enter one line of text. For example, for name entry fields.

Section

Item

Description

Details

Label

Caption that tells your contacts what information a particular form field is asking for.

Field name

Name of the element.

Default value

Initial value.

Placeholder text

Text in a form field that functions as a hint to describe the expected value. The placeholder text disappears when the contact clicks the field. For example, Enter your first name here,

Minimum text length

Determines the minimum text length for the input field of the Single-line text element. Contacts see a validation error message if their input is shorter than the number of characters specified in this field.

Maximum text length

Determines the maximum text length for the input field of the Single-line text element. Contacts see a validation error message if their input is longer than the number of characters specified in this field.

Validation

Field validation

Determines whether field validation is applied.

Field importance

Indicates whether the contact must fill in the field. The options are Optional or Mandatory.

Styling

CSS class

Define the CSS class of the field.

CSS class for label

Define the CSS class of the label.

Advanced settings

Allow save

Enables or disables saving the filled-in field data upon form submission.

Multiple-line text

Use the Multiple-line text element to add a field to enter multiple lines of text. You can use this element for addresses and other long answers, such as comments and descriptions.

Section

Item

Description

Details

Label

Caption that tells your contacts what information a particular form field is asking for.

Field name

Name of the element.

Default value

Initial value.

Placeholder text

Text in a form field that functions as a hint to describe the expected value. The placeholder text disappears when the contact clicks the field. For example, Enter your first name here.

Number of rows

Determines the number of lines available.

Minimum text length

Determines the minimum text length for the input field of the Multiple-line text element. Contacts see a validation error message if their input is shorter than the number of characters specified in this field.

Maximum text length

Determines the maximum text length for the input field of the Multiple-line text element. Contacts see a validation error message if their input is longer than the number of characters specified in this field.

Validation

Field validation

Determines whether field validation is applied.

Field importance

Indicates whether the contact must fill in the field. The options are Optional or Mandatory.

Styling

CSS class

Defines the CSS class of the field.

CSS class for label

Defines the CSS class of the label.

Advanced settings

Allow save

Enables or disables saving the filled-in field data upon form submission.

Email

Use the Email element to add a field to enter an email address.

Section

Item

Description

Details

Label

Caption that tells your contacts what information a particular form field is asking for.

Field name

Name of the element.

Default value

Initial value.

Placeholder text

Text in a form field that functions as a hint to describe the expected value. The placeholder text disappears when the contact clicks the field. For example, Enter your first name here,

Minimum text length

Determines the minimum text length for the input field of the Email element. Contacts see a validation error message if their input is shorter than the number of characters specified in this field.

Maximum text length

Determines the maximum text length for the input field of the Email element. Contacts see a validation error message if their input is longer than the number of characters specified in this field.

Validation

Field validation

Determines whether field validation is applied. The options are Email Validator or String Length Validator.

Field importance

Indicates whether the contact must fill in the field. The options are Optional or Mandatory.

Styling

CSS class

Defines the CSS class of the field.

CSS class for label

Defines the CSS class of the label.

Advanced settings

Allow save

Enables or disables saving the filled-in field data upon form submission.

Telephone

Use the Telephone element to add a field to enter a telephone number.

Section

Item

Description

Details

Label

Caption that tells your contacts what information a particular form field is asking for.

Field name

Name of the element.

Default value

Initial value.

Placeholder text

Text in a form field that functions as a hint to describe the expected value. The placeholder text disappears when the contact clicks the field. For example, Enter your first name here,

Minimum text length

Determines the minimum text length. Contacts see a validation error message if their input is shorter than the number of characters specified in this field.

Maximum text length

Determines the maximum text length. Contacts see a validation error message if their input is longer than the number of characters specified in this field.

Validation

Field validation

Determines whether field validation is applied. The options are Phone Number Validator or String Length Validator.

Field importance

Indicates whether the contact must fill in the field. The options are Optional or Mandatory.

Styling

CSS class

Defines the CSS class of the field.

CSS class for label

Defines the CSS class of the label.

Advanced settings

Allow save

Enables or disables saving the filled-in field data upon form submission.

Checkbox

Use the Checkbox element to display a check box that enables users to toggle and select the options.

Section

Item

Description

Details

Label

Caption that tells your contacts what information a particular form field is asking for.

Field name

Name of the element.

Checked

Determines the check box value that is preselected by default.

Validation

Field importance

Indicates whether the contact must fill in the field. The options are Optional or Mandatory.

Styling

CSS class

Defines the CSS class of the field.

CSS class for label

Defines the CSS class of the label.

Advanced settings

Allow save

Enables or disables saving the filled-in field data upon form submission.

Date

Use the Date element to add a field to enter a date.

Section

Item

Description

Details

Label

Caption that tells your contacts what information a particular form field is asking for.

Field name

Name of the element.

Selected date

Specifies the date selected by default.

Start date

Specifies the date range start date.

End date

Specifies the date range end date.

Validation

Field importance

Indicates whether the contact must fill in the field. The options are Optional or Mandatory.

Styling

CSS class

Defines the CSS class of the field.

CSS class for label

Defines the CSS class of the label.

Advanced settings

Allow save

Enables or disables saving the filled-in field data upon form submission.

Note

Sitecore Forms renders the date field using the <input type=date> HTML5 element. This element is not supported in the IE11 and Mac OS Safari browsers. To get the date field with the datetime picker element in these browsers, consider implementing a custom element.

Do you have some feedback for us?

If you have suggestions for improving this article,