Sitecore

Customizing Web Forms for Marketers 8.0 for Sitecore Experience Editor – reusing existing forms with MVC renderings

By September 3, 2017 No Comments

Recently I was working on a Sitecore 8 solution implementation with MVC and one of the requirements from the client was to tweek the Sitecore Web Forms for Marketers (WFFM) module to be able to add pre-defined forms inside the Experience Editor (Page Editor).

As a default, after adding a new WFFM “MVC form” rendering within the Experience Editor, a popup is triggered prompting you to either “Create a new form” or copy from an existing one, whitch in most of the cases is something you don’t want as both of these options will create a new WFFM item in your Content Tree. Some disadvantages of doing this are that your form analytics will be separated and your content editors will end up duplicating the forms.

default-wffm-popup-in-experience-editor default-wffm-popup-in-experience-editor-1 default-wffm-popup-in-experience-editor-2

The solution:

Overwriting the FormController class from the Sitecore.Forms.Mvc.dll and creating a custom rendering which will further use inside the Experience Editor
The new controler action will overwrite the default behaviour and will return as a default a pre-defined form that we hardcoded with a GUID in this section. Please make sure you create your own default form and to update the form’s GUID in the code below.

I am totaly against hardcoding GUIDS but in this case that’s exactly what we wanted, to have a default form returned which’s title will inform the content editor that they need to specify a datasource or a to fill in the FormID in the controllers properties.

More than that, the new “Custom MVC form” rendering has some different properties selected to* “Open the Properties dialog box immediately”* once the controller is added to the page and it implements a different “Parameters Template” to be able to define a custom datasource for the FormID.

using System.Web.Mvc;  
using Sitecore.Data;  
using Sitecore.Data.Items;  
using Sitecore.Forms.Mvc.Controllers;  
using Sitecore.Forms.Mvc.Models; 

namespace Sitecore.Forms.Mvc.Controllers  
{
    class CustomFormController : FormController
    {
        [HttpGet]
        public override ActionResult Index()
        {
            FormModel model = this.ModelFactory.GetModel(); 

            if (model == null)
            {
                model = this.ModelFactory.GetModel(ID.Parse((object)ID.Parse("{33A0C29F-4883-4601-864E-F068FBADA645}")));
            } 
            this.FormManager.ProcessForm(this.ControllerContext, model); 
            return (ActionResult)this.View((object)model);
        }
    }
}

Custom MVC form rendering

Custom MVC WFFM form dialog in Experience Editor

Adrian Iorgu

Author Adrian Iorgu

Results-oriented and self-motivated lead engineer with a focus on delivering high-quality code and products in high traffic environments. Sitecore MVP 2016 & 2017

More posts by Adrian Iorgu

Leave a Reply