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 and drop these elements from the General tab in the Form elements pane onto the form canvas, where they become form fields, which you can edit.

This topic describes the basic form elements and their settings.

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.
Conditions	Edit conditions	Apply conditional actions to fields in web forms. Click Edit conditions to add a condition.

File upload

Use the File upload element to add file upload possibilities for your web forms. You can allow a visitor to attach a single file or multiple files to your web form. For example, a resume, an avatar, or a profile picture.

Note

File uploads appear in the export form CSV file.

In the Forms editor, you can determine the number of files a visitor can upload including the size and the format of these files.

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.
	Limit file size	Determines the maximum file size for the files a visitor can upload. By default, visitors can upload files that do not exceed the 2GB maximum. Only applies if the File size validator check box is selected.
	Limit number of files	Determines the number of files a visitor is allowed to upload. This field is mandatory. Only applies if the File count validator check box is selected.
	Limit file types	Determines the allowed file extensions or MIME types, separated by a comma. For example, application/PDF , .pdf , pdf If this field is left empty, the visitor can upload files in any formats. Only applies if the File type validator check box is selected.
Validation	File size validator	Select to validate the file size according to the value set in the Limit file size field.
	File count validator	Select to validate the number of files according to the value set in the Limit number of files field.
	File type validator	Select to validate the file type according to the value(s) set in the Limited file types field.
	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.
Conditions	Edit conditions	Apply conditional actions to fields in web forms. Click Edit conditions to add a condition.
Advanced settings	Allow save	Enables or disables saving the filled-in field data upon form submission.
	Performance tracking	Select to record data about how the field performs. For tracking to work, on the Settingstab, the Performance tracking checkbox for the form must also be selected.
	Value provider	Select the source that you want to link the field to. The prefill value of the form will be fetched from this source.
	Value provider parameters	Enter the key to match the field.

Note

If you want your visitors to be able to upload large files, make sure your that your web server is configured to allow large file sizes. Otherwise, visitors might receive an error message: HTTP Error 413 Request Entity Too Large. You can adjust the file upload settings for ASP.NET in the Web.config file:

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.
Conditions	Edit conditions	Apply conditional actions to fields in web forms. Click Edit conditions to add a condition.
Advanced settings	Allow save	Enables or disables saving the filled-in field data upon form submission.
	Performance tracking	Select to record data about how the field performs. For tracking to work, on the Settingstab, the Performance tracking checkbox for the form must also be selected.
	Value provider	Select the source that you want to link the field to. The prefill value of the form will be fetched from this source.
	Value provider parameters	Enter the key to match the field.

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.
Conditions	Edit conditions	Apply conditional actions to fields in web forms. Click Edit conditions to add a condition.
Advanced settings	Allow save	Enables or disables saving the filled-in field data upon form submission.
	Performance tracking	Select to record data about how the field performs. For tracking to work, on the Settingstab, the Performance tracking checkbox for the form must also be selected.
	Value provider	Select the source that you want to link the field to. The prefill value of the form will be fetched from this source.
	Value provider parameters	Enter the key to match the field.

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.
Conditions	Edit conditions	Apply conditional actions to fields in web forms. Click Edit conditions to add a condition.
Advanced settings	Allow save	Enables or disables saving the filled-in field data upon form submission.
	Performance tracking	Select to record data about how the field performs. For tracking to work, on the Settingstab, the Performance tracking checkbox for the form must also be selected.
	Value provider	Select the source that you want to link the field to. The prefill value of the form will be fetched from this source.
	Value provider parameters	Enter the key to match the field.

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.
Conditions	Edit conditions	Apply conditional actions to fields in web forms. Click Edit conditions to add a condition.
Advanced settings	Allow save	Enables or disables saving the filled-in field data upon form submission.
	Performance tracking	Select to record data about how the field performs. For tracking to work, on the Settingstab, the Performance tracking checkbox for the form must also be selected.
	Value provider	Select the source that you want to link the field to. The prefill value of the form will be fetched from this source.
	Value provider parameters	Enter the key to match the field.

Email confirmation

To prevent incorrect submission of the email address, you can consider using an email confirmation field.

Section	Item	Description
Details	Email label	Caption that tells your contacts what information a particular form field is asking for.
	Confirm email 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.
	Email 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 email address here.
	Confirm email 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, Re-type your email address here. For this setting to apply, you must select the String Length Validator check box in the Field validation field.
	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. For this setting to apply, you must select the String Length Validator check box in the Field validation 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.
Conditions	Edit conditions	Apply conditional actions to fields in web forms. Click Edit conditions to add a condition.
Advanced settings	Allow save	Enables or disables saving the filled-in field data upon form submission.
	Performance tracking	Select to record data about how the field performs. For tracking to work, on the Settingstab, the Performance tracking checkbox for the form must also be selected.
	Value provider	Select the source that you want to link the field to. The prefill value of the form will be fetched from this source.
	Value provider parameters	Enter the key to match the field.

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.
Conditions	Edit conditions	Apply conditional actions to fields in web forms. Click Edit conditions to add a condition.
Advanced settings	Allow save	Enables or disables saving the filled-in field data upon form submission.
	Performance tracking	Select to record data about how the field performs. For tracking to work, on the Settingstab, the Performance tracking checkbox for the form must also be selected.
	Value provider	Select the source that you want to link the field to. The prefill value of the form will be fetched from this source.
	Value provider parameters	Enter the key to match the field.

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.
Conditions	Edit conditions	Apply conditional actions to fields in web forms. Click Edit conditions to add a condition.
Advanced settings	Allow save	Enables or disables saving the filled-in field data upon form submission.
	Performance tracking	Select to record data about how the field performs. For tracking to work, on the Settingstab, the Performance tracking checkbox for the form must also be selected.
	Value provider	Select the source that you want to link the field to. The prefill value of the form will be fetched from this source.
	Value provider parameters	Enter the key to match the field.

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.
Conditions	Edit conditions	Apply conditional actions to fields in web forms. Click Edit conditions to add a condition.
Advanced settings	Allow save	Enables or disables saving the filled-in field data upon form submission.
	Performance tracking	Select to record data about how the field performs. For tracking to work, on the Settingstab, the Performance tracking checkbox for the form must also be selected.
	Value provider	Select the source that you want to link the field to. The prefill value of the form will be fetched from this source.
	Value provider parameters	Enter the key to match the field.

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!