WFFM Custom Fields – Input and Email Fields with Placeholder Text

Another common field type on the wish list is an input field with placeholder text. Most browsers support this without the need to use any JavaScript libraries by setting an attribute on your input field like so:

<input type="text" name="firstname" placeholder="First Name">

So very useful to provide hints for the type of format the field is expecting, such as email addresses or telephone number formats.

WFFM does provide this functionality out-of-the-box, although it’s not something we have found useful due to the implemenation, so we opt for a custom field instead.

Placeholder fields with WFFM

If you dig into the MVC implementation of the Single Line Text field you stumble upon code that sets the placeholder attribute. However, you must set the Form Type to Inline, you must set this from the Content Editor, the option is not exposed via the Form Designer.

Inline Form Type

This in itself is an issue if you are designing for Experience Editor first. It does have a knock-on effect on some of the other field types as well, the setting applies to the whole form, not individual fields.

The rendered output now looks like this:

Default Input Field with Placeholder

Oops. The field title is also used in the placeholder text. The repetition is a little bit pointless and looks odd. You can hide the title by adding a false parameter to the field from the Content Editor. Not very marketer friendly though:

Hide Field Title

Custom Input field with Placeholder Text field

Let’s create a custom field to make this cleaner, allow the placeholder text to be set separately from the title text and also allow it to be editable from the Form Designer like the other field properties:

	using System.ComponentModel;
	using Sitecore.Form.Core.Attributes;
	namespace MyProject.CMS.Custom.WFFM.Fields
	{
	public class PlaceholderInput : Sitecore.Form.Web.UI.Controls.SingleLineText
	{
	[DefaultValue("")]
	[VisualCategory("Appearance")]
	[VisualProperty("Placeholder Text:", 200)]
	[Localize]
	public string PlaceholderText { get; set; }
	}
	}

view raw

PlaceholderInput.cs

hosted with ❤ by GitHub

	using System.ComponentModel;
	using Sitecore.Forms.Mvc.ViewModels.Fields;
	namespace MyProject.CMS.Custom.WFFM.Fields
	{
	public class PlaceholderInputField : SingleLineTextField
	{
	[DefaultValue("")]
	public string PlaceholderText { get; set; }
	}
	}

view raw

PlaceholderInputField.cs

hosted with ❤ by GitHub

	@using Sitecore.Forms.Mvc.Html
	@model MyProject.CMS.Custom.WFFM.Fields
	@using (Html.BeginField())
	{
	@Html.Editor("Value", new { FieldModel = Model, htmlAttributes = new { placeholder = Model.PlaceholderText } })
	}

view raw

PlaceholderInputField.cshtml

hosted with ❤ by GitHub

Again, this provides us an additional Placeholder Text property in the Form Designer:

Custom Input with Placeholder in Form Designer

And it renders as you would expect now:

Input with Placeholder

Custom Email field with Placeholder Text field

This is pretty much a copy of the Input field except we inherit from Email:

	using System.ComponentModel;
	using Sitecore.Form.Core.Attributes;
	namespace MyProject.CMS.Custom.WFFM.Fields
	{
	public class EmailPlaceholder : Sitecore.Form.Web.UI.Controls.Email
	{
	public new string Text
	{
	get { return this.textbox.Text; }
	set { this.textbox.Text = value; }
	}
	[DefaultValue("")]
	[VisualCategory("Appearance")]
	[VisualProperty("Placeholder Text:", 200)]
	[Localize]
	public string PlaceholderText { get; set; }
	}
	}

view raw

EmailPlaceholder.cs

hosted with ❤ by GitHub

	using System.ComponentModel;
	using Sitecore.Forms.Mvc.ViewModels.Fields;
	namespace MyProject.CMS.Custom.WFFM.Fields
	{
	public class EmailPlaceholderField : EmailField
	{
	[DefaultValue("")]
	public string PlaceholderText { get; set; }
	}
	}

view raw

EmailPlaceholderField.cs

hosted with ❤ by GitHub

	@using Sitecore.Forms.Mvc.Html
	@model MyProject.CMS.Custom.WFFM.Fields
	@using (Html.BeginField())
	{
	@Html.Editor("Value", new { FieldModel = Model, htmlAttributes = new { placeholder = Model.PlaceholderText } })
	}

view raw

EmailPlaceholderField.cshtml

hosted with ❤ by GitHub

Again, this provides us an additional Placeholder Text property in the Form Designer. We have also hidden the base implementation of the Text property, essentially removing the ability to provide a default value which did not make sense to us. Besides, the original Email field is still available if they want that:

Email field with Placeholder in Form Designer

And much like the previous field, it renders in the same way:

Email field with Placeholder

Don’t forget to hook up the field in Sitecore, it’s the same process as always –
Create item 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/Label
– Template: /sitecore/templates/Web Forms for Marketers/Field Type
– Assembly: MyProject.CMS.Custom
– Class: MyProject.CMS.Custom.WFFM.Fields.{Class}
– MVC Type: MyProject.CMS.Custom.WFFM.Fields.{Field Class}, MyProject.CMS.Custom

Custom email field in Send Email Save Action selection

Now that we have a custom email field, you may want to use this from the Send Email Message Save Action. You might run in to the problem that any fields using a custom type are not available to select from the

You can specify the field types that should be displayed in the selector in the QueryString field:

AllowedToTypes={84ABDA34-F9B1-4D3A-A69B-E28F39697069}|{1D2C0726-D622-4989-B545-4C37A63B97BB}

The first GUID if the default Email field. Other valid parameters include AllowedToTypes, AllowedFromTypes, AllowedCCTypes and AllowedSubjectTypes. You can find more details in this post by Eric Stroll

WFFM Send Email Save Action field selector