Form Fields

This guide gets you started with creating a range of fields on the Sitecore Forms Builder.
Field Properties

How to add and remove fields, and set a range of properties for a field.

Adding a field

To add a field, right click on the form step you want to add the field to. Select ‘Insert’ and you will be presented with a list of field options that you can add. Select the field you want to add e.g. single line text field.

Inserting a Single Line Text Field

You will be asked to enter a name for the field e.g. ‘First Name’.

Entering a name for the field

You can edit the title of the field. The title will be what is displayed on the form. It can be different from the Name.

Entering a title for the field

Save changes.

Save button

These steps apply to any type of field being added to the form.  The guide steps below describe further properties that can be set for most types of field, followed by a description of each of the field types available.

It is also possible to drag fields around and reorder them in the side toolbar.  The fields appear on the form in the same order that they are listed in the content tree. 

Making a field mandatory

It is possible to make any form field mandatory. 

Select the field you want to make mandatory from the left hand toolbar. The field will open and you will be able to edit its properties. Tick the ‘mandatory’ option to make the field mandatory.

Mandatory Field Check Box

A mandatory field is marked as ‘required’ on the form. A field which is not mandatory is marked as ‘optional’ on the form.

Making a field read only

Select the field you want to make read only from the left hand toolbar (e.g. single line text).  The field will open and you will be able to edit its properties. Tick the ‘read only’ checkbox to make the field read only.

Read Only Field Checkbox

A read only field will appear the same as other fields on the form. However, a user will not be able to edit this field. The example below shows a field with default text that is read only.

A read only field containing default text

Adding a default value

Select the field you want to add a default value to from the left hand toolbar. The field will open and you will be able to edit its properties. You will be presented with an option to enter a default value. Enter the text you want to appear as the default value.

Setting a default value for a field

The default value will appear in the field in the form before the user edits it.

Adding placeholder text

Placeholder text is text that appears in a form field, which disappears when the user goes into that field.  It can be used to give guidance on what the user should enter in that field (see example below). 

Select the field you want to add placeholder text to from the left hand toolbar. The field will open and you will be able to edit its properties.

You will be presented with an option to enter the placeholder text. Enter the text you want to appear as the placeholder text.

 Setting placeholder text for a field

The placeholder text will appear in the field in the form before the user enters text into the field.

 Placeholder text in a text area field on a form

Deleting a field

Right click on the field you want to delete in the left hand toolbar. Select ‘Delete’.

Deleting a field

You will be asked to confirm whether you want to delete this field. The field will then be deleted from the form. If you need to restore it, it will be in the recycling bin.

Restoring a deleted field

Go back to the main ‘Sitecore Experience Platform’ desktop, by clicking on the square grid icon.

Sitecore Experience Platform desktop icon

Select ‘Recycle Bin’ from the desktop.

Recycle Bin icon

Find the deleted field and select Restore.

Restoring an item

The field will now be restored to the original position it got deleted from.

Making a field conditional

Making a field conditional means it only appears when a particular option is selected in the form. For example, if a user selects a certain option from a radio button group, this could lead to further conditional fields appearing.

It is possible to add more than one condition to a field. If multiple conditions are added to a field this means that this field will appear if any of those conditions are met.

Select the field you want to make conditional from the left hand toolbar.

The field will open and you will be able to edit its properties.

At the bottom there is an option to add conditions. All the options that a field can be made conditional on will appear as below:



You can either double click on an option to select/deselect it as a condition, or use the arrows on the screen.

It is also possible to conditionally hide fields. This means that rather than appearing when conditions are selected, fields are hidden. You can do this by selecting the checkbox which says ‘Hide field when condition met’

The fields will always appear where they are placed in the content tree.

Input Fields

How to add fields into which the user can type information.

Adding a single line text field

A single line text field allows users to input short one word answers/phrases. Select ‘Singleline text’ from the list of field types.

Single line text field option

You will be asked to enter a name for the field e.g. ‘First Name’.  The field on the form will look like this:

Text Field example

Adding an email text field

An Email text field is a single line text field which allows users to input their email address. It contains validation which will detect whether the email address entered is a valid email format. Select ‘Email’ from the list of field types.

Email Field Option

You will be asked to enter a name for the field e.g. ‘Business email address’. This is how the field will look on the form when an invalid email address is entered:

Email Field example with invalid email address

When a valid email address is entered it looks like this:

Email Field example with valid email address

Adding a date field

A date field is a single line text field which allows users to input the date.  It contains validation which will detect whether the date is entered in a valid format. It is also possible to add a ‘date picker’ which allows the user to select a particular date from a calendar. Select ‘Date’ from the list of field types.

