Build WFFM MVC Custom Field

As you probably know Sitecore announced that Sitecore forms will become the new generation of forms used under Sitecore and it will be built in into the platform, the Sitecore forms will replace WFFM module but WFFM will be there in Sitecore 9 and for a short time next, in this blog post I will show you how you can create a custom WFFM field under MVC.

In a recent project I worked a client ask some customization for the file upload control, adding some custom fields and the back-end logic for this field. Following are the steps that you need to follow to create a custom MVC WFFM field and as example lets assume that we will create a custom file upload control:

Step 1: Sitecore Item

Go to Sitecore client and browse to the following path:

/sitecore/system/Modules/Web Forms for Marketers/Settings/Field Types/

Create a new folder called “Custom” and under this new folder create a new item from the following template: /sitecore/templates/Web Forms for Marketers/Field Type

See the following screenshot for more information:

Step 2: Fill Sitecore Item Data Section

For the new created item, we need to fill the following information in the “Data” Section:

• Assembly: this text field should be filled with you dynamic link library name example “yourlibrarty.dll”
• Class: this text field should be filled with the full name of the class that is inherited from “Sitecore.Form.Web.UI.Controls.YourInheritedControl”, so example if you want to customize file upload control, this class should be inherited from “Sitecore.Form.Web.UI.Controls.UploadFile”,

see the following screenshot for more information:

• MVC Type: this text field should be filled with the full name of your class that will inherit from “Sitecore.Forms.Mvc.ViewModels.Fields.FileUploadField” as example. Following screenshot for the fields that we need to fill:

Step 3: Backend Code

First part of the code is to create the control class, following is a code example for it, as you can see there is a custom property property, this will be displayed in the validation section when you select this new field in the form designer window under Sitecore:

Second part is to create your custom field MVC type as following:

The last part is to create a custom validator class in case we will use this custom property for validation, see the following code:

Step 4: Create the MVC view

Now for our custom field we need to create a custom MVC view, see the following code, pay attention to the model of the view:

Now you can use your new MVC WFFM field, and you will be able to set the custom property when you open the WFFM form designer.

Hope this will help. If you try it let me know if you have any comments or additions.