Creating a Sitecore Form - A whole new Experience!!

What is a Sitecore Form?

Sitecore has introduced an amazing feature that transforms a regular form into a form that has many out-of-the-box features attached to it. Some of the features are listed below:

1. Unique Views: Number of unique visitors of the form.
2. Abandonments: Visitor who visited the form but did not submit the form
3. Abandonment Rate: Percentage of visitors not submitting the form.
4. Export Data: This helps us exporting all the submitted form data in a .csv file.

We can also leverage this new Sitecore Form by adding custom components like File upload, Captcha, etc. as per the requirement. In this blog, we will see the creation of a basic Sitecore Form.

Let's get started

Form Builder: The first step is to open the Form Builder from Sitecore Launchpad. 

What is a Form Builder?

Form Builder is a Dashboard where you can create and view all the Sitecore Forms, it

Create a Sitecore Form: Click on Create > Add a Blank Form as shown in the above image. 

Note: You can also create a template and use that template to create multiple forms.

Once the form is created you will see a Canvas where you will be able to drag and drop components as per your requirement.

Let us save this form. Note the location where this form is getting saved. 

We will now refer to a sample HTML form that we will transform into a Sitecore Form. Download Demo HTML Form

At present, the above form is created in plain HTML. 

Before we start with the creation of a Sitecore Form, refer to the below image for some common HTML elements that need to be dragged into the Form Canvas

Sample example of creating a canvas structure from the HTML Elements:

Let us drag a section onto the canvas:

Adding a CSS class to the created section:

Select the form element where you want to add a CSS class. In this case, it is a section that needs a CSS class. Click on the section on the right-hand side in the General Tab > Styling section, give the name of the CSS class. Refer to the below image:

Note: For all the form elements that we create, the styling will be added in the same way as shown above.

If you look at the HTML markup further, there is a <div> tag inside the <div> tag. We will drag another section INSIDE the section present in our Canvas.

The canvas should look like the image below:

Now inside the section, we have a label. To add a <label> we will drag a Single-line text to our canvas and give values to the properties as required. Refer to the below image:

Similarly, add all the sections, labels and CSS classes onto the canvas. 

Creating a Checkbox:

To create a checkbox we have two options:

• Drag a simple checkbox form element.
• Drag a checkbox list if you want to append multiple checkboxes.

Since we need to attach multiple checkboxes we will use a Checkbox list in this case. Also, we will add the checkboxes dynamically.

Refer to the highlighted portion in red on the right-hand side:

• Dynamic: If we choose this option, we get the checkbox list dynamically.
• Select Datasource: In this field, we will provide a datasource that will directly give us access to all its child items.
• Value Field: Since we have got access to the child items, we will now choose a field value that will be displayed in the checkbox list. The default field value is "Name".
• Selected Checkboxes: This field is used if you want to select any checkbox by default. As we do not want it for this demo, I will not select any of the checkboxes.

All the values are pulled out from the Datasource item and shown in the Checkbox List form field. Refer to the below image for the Datasource item:

Adding a Dropdown List:

In the above image, refer to the portion highlighted in Red:

1. Static: In this case, we have selected the dropdown data to be static.
2. Add New: We can add new values in the dropdown by clicking this.
3. Default Chosen List Item: We can select the default item that should be visible in the dropdown. In this case, it is "Please Select"

Note: We can create a datasource in the Sitecore content tree and attach that datasource. All the child items of the datasource will be the values of the Dropdown list.

Adding a Submit Button:

Similar to the other form elements, the submit button also has properties that can be used to change the name of the button, add CSS class, etc.

Additionally, the submit button also has a section where we can add Submit Actions. Refer to the highlighted portion in the below image:

At present we have added two submit actions to our form:

1. Save Data: This will help us to save all the submitted form data.
2. Redirect to Page: With the help of this action, we will redirect to any page as per the requirement. In this blog, I will redirect it to a Contact Us Acknowledgement page (This is a simple Sitecore Page with a message).

We have many other actions such as sending email, redirect to URL, etc. A custom submits can also be added to perform tasks as per our requirement.

How to call the Sitecore Form on a Specific Page?

Once all the required form components are added onto the canvas and submit button is configured we are ready with our Sitecore Form. The next step is to call this form.

For that we will add a new control in the Presentation Details of that Page:

1. Open the Presentation Details of the item where you want to render this Sitecore Form.
2. In Controls > Click Add > Select Mvc Form (Path: Renderings > System > Forms > Mvc Form)
3. Add the Placeholder name (The name should be the SAME that you have written in the .cshtml file to call the Sitecore Form)
4. In the Datasource field, give the path of the newly created form.

Publish all the Sitecore items. Open the page URL where you have added this form. Your new Sitecore form will be visible!!!

See you in my next blog. Till then Keep Learning and Keep Growing!! 😊