Date Field Option

You will be asked to enter a name for the field e.g. ‘Date of visit’. You can set a minimum and/or a maximum date for the field if required.

The date field automatically includes placeholder text of ‘dd/mm/yyyy’ to guide the user on the required date format.

Example of a date field

When the user goes into the field, a date picker appears.  The user can then select a date from the calendar or type it in.

The date picker on a date field

Adding a number field

A number field is a single line text field which allows users to input numbers only.  A number field contains validation to ensure that only numbers are entered and not text or any other characters. Select ‘Number’ from the list of field types.

Number Field Option

You will be asked to enter a name for the field e.g. ‘Toast pieces’.  The field on the form will look like this:

Number Field example

Adding a telephone field

A telephone field is a single line text field which allows users to input telephone numbers only.  A telephone field contains validation to ensure that valid phone numbers are added. Validation can be added to change the acceptable format to UK telephone numbers, UK mobile numbers and international numbers. Select ‘Telephone’ from the list of field types.

Telephone Field Option

You will be asked to enter a name for the field e.g. ‘Daytime telephone number’. The field on the form will look like this:

Telephone Field example

Adding a text area field

A text area field is a field which allows users to input a larger amount of text. 

Select ‘Textarea’ from the list of field types.

Text Area Field Option

You will be asked to enter a name for the field e.g. ‘Breakfast Description’.

It is possible to specify the maximum number of characters a user can enter, by setting the Maxlength property. A character countdown will then appear, and the user will not be able to enter more information once the character limit is reached (see example below).

Example of a character count on a text area field

Adding a URL field

The URL field is similar to a single line text field but contains validation to ensure that a URL is entered in the correct format.

Right click on the form step you want to add the field set to.

Select ‘Insert’ and you will be presented with a list of field options that you can add.

Select ‘URL’.

You will be asked to enter a name for the field.

You can edit the title of the field to how you would want it to appear on the form.

Once published, the validation built on the field checks that any URL entered is in the correct format. However, the user need to enter the full URL e.g.
https://google.com not just google.com 


Adding a DateTime field

A DateTime field presents allows the user to input a date and also a time. When the user clicks on the field, they are presented with both a date and time picker. The date picker is a calendar which the user can select a date from. The time picker consists of two slider options, one for hour and one for minute, enabling the user to select a particular time. 

Right click on the form step you want to add the time field to.

Select ‘Insert’ and you will be presented with a list of field options that you can add.

Select ‘DateTime.

You will be asked to enter a name for the field.

You can edit the title of the field. The title will be what is displayed on the form. It can be different from the Name.

In the properties of the field, you can select a minimum and maximum date/time that you would like to limit the user’s selection to.

 The field appears as below:

Adding a date of birth field

The date of birth field allows the user to enter the date of birth, without the user of a date picker. It presents as three text boxes, for the day, month and year.

Right click on the form step you want to add the date of birth field to.

Select ‘Insert’ and you will be presented with a list of field options that you can add.

Select 'Date of Birth'

You will be asked to enter a name for the field and it is also possible to edit the title.

The field will appear as below:

Select Fields

How to add fields that allow the user to select from a set of options.

Adding a checkbox group field

A checkbox group field allows users to select more than one option from a range of checkboxes. Select ‘Checkbox group’ from the list of field types.

Checkbox group field option

You will be asked to enter a name for the field e.g. ‘Breakfast options’.

To add the different checkbox options, right click on the field you have just created in the left toolbar. Select ‘Insert’ > ‘Insert option’. You will then be asked to enter the name for your option. E.g. ‘Breakfast - Cereal’.

You can then edit the label of the option. This is what will appear on the form, e.g. ‘Cereal'. It is important that each option on the form has a different Name. This makes it easier to set conditional fields. If two labels are called ‘Toast’, then it will be difficult to determine which option you want to set the conditionality to. It will be easier to call the ‘names’ ‘Breakfast - Toast’ and ‘Lunch - Toast’ and then make both the labels ‘Toast'.

You will also be asked to set the default status. It is possible to make any checkbox option as selected as the default value.

The checkbox group will look like this on your form, with some options selected:

Checkbox Group Example

Adding a radio button group field

A radio button group field allows users to select only one option from a range of options. Select ‘Radiobutton group’ from the list of field types.

Radio Button Group Field Option

You will be asked to enter a name for the field e.g. ‘Breakfast options’.

