The basic elements

Abstract

Overview of frequently-used elements for creating forms including text, file upload, number, single-line text, multi-line text, email, telephone, checkbox and date.

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.

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.

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 Settings tab, 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.

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 Settings tab, 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:

<httpRuntime maxRequestLength="your-desired-request-length" />
<requestLimits maxAllowedContentLength="your-max-allowed-content-length" />

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 Settings tab, 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.

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 Settings tab, 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.

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 Settings tab, 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.

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 Settings tab, 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 Settings tab, 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.

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 Settings tab, 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.

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 Settings tab, 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.

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 Settings tab, 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 <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.