, , , , ,

The Sitecore module Webforms for Marketers is a great module: it offers a superb user experience, and its functionality is very extensible. However, even after the latest update (pdf) (january 2013) the module makes almost no use of the new HTML5 capabilities. In this series of articles I will demonstrate how to extend the WFFM module with custom field types with HTML5 functionalities.

This article I will discuss the HTML5 “placeholder” attribute. This attribute enables you to prefill the textbox with content, and let the content disappear when the user focusses on the textbox. (This functionality has also been called “Watermark“).

html5 placeholder

What we need to do is to create a simple class, that inherits from Sitecore.Form.Web.UI.Controls.SingleLineText (or MultiLineText). We are going to extend this functionality, so we add a property called “PlaceholderText”.

internal class TextBoxWithPlaceholder : SingleLineText
	[VisualFieldType(typeof(TextAreaField)), Localize]
	[VisualProperty("PlaceholderText:", 100)]
	public string PlaceholderText { get; set; }

	protected override void DoRender(HtmlTextWriter writer)
		this.textbox.Attributes.Add("placeholder", this.PlaceholderText );


textbox with placeholder

After that we add a custom Field Type item to the Wffm tree  in Sitecore. We fill in the Assembly and the Class. Do not forget to select the desired validations from the Validations field.  The Single-Line Text field type has “Count chars” and “Regex Pattern” selected by default, so we also want to select these on our custom Field Type, to achieve complete inheritance of the functionality of the Single-Line Text.

The custom Webforms for Marketers field type with a HTML5 placeholder attribute is ready for use!