Blog

Customizing WFFM in Sitecore 8

September 02, 2015 | Charlie Turano

Recently I was working on a Sitecore 8 implementation where we were using WFFM for forms and Foundation to be our responsive framework. When we started working with WFFM to build our forms, we quickly ran into issues. The HTML emitted by WFFM didn't really match our CSS classes very well, and was incompatible with Foundation. This seems to be a common problem with WFFM.

CSS Issues

There are a number of good articles written about styling WFFM, and we initially tried to follow some of the recommendations in these articles. Our CSS was built around much simpler HTML than the HTML emitted by WFFM. Trying to get this to work correctly created a number of headaches for us.

Foundation Issues

The business requirements specified a fully responsive implementation of the site, including all forms on the site. There really wasn't a good way do get the HTML from WFFM to play nicely with Foundation. This was a major problem, and it convinced us that we needed to customize the HTML generated by WFFM.

Customizing WFFM

Whenever we customize any part of Sitecore or Sitecore modules, we always try to understand what kinds of support problems we are creating when it is time to upgrade to a new version of Sitecore or the module. Ideally, we want our custom implementation to enhance the existing functionality instead of replacing the it. In our implementation, we are using the latest version of WFFM and Sitecore 8. The site is being implemented using MVC, so we are also using the MVC version of WFFM. It turns out that this made our customization process much easier then I thought it would be. The default WFFM controller rendering builds a model of the type FormModel passes this to a view called Index. Since the controller is called FormController, one of the places MVC looks for the view is /Views/Form/Index.cshtml. Looking at this file, I quickly discovered that WFFM is using MVC Editor Templates to generate all the HTML. All sites built at Hedgehog Development are designed as if we are building a multi-site implementation. This solves many problems down the road when someone wants to add additional sites to the instance of Sitecore. To help isolate our website from other sites, we use the BrainJocks MVC Areas module. Because of how MVC resolves Editor Templates, having the WFFM rendering in our area allows us to replace/create our own MVC Editor Templates for the FormModel. This prevents our changes from interfering with other sites or the default implementation of WFFM.

Creating the custom rendering

Creating a custom rendering for WFFM was relatively easy. I just copied the default rendering into our rendering folder. The placeholder settings for our pages were updated to allow the new rendering to be added instead of the default WFFM one.

Creating custom MVC Editor Templates

Creating the custom templates was a bit more difficult. There were a few steps required to get an existing form to render correctly. First, I duplicated the index.cshtml and the web.config installed by WFFM into the /Areas/[area name]/Views/Form folder. Next I added an EditorTemplates folder under new Form folder and started moving the templates from WFFM into my folder. The three main templates for a form are FormModel.cshtml, SectionModel.cshtml and FieldModel.cshtml. These needed to be customized to generate the correct HTML for Foundation. Documenting all of the functions called in the .cshtml pages would take up too much time and space. To make things simple, I preserved almost all of the C# code, and replaced the default HTML with the HTML we needed for foundation. The FormModel.cshtml template is the most complex, because it contains all of the support/validation logic for the form. Be careful changing/removing this functionality, since it make break something. FormModel.cshtml also renders the sections by rendering the sections Editor Template . The SectionModel.cshtml template was very simple to override, since it only renders the sections and then renders the fields using the field Editor Template. The HTML in this file was replaced with what we needed. The FieldModel.cshtml template was a bit more difficult. We needed to determine how validation errors were handled and figure out how/where labels were going to be rendered. We changed the HTML for this Editor Template and we were able to view some of our forms. The forms were emitting the correct HTML for Foundation and were now responsive. All other Editor Templates were moved over as needed and updated to use the components in foundation instead of their default renderings. This completed our customization of WFFM for Foundation.

Problems

