WFFM CheckboxHTML

Recently, I was working on Register form using Sitecore s Web Forms for Marketers (WFFM) module where I had to make available a checkbox field for Terms of Use and Privacy Policy. The goal is to have the hyperlink on Terms of Use and in Privacy Policy , so the user can read before checking the box.

As you can see it did not work out-of-box as I would expect. To achieve the goal and to satisfy the business requirements, I had to implement a custom WFFM checkbox and below I am going to share the steps and implementations details.

Checkbox Custom Field - Implementation

According to the best practices, I am using Helix principles on my Sitecore implementation, so I created the three different layers ( Feature, Foundation, and Project). The implementation of WFFM Custom field will be into Foundation layour through the SitecoreExtensions APS.NET project.

Then, I added the following WFFM dlls to the project through the NuGet Package Manage console. I want to call out your attention to ensure you select the right version according to your Sitecore version.

First all, I started to implement the WFFM Custom field, the CheckboxHTMLField, which inherits CheckboxField from Sitecore.Forms.Mvc.dll.

Once the field was created, I created the view that it will use to render. The cshtml file should be placed in the /Views/Form/EditorTemplates folder.

After creating the view for the component, I created the Model that WFFM will use in the form designer. It is a model which functionality is to allow the form creator to configure the text with a hyperlink for the custom Checkbox label. This class uses items from the Sitecore.Forms.Core.dll. Furthermore, the figure below shows the correspondence between CheckboxHTML class with WFFM Designer. ?

Checkbox Custom Field Configuration

After done with implementations and everything is built and compile, I procced with Sitecore configurations where I will have to create the new custom field type in the /sitecore/system/Modules/Web Forms for Marketers/Settings/Field Types/Custom location. There are three parameters that you need to know.

• Assembly: DKT.Foundation.SitecoreExtensions.dll (basically it's the project s dll).
• Class: DKT.Foundation.SitecoreExtensions.WFFM.CheckboxHTML (basically it s class model that WFFM will use in the form designer)
• MVC type: DKT.Foundation.SitecoreExtensions.WFFM.CheckBoxHTMLField, DKT.Foundation.SitecoreExtensions (it s the exactly new custom field implementation).

As the last step, you should move manually the views implementations of CheckBoxHTMLField.cshtml from \Website\Views\SitecoreExtensions\ to \Website\Views\Form\EditorTemplates\.

If everything works as I expected you should be able to have the following WFFM designer presentations as I am showing on the screenshot below once you follow up the steps: (1) Select the forms that you want to add the new CheckboxHTML field. (2) - Click on Form designer. (3) Then on the field type, you should see available the new CheckboxHTML field.

As the result, you will be able to create a custom checkbox field with a hyperlink.