Improve Sitecore Web Forms for Marketers styling with Grunt

A few months ago I blogged about “Sitecore Frontend Approach – Quick Start Guide”which got some awesome feedback on Twitter.

However I noticed I’d missed something from my post which is pretty important to SItecore Frontend developers…. It’s a question I get asked a lot about at work and that is…

What’s the best way to add custom styles to Web Forms for Marketers?

To answer this question I need to start at the beginning…

The Old Way

When I first started working with Web Forms For Marketers (WFFM) I used to create a reset stylesheet (normalize.css) which had all the default WFFM CSS classes defined; a copy and paste of the default.css that’s installed with WFFM with some modifications to LESSify the file.

I would strip this file back to it’s bare bones and start adding in project specific styles. This worked well for most projects. However, I would sometimes have to override styles with !importants (which is bad) and have to repeat styles in two different locations one for my “base forms” LESS partial and another for my “WFFM styles”.

This process would always take considerable time and I always disliked the fact I was loading in my main forms styles and the WFFM specific styles. I would be making two HTTP requests one for the default WFFM stylesheet and another for my custom styles, which were nearly identical and the whole process just felt messy.

So I took a step back on a recent project and re-planned my WFFM workflow and wrote a list of goals wanted to achieve.

  1. Streamline workflow process
  2. Use built in WFFM functionality
  3. Reduce repeated styles
  4. Reduce the WFFM output file size

Streamline Workflow Process

Streamlining the workflow process was helped by using a task runner. Within the company I work for we used to use “Web Essentials” for Visual Studio which did a good enough job at the time but quickly became out-dated and support started to wither away.

We moved task running workflow over to Grunt and had to address some of our build processes. That gave me the opportunity to try out a some new workflow methods and make things easier for our frontend team.

So, I created a “WFFM” task which would:-

  • Compile my “_web-forms.less”
  • Run the file through a auto-prefixer
  • Minify the output CSS file
  • Copy the CSS file to the Sitecore Web Forms for Marketers folder directory

To give an example of my Grunt setup I’ve included some code snippets.

The folder structure:

Example gruntfile.js (This is the cut down version):

The package.json file:

The LESS.js configuration:

The copy.js configuration:

Use Built in WFFM Functionality

If you’re a frontend developer new to Sitecore, styling WFFM can be a little daunting and feel very “hacky” when writing your stylesheets, but this section will help you on your way to creating custom WFFM stylesheets (Win!)..

To create the custom WFFM stylesheet you need to navigate to:

/sitecore/system/Modules/Web Forms for Marketers/Settings/Meta data/Themes/ or {A7776ACD-88D9-4D2D-87BC-E73A1A1F6259}

Then create a new list item (/sitecore/templates/Web Forms for Marketers/Meta Data/List Item – {18319B48-5D68-4418-A2CF-418D911A5F72}) and name it something meaningful to your project.

In this example I named mine “example-form” (which is not meaningful at all).

web-forms-themes

Then create your custom WFFM folder inside the Sitecore folder structure and select from the theme drop down the newly create “example-form” style.

This will inject the example-form.css file into the closingtag when a WFFM is added to a page.

web-forms-custom-style

Reduce Repeated Styles

As mentioned in “The Old Way…” When I created a custom WFFM stylesheet I would end up with duplicated styles and a whole lot of bloated CSS which didn’t really perform as well as I wanted.

There are a few caveats to WFFM and that is WFFM will load in a few CSS and JS files into the main layout separately which creates those pesky additional HTTP requests which I would like to avoid, however that bit is out of my control (This is not an issue with HTTP2).

To try and improve the performance I avoided using LESS mixins and started to use “@extend()” methods instead (LESS Extend Explained) to try and use the code I had already written in my base forms LESS partial.

* These code snippets have been stripped back as the files had a lot of selectors

Example of the base forms LESS partial:

Code snippet of the WFFM LESS partial:

When I run the Grunt command “Grunt wffm”, this generates a base set of form styles in my main.css file look something like this:

Inside my inetpub directory /sitecore modules/Shell\Web Forms for Marketers/Themes/ a file would be generated for properties specifically required for WFFM (mainly flexbox properties).

This would reduce the amount of repeated styles as all WFFM classes would be extended to my base form stylesheet which my look like a lot of selectors however that performs better than having repeated styles using the mixin LESS function.

Reduce the Web Forms for Marketers CSS Output File Size

When you first install WFFM in Sitecore, WFFM bundles you with a few CSS files to get you up and running with WFFM. For me these stylesheets should never be used in production and should be treated as a guide for all the CSS selectors that are in WFFM.

The main file of concern for this topic is default.css. This file is around 21kb without minification, you also have to add into consideration the left, right or top orientation styles which are roughly 8kb giving us a total size of 29kb.

That’s 29kb un-minified (minified is around 12kb) of just WFFM styles not including any base form styling you may have to do in a project. I may be being picky but that is an extra 29kb of repeated styles I’ve already declared in my base forms LESS partial why repeat this code.

After achieving goals 1 – 3 on my checklist, goal 4 fell into place. After extending to my WFFM styles to my base form styles and only applying styles which I needed specifically for WFFM ended up being 9kb unminified.

That’s a 68.97% reduction in file size which in web performance is a massive saving, once you apply minification and GZipping you would be looking at around 4 to 5 kb for a production ready file.

I hope reading this blog post helped you with your web forms for marketers workflow. Happy coding; may the forms be with you!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s