Once everything was moved into our custom area, a problem was discovered. Existing forms worked great, but when the WFFM rendering is added to a page, a wizard dialog should be opened and the user is walked through the process of initializing the rendering. This wasn't working. After some investigation, it was determined that this process is handled by the Sitecore.Form.Core.Pipeline.InsertRenderings.Processors.GetDialogUrl step in the getRenderingDatasource pipeline. The pipeline is executed when a rendering is added to a page. The WFFM custom pipeline steps checks to see if the ID of the rendering matches the WFFM rendering and opens the Forms.InsertFormWizard dialog. Sometimes, it seems like Sitecore has a setting for everything. Unfortunately, in this case, it doesn't have a setting for customizing the ID of the rendering the pipeline step is watching for. The ID of the WFFM rendering is hard coded into the pipeline step. To get around this issue, I de-compiled the WFFM step and changed it to look for the ID of our new area specific rendering. I added this step to the getRenderingDatasource pipeline before the default WFFM step, which lets me open the wizard without changing the default WFFM functionality.

Additional Thoughts

I have tried this technique on Sitecore 8 Update 3,4 & 5. Since we haven't completed the implementation for this site yet, there may still be some problems with this modification. Overall, it seems like a reasonable thing to do since I'm not changing any of the default functionality of WFFM. Since all changes are localized to our implementation, WFFM can be customized for other sites in this instance of Sitecore without fear of breaking existing functionality. The biggest risk going forward is that Sitecore completely changes the way WFFM works in the future. I suspect the chances of this is relatively low, since the WFFM implementation for MVC is relatively new. The getRenderingDatasource pipeline step is a smaller risk, and needs to be revisited if the version of WFFM is changed.

Sitecore Development development WFFM sitecore development

Related Blog Posts

