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.

WFFM Setting Form Type

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

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:

WFFM Hide Field Title

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:

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

Custom Input with Placeholder

Custom Input with Placeholder in Form Designer

And it renders as you would expect now:

Input with Placeholder

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:

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

Email field with Placeholder in Form Designer

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

Email field with Placeholder

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

WFFM Send Email Save Action field selector

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s