My Relationship Status with WFFM 8.1: “It’s Complicated”. Part 1: The Email Field

I hate you, I love you.  I hate that, I love you.  Ugh, I have Gnash’s song stuck on the brain.  WFFM and I have developed a healthy love/hate sentiment after years of sharing some (low) highs and (lower) lows.  If you were to periodically ask me how my relationship with WFFM was, the simplest answer would be: “Well, it’s complicated…”.

Truth be told, WFFM is fantastic in a lot of instances. It’s a powerful and intuitive tool that allows marketers to “create simple web forms that record and report information provided by visitors to your website”.  WFFM has continually improved itself over the years and as great as it is, its limitations can be very frustrating.

Over the last six months I’ve spent a lot of time with WFFM and I’ve discovered a lot of quirks; some tolerable and others infuriating.  I plan on covering those quirks in future posts.  The latest quirk I ran into this week involves the email field’s validation.  One of the requirements I was given was to prevent the visitor’s email from containing a “+” symbol.  This will be easy, I thought.  Just a quick edit to the Regex and I can cross that task off the list.  I was sadly incorrect.

I literally changed every email related Regex I could find to “^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$”, but the input field was still using “^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\\.[A-Za-z]{2,17}$”.  I don’t know if I was just overlooking something, but I decided to go to the source and inspect WFFM’s Email Field code.  It looks like a bug and it also looks to be exclusive to the MVC side.  Everything seems to work as expected using Web Forms.

After a quick google search I stumbled upon a post titled “WFFM E-mail Field Validation Workaround” by Jason Wilkerson.  In the post he mentioned that “The proper regex string is stored in the /sitecore/system/Modules/Web Forms for Marketers/Settings/Validation/E-mail item, but a bug in the module doesn’t inject it properly.” and Jason provided a clever and simple workaround.

I could implement Jason’s solution and call it a day but that would leave me without a blog post and I’m sure you would have finished the week without experiencing the joy my “witty” and “creative” writing instills.

Once I started making this custom email field, I was a little concerned that I didn’t have a good reason to justify all this extra time I was using. Luckily I thought of a valid argument to justify my decision.  If you are passionate about adhering to Html standards and best practices, it’s important to have the correct type on the input element.

The Code

All we need is two classes.  First, we need the “CustomEmailField”.  This will be referenced on the Field Type item we will create later.

Next we need the “DynamicCustomEmailAttribute”, this is where all the magic happens.  The code is self-explanatory but I will walk through it for fun.  When the form is loaded on the page, the GetClientValidationRules method is called and returns a collection of validation rules.  When the form is submitted, ValidateFieldValue… validates the field value, and if the validation wasn’t set on the field, it defaults to DefaultEmailRegex.

Create a new Custom Email Field Item

In Sitecore, navigate to the original Email field located: /sitecore/system/Modules/Web Forms for Marketers/Settings/Field Types/Simple Types/”.  Copy that item to the “Custom” folder under the “Field Type” item.

Change the Class field from Sitecore.Form.Web.UI.Controls.Email to Sitecore.Form.Web.UI.Controls.SingleLineText so we can take advantage of the Regex options it provides.  In the MVC Type field enter the CustomEmailField’s fully qualified name.  The item should end up looking similar to this:Custom Email Field Item

Navigate to your form and open the Form Designer. Change the email field to the new Custom Email Field.
Change field type

In the left panel, locate the Validation section and select Email Address from the dropdown.  FYI, these items are located here: “/sitecore/system/Modules/Web Forms for Marketers/Settings/Meta data/Predefined Validators”
Select the validation type

Save the form, preview and test the form.  Customizing the Regex on the Email Field is now possible.

FYI: This issue still exists in Web Forms for Marketers 8.2 rev. 161129.

Feel free to leave a comment, question or suggestions.