Sitecore to acquire Hedgehog
Hedgehog is thrilled to announce we have entered into a definitive agreement to be acquired by Sitecore.
SUGCON Europe 2019: A Hedgehog Live Chat
Hedgehog is headed for London! Our SUGCON Europe team talks sessions, SUGCON memories and shares tips for getting the most out of the conference.&nbsp;<span style="white-space: pre;"> </span>
Hedgehog Announces the Release of TDS Classic 5.8
Hedgehog announced the release of TDS Classic 5.8. The newest update now supports Azure and Visual Studio 2019.
Sitecore, Docker, SUGCON - Oh My!
Sitecore MVP Sean Holmesby took the time to talk with us about his presentation and SUGCON.
Enhanced Content Editing for Sitecore: An Avtor Live Chat
In our first product-centered live chat, the team covers Avtor, the essential Sitecore content editing tool.
Hedgehog Announces Release of Avtor
Hedgehog, a digital consultancy engineering high - performance, multi-channel solutions, today announced the release of a brand-new product called Avtor, a part of the Team Development for Sitecore Essential Collection.
How Feydra Improves Front-End Development for Sitecore
Feydra offers a more efficient modern approach to front-end development workflow for Sitecore.
Guide to Sitecore Packaging
Development of features and components requires a set of Sitecore items to be packaged - things like renderings and templates. With TDS Classic, Sitecore developers can automate the packaging process.&nbsp;
TDS Classic: Content File Sync
Content File Sync is a fantastic time saver for any Sitecore developer.
TDS Classic How-To: Perform Unattended Installation of TDS Classic for Visual Studio 2017
The TDS Classic version for Visual Studio 2017 is installed a bit differently than previous versions; the process is separated in two parts and performed by two different installers.
Sitecore Security and Strengthening Your Sitecore Platform
Improve the security of your Sitecore platform with these tips
TDS Classic 5.7 - Lightning Deploy
Lightning Deploy Mode&nbsp;can be used to enable Lightning Mode for all deployments that utilize the TDS Sitecore Connector in their configuration, improving their speed and efficiency.
TDS Classic 5.7 - Lightning Sync
Lightning Sync allows both sync and quick push operations to use TDS Classic 5.7's new Lightning Mode feature
TDS Classic 5.7 - Solution Wide Sync
A simple new feature in TDS Classic 5.7, Solution Wide Sync makes a big difference when working with many TDS Classic projects in a solution.
TDS Classic 5.7 - Lightning Mode
Lightning Mode helps to improve the speed and efficiency of both deploy and sync operations.&nbsp;This enhancement is achieved by modifying how item comparisons are performed.
Sitecore Experience Accelerator: Missing Video Description
<p>A fix for the missing Video Description field in SXA 1.4</p>
RAZL Best Practices: Lightning Mode and Deep Compare
From scheduling Razl scripts to sync changes between Production and QA environments to keeping logs from scheduled Razl scripts, our team has a few tips and tricks to make the Razl experience even better.
Azure Sitecore Deployment: Deploying to a Slot
Setting up Azure staging slots, so the next release of our project can be placed there, allows us to deploy the new code to a private website (the slot), and test it before pushing it live. We are going to script this process to make it easier for the devops team to automate.
TDS Classic Best Practices: NuGet Build Components and TDS Classic .user configs
There are certain systems and processes that you can put in place to make a TDS Classic project run more smoothly. We're highlighting the best practices that our team recommends for getting the most out of TDS Classic.
Azure Sitecore Deployment: Adding Project's Code and Items to the Azure Deployment
Modify the scripts so that the compiled LaunchSitecore site is also provisioned into the new XP environment.
TDS Classic Best Practices: Bundle Packages, Delta Builds and Delta Packages
Following TDS Classic best practices, like using Delta Builds and Delta Packages, can make the entire development experience run much more smoothly.
Azure Sitecore Deployment: Adding Custom Modules
Modify the previous install so that the initial install contains the Sitecore Package Deployer module. It is an excellent way to enable continuous integration to the website.
TDS Classic Best Practices: Validators and the Sitecore Package Deployer
TDS Classic can be used in many ways, but the goal is always the same: make development (and developers lives) easier. Whether it's using the Sitecore Package Deployer or using validators, following best practices can make your entire experience run much more smoothly.
Azure Sitecore Deployment: Preparing the Default Scripts and Packages
Preparing the default packages for a Sitecore Azure deployment and extending to add a custom module to the install.<br> <br> <br> <br> <br>
Azure Sitecore Deployment: Setting Up the Solution and VSO Build
<p>The first in our series on setting up a Sitecore instance on Azure, with an initial deployment that includes custom built modules as add-ons to the setup.</p>
Troubleshoot and Prevent Failed TDS Classic Project Builds
When building an .update package with TDS Classic, the build might fail with no additional information. From increasing log verbosity to using validators, there are ways to minimize or prevent this type of error.
TDS Classic How-To: Disable Automatic Code Generation
Code Generation is automatically triggered after every change in the TDS Project tree. If a project contains many items, users can disable this feature for their convenience.
TDS Classic Sitecore Deploy Folder
Sitecore Deploy Folder is a setting, located in the build tab of the TDS Classic Project's Properties page, and used to tell TDS Classic where the webroot is located.<br>
TDS Classic Builds on Jenkins Build Server with NuGet Packages
Our simple scenario includes 2 developers using TDS Classic and checking-in changes to source control. The Jenkins build server takes the changes and performs the build, and then deploys the created package to two Sitecore environments.
Features to Improve Sitecore Development: TDS Classic Strikes Back
Each and every feature in TDS Classic is aimed at helping developers. Whether the feature is out front or running quietly in the background the goal is always the same: make the development experience better. &nbsp;&nbsp;
Feydra and the Virtual Sandbox
Feydra virtualizes all front end assets (css, js &amp; cshtml) of a Sitecore instance. With Feydra, front-end developers can commit their changes to Source Control without requiring the intervention of a back-end developer. We call it a virtual sandbox.&nbsp;
Feydra Frequently Asked Questions
Answering a number of excellent questions we've gotten from the community regarding Feydra, including how long it takes to set up a Feydra environment and how to install the product.&nbsp;
TDS Classic Features to Improve Sitecore Development
Each version of TDS Classic comes with the same goal: to make Sitecore development and, by extension, developers, lives easier. Every feature in our products is aimed at making the process better - some of these features aren't quite as well-known as others, but they all help smooth and improve the development experience.
Deployment Properties and the Deployment Property Manager
When working with TDS Classic, you will eventually need to deploy your items to a Sitecore instance and you might not want the default behavior of every item in your TDS project deploying every time. This is where the TDS Sitecore Deployment Property Manager comes in!
Feydra: A Front-End Assessment
Feydra allowed me to start building the front-end in a very short time with no Sitecore experience, and it let me use tools that I was comfortable and familiar with.
Feydra: A Quick Start Guide
A step-by-step guide for installing, configuring and, most importantly, using Feydra from the front-end.
TDS Classic 5.6 Feature Spotlight - Prevent Deployment of Incorrect Assemblies
This feature, new to TDS Classic 5.6, will prevent a solution from deploying unless all assemblies (except the excluded assemblies we allow you to specify) match what exists in your webroot.&nbsp;
Feydra from the Front-End
Feydra eliminates common roadblocks for designers and front-end developers working on Sitecore projects by getting them up and running more quickly and allowing them to use the development environment and workflow tools they prefer.&nbsp;
FxCop Rules for Sitecore Helix
TDS How To: Install the TDS Connector for Rocks 2.0
Manually install the TDS connector for Sitecore Rocks 2.0
Create TDS Classic Custom Post Deploy Step
Team Development for Sitecore Classic version 5.5 allows developers to add post deployment steps to to their deployments and update packages. TDS Classic has used post deployment steps internally to perform a number of useful functions. Many of the developers using TDS Classic have requested the ability to add their own post deploy functionality. With the release of TDS Classic 5.5 in early 2016, this functionality is now available.
Using NuGet Packages in TDS
New to TDS 5.5 is the ability to create and consume NuGet packages in your TDS project, allowing developers to capture their Sitecore items and easily distribute them across multiple teams.
Occasional Issue Seen with TDS Installer
When upgrading to TDS 5.5.0.x from an older version and trying to load a solution with a TDS project inside, the following error might occur:
TDS: The Evolution of Auto-Sync
Auto-Sync has been described as a new feature, but in reality has existed in TDS since 2010 and has taken a new form in TDS 5.5, due to be released March 22, 2016
TDS for SC Hackathon 2016
For all those participating in the Sitecore Hackathon, check out our Habitat for TDS and some other cool surprises.
3 Critical (and Common) Sitecore Wellness Issues
There are a lot of factors that can adversely affect Sitecore and its performance. There a few common errors that we almost always uncover when running a wellness evaluation.
Config Transforms for Config Files
If you don't want to use a third party development tool for your config transforms, I have good news. Config transforms are supported natively within TDS!
Package Installer from the Command Line
The TDS package installer allows you to install packages through the command line. Learn how...<br>
Sitecore Placeholder Fallback
When implementing Sitecore websites, we sometimes run into a situation where the Content Editor wants to personalize or A/B test components that are common to multiple pages in the site. A good example of this is the header and/or navigation components. The problem we run into is that the components need to behave the same on all pages and it would be very difficult, if not impossible for content editors to maintain these components on all pages on the site. I have seen a few ways of solving this problem, but most solutions had some drawbacks that limited the capabilities of the content editor.
Robust MVC Rendering Exception Handler
While working on a recent Sitecore MVC implementation, I started to think about how Sitecore handles errors in the MVC components on a page. In past implementations, I had added a processor to the mvc.exception pipeline to route the user to the error page for the current site. This works reasonably well, but I began to notice a few drawbacks.
Context Based Datasource
Creating and maintaining your datasources in your content tree can be challenging. This blog post shows how to get Sitecore to help organize the datasources.
Context Based Datasource
Creating and maintaining your datasources in your content tree can be challenging. This blog post shows how to get Sitecore to help organize the datasources.
Predefined Roles and Creating Your Own
What are the out of the box Sitecore roles, when should you make your own, and how do you do it?
New Build for TDS 5.0!
A couple bugs were reported over the last few months. We've been able to fix the bugs and now have a stable CTP version for use.
It's finally here!
Team Development for Sitecore has finally been released go download it now!
Team Development for Sitecore Webinar
Our Sitecore MVPs Charlie and Sean recently did a demo of TDS to all Sitecore partners. We recorded the demo to share with the world.