WFFM - Custom Email Confirmation Field

In this post I will walk you through the steps you need to do to create a custom WFFM field for an email confirmation, this was a recent request by one of our clients, if you ever had a similar request or you expect to have one; this post will make you life easier.

You probably now that this is very much similar to a password confirmation WFFM field with a couple of differences like:

• The text boxes mode should be a regular text not a password.
• The labels and validation message should be related to email confirmation not password confirmation. 

We have two pieces to talk about, a programming piece and Sitecore piece, lets start with the programming:

Programming? 

You need to create a custom field by creating a new class and we will inherit the email field that already exist in WFFM, as you can see below:

As we create above the back end code, we need to create the front end by creating a view file as below:


Are we done? When I followed some online articles and questions I thought I'm done, but nope; we have to do one more thing, we need to create a user control which is a duplicate of the PasswordConfirmation.ascx and call it EmailConfiormation.ascx, and apply a slight changes like:

• Change the text box controls mode to a Single line instead of Password, noticing that this is required either if you are using WFFM MVC or WFFM webforms 
• Change labels text, this is only needed if we are using WFFM as webforms, for MVC this is controlled from within Sitecore.

Following is the full HTML for the control:

Once all of the above is done, we can now switch to Sitecore changes.


Sitecore? 

In Sitecore go the following path and duplicate the password confirmation field
/sitecore/system/Modules/Web Forms for Marketers/Settings/Field Types/Complex

see the following screenshot, as you need to update the following fields:

• Assembly, it should point to your custom code assmbly
• MVC Type, It should point to your new class that has the custom field code
• Validation, you will need to create a new regular expression to validate email address format.
• User control, This should point to the new user control with ascx extension. 

Once you apply the above you have a new email confirmation field type ready for use, as you can see from the following:

A couple more things to mention, you can find the full code on github on the following repo:

https://github.com/Mohamed-Syam/Sitecore.WFFM.Extensions.EmailConfirmationField

Also, I submitted the full package to Sitecore Marketplace where you can get it ready as a module to install, once this is published will add the link here.