How to Custom Style Sitecore’s Webforms for Marketers

I’m not a front end developer – I’ll be the first one to tell you that (I’m a chef!). That doesn’t mean I don’t feel the pain of being a FED, though. In the past, a really tough task for our front end team has been styling Sitecore’s Webforms For Marketers. The way these forms work, the HTML that is outputted onto the page is generated during the page load, so all of the style definitions have to be made and put onto the page beforehand. After many hours of tedious CSS tinkering, eventually the form looks the way we want and stays in the right place.

Life would be easy if you could just style the form once, but in the world of The Internet we constantly have to improve the user experience with fresh content and fresh design. So, the next form that comes along will look different and need more effort to style. The default behavior of Webforms For Marketers is to create the form starting with the “scfForm” div.  Then that div gets placed where your Sitecore placeholder resides, and styling the form from there is a tedious process. Sure, styling the fields is simple enough, but styling the form itself can be quite difficult when taking responsive design into account.

During a recent design phase of a new web form, I received a request from our front end development team to add a wrapping div tag around the form at the highest possible level.  See here:

 The scfForm gets put onto the page whenever there is a Webforms For Marketers form, but then you have to work on the design for the page you added the form to. Moving the form around the page is also complicated since the CSS is written to be in the right column, so moving to the left column requires unnecessary cleanup of all the CSS.

An easier approach is to set a div with a class that is wrapped around the scfForm element and style everything off that parent div element class. That way, if the form needs to move, it can, as long as it carries along the outer div wrapper. All the style definitions will move with it, and the form will still render correctly in its new home.  This also leaves the opportunity for copying/pasting form style definitions for other forms without having to work from scratch every time.

How It Works

I have a Sublayout user control named WebformWrapper.ascx.  That user control is very simple:

     

 

 

In the code-behind, we reach out to Sitecore for the Sublayout definition in the Presentation Details to check for a Div ID parameter. This is added through the Sublayout’s Parameters Template like so:

When the form is being added to the Presentation Details, the Div ID sets the id property of the wrapping div tag, and the front end development team can get to work styling the form.  Here it is in action:

public string DivID { get; set; }

protected void Page_Load(object sender, EventArgs e)
{
if (!String.IsNullOrEmpty(this.DivID))
litDivTemplate.Text = String.Format(litDivTemplate.Text, this.DivID);
else if (Parent is Sublayout)
{
WebformWrapperParametersWrapper parameters = new WebformWrapperParametersWrapper(Parent as Sublayout);
if (!String.IsNullOrEmpty(parameters.DivID))
{
litDivTemplate.Text = String.Format(litDivTemplate.Text, parameters.DivID);
}
}
}

 

As you can see, the code is very simple.  But it accomplishes a lot, and makes our design team’s lives that much easier. This is on my list of must-haves for Sitecore, and especially any solution that is utilizing Webforms for Marketers.

 

TAGS:
« Prev Article
Next Article »