Create a custom color, theme, and rule set for a web form

Last updated Thursday, February 23, 2017 in Web Forms for Marketers for Content Author, Developer

In the Web Forms for Marketers module, you can change the theme, color, and style of web forms and MVC forms, or you can create your own custom themes, color schemes, and CSS rule sets to apply to your forms and form fields.

For each custom CSS theme or color, you must create one .css file. If you want to customize form fields, you must create a custom CSS rule set and assign one or more CSS style attributes. For example, you can change the text alignment on a form, or specify a font weight or font style.

This topic describes how to:

Create a custom CSS color or theme

To change how UI elements look, you can create custom CSS colors and themes.

To create a custom CSS color or theme:

  1. In a text editor:
    • To create a custom CSS color, in the Colors folder (\Website\sitecore modules\Shell\Web Forms for Marketers\Themes\Colors)edit the Default.css file and add your custom CSS code to the style sheets.
    • To create a custom CSS theme, in the Themes folder (\Website\sitecore modules\Shell\Web Forms for Marketers\Themes), edit the Default.css file and add your custom CSS code to the style sheets
  2. Save the file with a .css extension, in either the Themes or Colors folder. For example: mycustomtheme.css.

Note

For MVC forms, the Web Forms for Marketers module provides support for Bootstrap by default, and you can load CSS styles, including Bootstrap themes, in the same way as scripts – either automatically or by using bundles.

If you do not want to load the default Bootstrap theme, in the \Website\App_Config\Include\ Sitecore.MvcForms.config file, set the WFM.EnableBootstrapCssRendering setting to false.

  1. In the Content Editor, in the content tree, navigate to and expand the Meta data folder (sitecore/System/Modules/Web Forms for Marketers/Settings/Meta data).
  2. Click either the Themes or Colors item.
  3. In the right pane, click List Item and in the Message dialog box, enter the same name as the CSS file from step 2 but without the file extension. For example: mycustomtheme.
  4. Click OK.

Create a custom CSS rule set

A CSS rule set consists of a class selector and a set of attributes. In Sitecore, you can use the CSS class property to control the style of individual form fields. The CSS class property is available to all form fields.

To create a custom CSS rule set:

  1. In a text editor, in the Themes folder (Website\sitecore modules\Shell\Web Forms for Marketers\Themes), edit the custom.css file and add your custom CSS rule set. For example:

    Picture 8

  2. In the Content Editor, in the content tree, navigate to the CSS Classes folder (sitecore/System/Modules/Web Forms for Marketers/Settings/Meta data/CSS Classes) and in the right pane, click Extended List Item.

Note

For every custom CSS rule set, you must create a new item based on the Extended List Item template in the CSS Classes folder.

  1. Click OK.
  2. In the Message dialog box, enter a name for the new item and then click OK.
  3. In the right pane, in the Data section, in the Value field, enter the name of the CSS class that you defined in step 1, for example, MyBorderedTextArea, and then click Save.

    Picture 2

You can now apply your custom CSS class to any form field in the Form Designer.

Picture 1

Send feedback about the documentation to docsite@sitecore.net.