WFFM Add hyperlink to a checkbox label

Question

I am trying to implement a WFFM form with a terms and conditions style checkbox. I need the title for the checkbox to contain a hyperlink to a terms and conditions page. This doesn't seem to be possible OOTB so I assume some hack must be needed.

I am using MVC and Sitecore 8.2 rev 1 with the corresponding version of WFFM.

I tried entering html tags in the label for the checkbox but that did not work. I also tried encoding the tags e.g. <a href="google.com">t & c's</a> but no luck.

My ideas so far are:

1. Use markdown syntax in the title for the checkbox and then add some JavaScript to handle that. (Wouldn't handle Sitecore ID links).
2. Customise the Checkbox field type in WFFM (seems like quite a lot of work).

Has anyone else done this with MVC (I've seen this article http://blogs.perficient.com/microsoft/2013/08/sitecore-web-forms-for-marketers-site-terms-agreement/ but it refers to Sitecore 6.x so not sure it is relevant here?)

Answer 1

We just had the exact same requirements come up and I solved this using a custom field.

Create a new field, CheckboxWithHtml which inherits from the default checkbox and adds a new field:

using Sitecore.Form.Core.Attributes;
using Sitecore.Form.Core.Visual;

namespace MyProject.CMS.Custom.WFFM.Fields
{
    public class CheckboxWithHtml : Sitecore.Form.Web.UI.Controls.Checkbox
    {
        private string _htmlText;

        [VisualCategory("Appearance")]
        [VisualProperty("Field Text (HTML):", 400)]
        [VisualFieldType(typeof(TextAreaField))]
        [Localize]
        public string HtmlText
        {
            get {
                return !string.IsNullOrEmpty(_htmlText) ? _htmlText : base.Title;
            }
            set
            {
                _htmlText = value;
            }
        }
    }
}

Note in the above, I didn't override any render methods. If you want to utilise this for ASP.Net WebForms then you will need to override and provide implementation of these methods to use the new property.

Next create a model which will be used by MVC.

using Sitecore.Forms.Mvc.ViewModels.Fields;

namespace MyProject.CMS.Custom.WFFM.Fields
{
    public class CheckboxWithHtmlField : CheckboxField
    {
        public string HtmlText { get; set; }

        public string Text
        {
            get
            {
                return !string.IsNullOrEmpty(HtmlText) ? HtmlText : base.Title;
            }
            set
            {
                HtmlText = value;
            }
        }
    }
}

The implementation of this property is the same as before and if HtmlText is not set, it will fall back to using the default Title property.

And finally the view for this field, /Views/Form/EditorTemplates/CheckboxWithHtmlField.cshtml:

@using Sitecore.WFFM.Abstractions.Data.Enums
@using Sitecore.Forms.Mvc.Html
@model MyProject.CMS.Custom.WFFM.Fields.CheckboxWithHtmlField

@using (Html.BeginField())
{
    var cssclass = Model.FormType == FormType.Inline ? "checkbox-inline" : "checkbox";
    <div class="@cssclass">
        <label>
            @Html.CheckBoxFor(x => Model.Value)
            @Html.BootstrapText("Text")
        </label>
    </div>
}

You need to register the field in Sitecore under /sitecore/system/Modules/Web Forms for Marketers/Settings/Field Types. For example:

• Item Path: /sitecore/system/Modules/Web Forms for Marketers/Settings/Field Types/Simple Types/Checkbox with HTML Text
• Template: /sitecore/templates/Web Forms for Marketers/Field Type
• Assembly: MyProject.CMS.Custom
• Class: MyProject.CMS.Custom.WFFM.Fields.CheckboxWithHtml
• MVC Type: MyProject.CMS.Custom.WFFM.Fields.CheckboxWithHtmlField, MyProject.CMS.Custom

The field should now be available to select and an additional input box present to allow you to enter your HTML.

The above code is valid for Sitecore 8.1 Update-3. You may need to make some tweaks for Sitecore 8.2.

Answer 2

If have done this for Web Forms variant WFFM the solution was, a custom Checkbox field, inherits from the normal WFFM checkbox. And use markdown I had something like

a text with [url=/test target=new]link[/url]

And replace it in the control. Works fine but pay attention to validation handeling. In my case it was a mandatory Checkbox. I chose not displaying something like the ... field is mandatory on form submit. Because the label was not replaced at that point.