To add the different radio button options, right click on the field you have just created in the left toolbar. Select ‘Insert’ > ‘Insert option’. You will then be asked to enter the name for your option, e.g. ‘Breakfast –Toast'.

You can then edit the label of the option. This is what will appear on the form, e.g. ‘Toast'. It is important that each option on the form has a different Name. This makes it easier to set conditional fields. If two options on the form are called ‘Toast’, then it will be difficult to determine which option you want to set the conditionality to. It will be easier to call the ‘names’ ‘Breakfast - Toast and ‘Lunch - Toast’ and then make both the labels ‘Toast'. 
You will also be asked to set the default status. It is possible to make any radio button option as selected as the default value.

The radio button group will look like this on your form with one option selected:

Radio Button Group Example

Adding a dropdown field

A dropdown field (called a 'select' field) allows users to select a single option from a list in a dropdown. Select ‘Select’ from the list of field types.

Select Field Option

You will be asked to enter a name for the field e.g. ‘Breakfast options’

To add the different dropdown options, right click on the field you have just created in the left toolbar. Select ‘Insert’ > ‘Insert option’.

You will then be asked to enter the name for your option. E.g. ‘Breakfast - Cereal'. You can then edit the label of the option. This is what will appear on the form. E.g. ‘Cereal'. It is important that each option on the form has a different Name. This makes it easier to set conditional fields. If two labels are called ‘Toast’, then it will be difficult to determine which option you want to set the conditionality to. It will be easier to call the ‘names’ ‘Breakfast - Toast’ and ‘Lunch - Toast' and then make both the labels ‘Toast’.

You will also be asked to set the default status. It is possible to make any dropdown option as selected as the default value.

The dropdown field will look like this on your form, with a default value visible:

Select Field Example with default value

When the user clicks on the dropdown icon, they will see a list like this:

Select Field Example with dropdown list

To create a 'please select' option on a dropdown, create an option as above and name it appropriately e.g. 'please select an option'. Do not add a field key to this field. This means that the user cannot select this option as one from the dropdown if the dropdown is mandatory- the user must select a different one as the form will not be able to be submitted with that option selected.

Adding a checkbox field

A checkbox field is a single checkbox accompanied with a small amount of text. E.g. ‘I accept the terms and conditions’. Select ‘Checkbox’ from the list of field types.

Checkbox Field Option

You will be asked to enter a name for the field e.g. ‘Accept conditions’.

The checkbox field will look like this on your form:

Checkbox Field example

Adding a 'select with option group' field

A Select with option group field is a dropdown field which can place the options into different groups.

Right click on the form step you want to add the Select with option group field to.

Select ‘Insert’ and you will be presented with a list of field options that you can add.

Select ‘SelectwithOptionGroup’.

You will be asked to enter a name for the field.

You can edit the title of the field. The title will be what is displayed on the form. It can be different from the Name.

Before adding the individual options, you must add an option group. Right click and insert ‘FormFieldOptionGroup’.

 

You can edit the name, and properties of this option group. You can now add individual options for each option group.

As with the select field, right click on the option group to insert individual options. Right click and Insert ‘FormFieldOption. You can edit the name and properties of this option group. The dropdown appears as below:

Miscellaneous Fields

How to add a variety of miscellaneous fields.

Adding a file upload field

A File Upload field is a field with a 'Browse' button which allows users to attach a file to their submitted form.  Select ‘File Upload’ from the list of field types.

File Upload Field Option

You will be asked to enter a name for the field e.g. ‘Proposal document’. Here is an example of a how the File Upload field looks in a form once the Browse button has been used to select a file.

Using a file upload field

Adding an 'info block' field

An Info Block field is a block of HTML within a form to provide information or links to the user. Select ‘Info block’ from the list of field types.

Info Block Field Option

You will be asked to enter a name for the field e.g. ‘Ceremonies info block'.  You can then create the content for your info block by clicking on 'Show editor' under 'Content:'

Creating an info block

Note: the Title can be left blank if you do not want any words to appear above your info block.

If you wish, you can use the HTML editor to add classes, links, icons etc. to your info block, by clicking on the HTML tab on the Rich Text Editor.

Inserting HTML for an Info Block

In the following example, the blue information box class has been used, and icons have been added to link out to further information.  The info block is conditional on the option 'Ceremonies' being selected from the dropdown and appears as below:

Example of a dropdown option that when chosen brings up an info block

Info Block Example

The HTML to change the info block colours are:

<div class="alert alert-success" role="alert">

<strong>Well done!</strong> You successfully read this important alert message.

</div>

<div class="alert alert-info" role="alert">

<strong>Heads up!</strong> This alert needs your attention, but it's not super important.

