WFFM How to build custom Email-Confirmation field

Question

I need to build a registration form in Sitecore 8.2 (update 4) using Web Forms For Marketers (WFFM) and MVC. How can I build email and email-confirm fields to verify that the user has typed the address correctly? This should work in exactly the same way as the built-in Password-confirmation field type.

Answer 1

There are a few things to understand when building a WFFM MVC custom field.

The first is that there is an non mvc type defined and an mvc type. You will usually need both of these. The non MVC type is used for the form designer as well as for webforms so you will usually need to implement it and define it too.

It will take a while to write this code for you so I'm going to give you some guidance on how to do it instead:

1) Copy this item here: /sitecore/system/Modules/Web Forms for Marketers/Settings/Field Types/Complex/Password-Confirmation

2) Rename the item and sub-items accordingly to Email Confirmation

3) Create a copy of the Password Confirmation field code by de-compiling the ViewModels.Fields.PasswordConfirmationField from this dll: Sitecore.Forms.Mvc.dll. Something like this:

  public class EmailConfirmationField : EmailField
  {
    [DataType(DataType.Email)]
    [DynamicCompare("Value", "EmailTitle", "ConfirmationTitle", ErrorMessage = "The {0} and {1} fields must be the same.")]
    public string Confirmation { get; set; }

    public string ConfirmationHelp { get; set; }

    public string EmailHelp { get; set; }

    public string EmailTitle { get; set; }

    public string ConfirmationTitle { get; set; }

    public EmailConfirmationField()
    {
      this.EmailTitle = "Email";
      this.ConfirmationTitle = "Confirmation";
    }
  }

4) Update to reference your code in the MVC Type field instead of the out of the box one.

5) Copy and rename the mvc view here and update the code as required: Views\Form\EditorTemplates\PasswordConfirmationField.cshtml

6) Update the validators on the Email-Confirmation item to validate the email instead of a password

7) Add your new confirmation field to your form and test it.

I haven't actually done this to test it, but this is the process you would usually follow for creating a custom field for WFFM MVC based on an existing field. It may be a bit more complex and also involve copying and updating the PasswordConfirmation class from the Sitecore.Forms.Custom.dll and referencing this instead.

This should set you along the right track though.

Here are some useful references for you too:

https://soen.ghost.io/creating-a-custom-field-type-in-wffm-for-sitecore/

http://sitecoresolutions.blogspot.co.uk/2012/01/web-forms-for-marketers-email.html (based on web forms I think so is a bit outdated)