Custom form field and Marketing automation field mapping in Episerver

Episerver forms add-on together with inbuilt field types represent quite good foundation to interact with visitors. However, you may find a need for custom form field after some time or little bit advanced use case. There has been written many useful articles how to make custom form field. Here are some of them:

https://blog.mathiaskunto.com/2017/04/12/episerver-forms-notes-on-creating-custom-form-fields/

https://world.episerver.com/documentation/developer-guides/forms/creating-form-element-with-validator/

https://www.david-tec.com/2016/01/building-out-a-custom-form-element-with-the-new-episerver-forms/

So, I have found a consent form field like very useful and easy to implement case.  As you (probably) know to produce single checkbox with text on the right is very straightforward operation by using “Multiply or single choice” form field. On the other hand, this field type does not allow full (HTML) text thus having an URL in the text beside a checkbox  is not achievable.

Consent field in its core contains of checkbox and rich-text field.

custom form field gui

My point here is to describe how to enable data mapping on a custom form field while utilizing any Episerver Marketing Automation NuGet package.

Prerequisites, of course, are to install Salesforce add-on as described on a link http://webhelp.episerver.com/latest/addons/marketing-automation/salesforce.htm

Below you can see source code but focus on that after you add required packages.

Form Field Model

Notice that model class, besides default interfaces, implements IUIExternalFieldMapping available in EPiServer.Forms.EditView. This is actually the point here. Implementation of the interface will add additional tab and allow data map between form field value and marketing automation platform on the other side.

Form Field View

Note: Views, by default, are located in ~/Views/Shared/ElementBlocks. This can be changed in forms config file or via source code.  More information about configuration is available on

https://world.episerver.com/documentation/developer-guides/forms/configuring-episerver-forms/

Javascript validator and value parser

Source code

The whole solution is available on github.

Conclusion

In short, Episerver forms are very easy to extend and accommodate your requirements whether your form submissions have to stay on CMS or want to share the form submission values with other applications. Stay tuned for more content.