Share

LinkedIn

Web Forms for Marketers: Styling How-To

Sitecore’s Web Forms for Marketers module provides a quick and easy way to create basic forms for your website.

After you install the module, put the required database in place and do some simple configuration changes, you have the ability to create forms using the built-in, easy-to-use Form Designer interface.

With Form Designer, you can quickly add fields, text and submit actions to the forms you create. You also have control over the look of your forms through the use of style sheets and classes. In this article, we will go through the basic ways to style a Web Forms for Marketers form. We will also discuss some of the styling limitations and suggest some ways to work around them.
 
Styling a Web Forms for Marketers Form

Sitecore makes it possible to control the look and feel of your forms through the use of style sheets. There are two style sheets that are used for Web Forms for Marketers forms. One is used for the general layout of the form and the other is used to specify colors. You can use the style sheets that are installed with the module, or create your own if you need more control. When you install Web Forms for Marketers, your forms are created and stored under a specified root “Form Folder” item. The Form Folder item is where you set what style sheets to use for your forms. If you create custom style sheets to use, you can assign them here.



If you create custom classes to use on your forms, those classes can be assigned to your form elements by using the “Css Class” drop-down in Form Designer interface and the class will be added to the container div for the specified form field.



By creating your own custom style sheets with custom classes within those style sheets, you can control the layout of your form fields, the size and look of your input fields, fonts and colors for your text, etc. In this way, it is possible to closely match your forms to the overall look of your website.

Limitations

Although it is possible to control the basic look and layout of your forms through the use of custom style sheets and classes, there are some limitations. A few examples are:

  • Styling the presentation of form fields and labels once validation occurs and an error is detected
  • Changing the placement or style of the title text, intro text, footer text and validation summary box

Post-Validation Styles for Form Fields and Labels

By default, the required field validator message is displayed in red after the form field. There may be times when your project’s design requires a different look. For instance, you may want the field label and input control to display in red. You can address this through the use of some simple jQuery. For each required field message, a div is added to the page after a required field error is detected with the class “scfValidatorRequired”. Using jQuery you can select elements that contain this class and modify, or you can add classes to the element’s siblings and/or parent by searching for the sibling which is a label and place a class on that element to change the font-color.

$('.scfValidatorRequired').siblings('label').addClass('required');

Or you could search for the parent element and set a general “error” class on it.

$('.scfValidatorRequired').parent('div').addClass('error');

By doing this you can achieve more detailed styling on these page elements.



Modifying the Overall Form Structure

There may be times when you need to do some kind of basic structural change to the form itself. For instance, your design may call for a piece of text to display below the form submit button. By default the footer text is coded to display between the form fields and the submit button, however you may want to change the style of the validation summary box by adding a custom class. By default this element is hardcoded to use the “scfValidationSummary” class. In order to do both of these things, you will need to modify the mark-up in the default form control. Here is how the mark-up looks:

If you decide to modify the mark-up, you will find the control in the “sitecore modules” folder:



Alternately, you could create a new control based on the default control. If you choose this option, you will need to change the “Parameters” value on the Form rendering item in Sitecore and specify your new control name. The Form rendering item resides here:

/sitecore/layout/Renderings/Modules/Web Forms for Marketers/Form

Replace the “FormTemplate” value with the path to your new control and your forms will use your custom control in place of the default.

With either of these options, you can move the mark-up elements around and add or remove classes to achieve the layout and look you want.

Forms Can Look Good

So aside from a few limitations, styling Web Forms for Marketers forms is a fairly straight-forward task. With some experimentation and attention to detail, you can achieve a look and feel that closely matches your website’s design.

Sitecore Web Forms for Marketers, Sitecore development, Sitecore custom code

Comments

Add a Comment

*
*

Please confirm you are human by typing the text you see in this image:

Jeff said: 5/1/2014 at 1:20 PM

Good post - helpful.

If I add a line to the css, how do I get it to show in the drop-down list of available css classes. I added some classes and when I load the form designer, I don't see them. I do see some that a previous developer developed custom and have tried to copy exactly what he did. No luck yet...

John said: 5/2/2014 at 8:19 AM

Hi Jeff,

You need to create an item for your class in the "Css Classes" folder which is located here:

/sitecore/system/Modules/Web Forms for Marketers/Settings/Meta data/Css Classes

Enter your class name in the Value field of the item. Once you've done this, your new class should appear in the drop-down list within the Form Designer.

Hope this helps!