WFFM Custom Field – Checkbox With HTML

A common field requirement seems to be a checkbox which also allows some HTML text, such as when including a checkbox that the user agrees to some Terms & Conditions, Privacy or Legal policy. It’s usually a requirement that links to the policies are provided within the text.

There’s nothing out-of-the-box with WFFM but it’s simple enough to create a custom field.

This is a re-post of an answer I provided on Sitecore StackExchange.

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;
            }
        }
    }
}

The above will be used by the Form Designer to add additional property when you select this custom field. This class will also be used if your project utilizes ASP.Net Webforms. We are fully MVC, so note that I did not override any the Render() method. Currently it would just return the base implementation, but for the sake of simplicity and clarity we do not add provide the implementation.

The property has also be decorated with the [Localize] attribute, so if you have a multilingual implementation this allows the text to be translated.

We also need to create the 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;
			}
		}
	}
}

You’ll notice that the implementation is very similar to the base field, but we override the Text property which allows us to check if the new HtmlText property is set, if not we 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>
}

We need to add this field to WFFM, create a it 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/Custom/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.

WFFM Checkbox with HTML

WFFM Checkbox with HTML in Form Designer

There is no fancy WYSIWYG editor available from the WFFM interface, we opted for Raw HTML for the sake of simplicity which was acceptable for our editors. The checkbox will now be rendered with the links:

WFFM Checkbox with HTML

Checkbox with HTML

The code should work with WFFM MVC 8.1+, you may need to make slight modifications for earlier versions but the concept is the same.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s