</div>

<div class="alert alert-warning" role="alert">

<strong>Warning!</strong> Better check yourself, you're not looking too good.

</div>

<div class="alert alert-danger" role="alert">

<strong>Oh snap!</strong> Change a few things up and try submitting again.

</div>

 

 

Adding a hidden field

A hidden field is a field which is not visible on the form to the user (although its information can still be seen if the element is inspected via the browser). Hidden fields can be used for passing back end information through the form, such as submit action parameters. For example, hidden fields can be used to pass C4C ticket parameters.

Right click on the form step you want to add the hidden field to.

Select ‘Insert’ and you will be presented with a list of field options that you can add.

Select ‘Hidden field’.

You will be asked to enter a name for the field e.g. ‘C4Creasoncategory’.

You can edit the title of the field. The title will be what is displayed on the form. It can be different from the Name.

If hidden fields are used to pass through back end information, e.g. through C4C, the field key should match the name of the parameter in C4C’s API and the default value should be the value that you want to be passed. For example, to create the service category ‘AS-GG’, the field key should be the value of service category in C4C’s API (which could be ServiceCategory). The default value of the field should then be AS-GG. The hidden field should also be made conditional on the option that the parameter is associated to.

Adding a range field

A range field presents the user with a slider option, to select a value from a range of numbers presented.  

Right click on the form step you want to add the range field to.

Select ‘Insert’ and you will be presented with a list of field options that you can add.

Select ‘Range’.

You will be asked to enter a name for the field e.g. ‘Happiness range’.

You can edit the title of the field. The title will be what is displayed on the form. It can be different from the Name.

In the properties of the field, you can input the minimum and maximum of the range you want the user to be able to select from.

The field will present as a slider.

Adding a gazetteer lookup field

A gazetteer lookup field allows a user to search for a postcode and automatically select their address. The gazetteer lookup field is linked to the HCC corporate gazetteer.

Right click on the form step you want to add the Gazetteer lookup field to.

Select ‘Insert’ and you will be presented with a list of field options that you can add.

Select ‘Gazetteer lookup'.

You will be asked to enter a name for the field.

You can edit the title of the field. The title will be what is displayed on the form. It can be different from the Name.

In the properties of the field, it is possible to edit the following properties:

  • Button text: e.g. ‘Find address’

  • Link text e.g. ‘Manually enter your address’. When a user clicks this link, a group of fields automatically open to allow the user to enter their address manually

  • Manual entry label text e.g. ‘if you live outside Hampshire or can’t find your address’. This text follows the link text in the same sentence.

The lookup field appears as below:

If a user looks up their postcode, a list of possible addresses appears as below:

Alternatively, the user can manually enter their address:


Adding a form fieldset

A field set allows a content author to group certain fields together. The heading of the form field set acts like a subheading on the form. This is an effective way to divide a form step into different sections.

Right click on the form step you want to add the field set to.

Select ‘Insert’ and you will be presented with a list of field options that you can add.

Select ‘FormFieldset’.

You will be asked to enter a name for the field.

You can edit the ‘Legend’ of the field. The field set legend will be what is displayed on the form as a subheading and appears as below:



Within the form field set, you can add any fields that you wish to be contained under that particular subheading.

Adding a payment sum field

A payment sum field allows the summation of options with values. It is possible to add associated values with any field that has an option (e.g. dropdowns, radio button groups, checkbox groups). If selected by the user, the payment sum field totals the value of the options.

Before using the payment sum field, it is necessary to have associated values with options on the form.

To do this, click on the field that has options with associated payment values. For example, a radio button group where each option has an associated value.

Click on a particular option. In its properties, there is a payment details section. This allows a content author to enter the associated amount, tax code and any additional parameters that may be associated with that option.  Once all the payment details are added to the options, the payment sum field can be configured.

Right click on the form step you want to add the payment sum field to.

Select ‘Insert’ and you will be presented with a list of field options that you can add.

Select ‘Payment sum’.

Drag the payment sum field to be placed below all the fields which have associated options with payment details.

You will be asked to enter a name for the field.

In the field properties, there is a section called ‘Fields to sum up.’ Here, it is possible to select which fields you would like this payment sum field to sum up the values of. For example, there maybe be several fields which contain options that have associated payment details but you would only like this payment sum field to sum up values from a selection. To select/deselect the fields, double click on them or move them to the selected section but using the arrows on the screen.

The payment sum field will appear as below:

XXXX placeholder for when payments sum field is ready

Once the options are selected by the user, they will automatically appear in the payment sum table.