Terms Agreement checkbox for Sitecore 8 WFFM

Recently I was working on a contact form using Sitecore’s Web Forms for Marketers (WFFM) module and came across an instance that didn’t quite work out-of-the-box as I would expect.

Some background on the Sitecore instance before I get into the rest of the details. Sitecore version is 8 update 4 (rev. 150621) and the WFFM module 8.0 Update-6 (rev. 151127).

The form included a checkbox, similar to an “Agree to Terms” field that exists on many forms. Upon adding a standard checkbox field type to the form the rendered output was not what I was envisioning for an agree-to-terms type field.

Here are screenshots of the default checkbox field offered by WFFM and how it is rendered.

Field: 

Rendered:

As you can see, specifying the Title field for the component effectively duplicates the text in two different label fields for the rendered component.

To correct this and get it working like I would expect, I started using this blog post by Jeffrey Rondeau. His blog post got me moving in the right direction but during development I ran into issues with the code and view, due to the different versions of WFFM.

I started by creating the solution components first, since the Sitecore field type template will use them later on.

First the field, TermsAgreementField, which inherits CheckboxField from the Sitecore.Forms.Mvc.dll. Due to difference between the version of WFFM used in the original blog post and the version that I was working with, I didn’t need all of the items outlined.

using Sitecore.Forms.Mvc.Attributes;
using Sitecore.Forms.Mvc.Controllers.ModelBinders.FieldBinders;
using Sitecore.Forms.Mvc.Validators;
using Sitecore.Forms.Mvc.ViewModels.Fields;

namespace Domain.Infrastructure.Wffm
{
  public class TermsAgreementField : CheckboxField
  {
    public string TermsLabel { get; set; }

    [DynamicRequired(ErrorMessage = "The {0} field is required.")]
    [PropertyBinder(typeof(DefaultFieldValueBinder))]
    [ParameterName("Title")]
    public override bool Value { get; set; }
  }
}

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. I ran into problems with the view initially because I was using the @Html.CheckBox to render the checkbox. One of my Perficient colleagues, Corey Smith, helped adjust the markup and pointed out that using @Html.CheckBoxFor will essentially wire everything up for me. Below is the updated and functional view code.

@model Domain.Infrastructure.Wffm.TermsAgreementField

@if (!Model.Visible)
{
  return;
}

<div class="required-field form-group has-feedback">
  <div class="checkbox">
    <label class="control-label">
      @Html.CheckBoxFor(x => Model.Value)

      @if (!string.IsNullOrEmpty(Model.TermsLabel))
      {
        @Html.DisplayFor(x => Model.TermsLabel)
      }
    </label>
  </div>
  @if (!string.IsNullOrEmpty(Model.Information))
      {
    <span class="@Model.CssClass checkbox-info">@Html.DisplayFor(x => Model.Information)</span>
  }

  @Html.ValidationMessageFor(field => field.Value, null, new { @class = "help-block" })

</div>

After creating the view for the component, I created the Model that WFFM will use in the form designer. This is a relatively small chunk of code and it’s primary purpose is to allow the form creator to configure the text for the checkbox label. This class uses items from the Sitecore.Forms.Core.dll

using Sitecore.Form.Core.Attributes;
using Sitecore.Form.Core.Visual;
using Sitecore.Form.Web.UI.Controls;

namespace Domain.Infrastructure.Wffm
{
  public class TermsAgreement : Checkbox
  {
    [VisualProperty("Agreement Text:", 200)]
    [VisualFieldType(typeof(TextAreaField))]
    [VisualCategory("Appearance")]
    public string TermsLabel { get; set; }
  }
}

Once the 3 files from above were added to my solution and built, I added the TermsAgreement field type to Sitecore in the /sitecore/system/modules/web forms for marketers/settings/field types/simple types location. My template was setup the same as outlined in the aforementioned blog post. I do want to point out that on the field type I set the Required option in the Behavior section to true. The reason for this is because I always want this field to be required and it helps wire up the validation for the field.

The Assembly, Class, and MVC Type fields needed to be set to the components that were created in the solution. In my case:

Assembly = Domain.Infrastructure.dll

Class = Domain.Infrastructure.Wffm.TermsAgreement

MVC Type = Domain.Infrastructure.Wffm.TermsAgreementField, Domain.Infrastructure

Finally it was time to add the new field to the form.

The field type was set to ‘TermsAgreement’ and I set the Title field to ‘Confirmation’ (that allows validation to point out which field is invalid without using the longer agreement term string). Agreement Text was set to the value that I wanted to actually display on the form.

Rendered output of the field is shown below and pressing the submit button without checking the box will trigger a validation error. Note styling and alignment of the label is not complete, I’m simply showing functionality at this point.