Thursday, November 23, 2017

A look at the new Forms module in Sitecore 9

Longtime users of the Sitecore Experience Platform will be familiar with the Web Forms For Marketers (or WFFM) module. It's main strength was the ability for content editors and marketers to create rich forms, all without developer intervention. Yet, there were often complaints when it came down to visual styling, customization around multi-page forms along with the need for conditional elements (show this text box if the user selects value X in the drop-down list).

With Sitecore 9, comes the new forms modules and when I say module, it come's out of the box with no separate install! Right away that will excite anyone that has ever had to do a Sitecore upgrade and go through the install of multiple WFFM update packages.

The Forms dashboard

After clicking on the Forms shortcut you will be taken to the new forms dashboard.

Sitecore Forms dashboard
No longer do marketers need to manage their forms via the content editor, where it can become especially difficult when there are a reasonable number of forms and even form variations. This dashboard allows for searching, sorting along with the ability to see forms created by you. The option to download all submitted data for a given form, is available here as well.

On the right hand panel, the selected form shows two key areas of information. Overview displays  statistics on creation, edit date along with where the form is actually being used. Performance has statistics and counters around views, abandonment and even error rates. Both of these features are key for quickly finding out which forms are actually being used and where there is potential loss of conversion (abandonment/error rates).

Forms performance for a given form

Creating a form

From the dashboard, it is then possible to create a new form. This could be a blank form (start from scratch) or via a template - which lets you select an existing form and create a new one based off of that.

The form creation page is a much slicker version of the old WFFM module. Here the familiar form elements are available for selection (text boxes, lists, and so on), but the new drag and drop feature makes for a much easier editing experience.

Sitecore forms drag and drop
When a field is added to the form, there are a number of settings that are available. Aside from the standard validation/field lengths, placeholder text is now supported, as is a CSS class for both the field element and it's label.

General settings for a Sitecore form field
If performance tracking has been enabled for a given form field, then the performance statistics will become available for viewing. Much like the form statistics on the Forms dashboard, this shows field level abandonment rates, error rates and average time spent on the field. This data is extremely valuable for a marketer looking to optimize a given form to lead to higher completion rates.

Performance for a form field
Two versions of a given form could also be A/B tested to see which leads to higher completion rate - this would be done by A/B testing against a goal triggered in the form's submit actions.

Once a submit button has been added onto the form, the submit actions can be selected and configured. The standard save data, page redirect and triggering of marketing items (goals, campaign activities and outcomes) is available, but much like WFFM the real power comes in plugging in a custom submit action.

Perhaps the most exciting feature of all, is the ability to add paging to your form! This has been a long requested feature and is a great way to create wizard-like forms and even make a particularly long form more bearable to the user.

The new page form element
Now a form has been created and saved, it can then be added to a page using the standard forms rendering. This of course can be achieved using both the content editor and the experience editor.

A form added to a page using the MVC Form rendering

Customization of Forms

Much like any part of the Sitecore Experience Platform, the ability to extend or customize the forms module is supported. 
  • Submit action - creation of a custom submit action allows for the data entered into the form to be used as required. Common examples of this might be sending the data to a third party CRM, or custom database.
  • Custom validation - this allows for custom and more complex validations to be done in code. A common example of this may be validating a customer number (even taking into account a field containing customer name).
  • Custom form elements - sometimes business requirements will come up that require a custom form element to be created. An example of this may be a color picker, or perhaps a custom CAPTCHA implementation.
Furthermore it is also possible to edit the output of existing fields (such as the HTML output for a text box). This is not best practice as you are editing core Sitecore files (that will be overwritten during upgrade). In some cases, simply adding styles for form elements/labels may not be enough and this option becomes necessary.

Conclusion

Overall the new Forms module available in Sitecore 9 is an impressive release, that provides an easier interface for marketers to create, manage and monitor performance of their forms. It's worth noting that the aim with the initial release of forms was to match the functionality of the current WFFM offering. No doubt in the future we are going to see some exciting features to come.

No comments:

Post a Comment