The Form elements

The basic elements

Version:

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 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.

If you have suggestions for improving this article, let us know!