Web developers wiki ASP.NET Sitecore Sharepoint Kentico by Evident Interactive

Webforms for Marketers: Incorrect styling

Modified: 2015/05/07 12:31 by vanthoog - Categorized as: Sitecore
Recently we noticed that on some pages containing a Sitecore WFM (WebForms for Marketers) form, the styling was incorrect.

When analyzing this problem the first thing we noticed was that the references to the WFM stylesheets were missing. When viewing the html source of a page containing a WFM form you will notice that shortly after the form element there will be a section of HTML code similar to the following:

<link href="/sitecore%20modules/shell/Web%20Forms%20for%20Marketers/themes/Default.css?v=17072012" rel="stylesheet" type="text/css" />
<link href="/sitecore%20modules/shell/Web%20Forms%20for%20Marketers/themes/colors//jquery-ui.custom.Default.css" rel="stylesheet" type="text/css" />
<link href="/sitecore%20modules/shell/Web%20Forms%20for%20Marketers/themes/colors/Default.css" rel="stylesheet" type="text/css" />
<link href="/sitecore%20modules/shell/Web%20Forms%20for%20Marketers/themes/Custom.css" rel="stylesheet" type="text/css" />
<link href="/layouts/system/visitoridentificationextension.aspx" rel="stylesheet" type="text/css" />
<script src="/sitecore modules/web/web forms for marketers/scripts/jquery.js" type="text/javascript"></script>
<script src="/sitecore modules/web/web forms for marketers/scripts/jquery-ui.min.js" type="text/javascript"></script>
<script src="/sitecore modules/web/web forms for marketers/scripts/jquery-ui-i18n.js" type="text/javascript"></script>
<script src="/sitecore modules/web/web forms for marketers/scripts/json2.min.js" type="text/javascript"></script>
<script src="/sitecore modules/web/web forms for marketers/scripts/head.load.min.js" type="text/javascript"></script>
<script src="/sitecore modules/web/web forms for marketers/scripts/sc.webform.js?v=17072012" type="text/javascript"></script>

This section of HTML code was missing in the pages with the incorrect styling.

Further investigation showed that after resetting the application pool the first hit on such a page was successful, meaning that the styling was in fact correct. Only subsequent hits resulted in this problem.

And finally we noticed that when the styling was incorrect, it was in fact impossible to submit the form. That is, after submitting the form the form was displayed again and not the confirmation message.

These symptoms suggested that this issue is caused by Sitecore caching. And this was in fact the case. On the sublayout containing the placeholder used by WFM forms caching had been enabled. After disabling caching of this sublayout all problems were gone: the styling was correct again and the form could be submitted again.

So, in brief, never cache sublayouts containing a placeholder used by WFM!

Note: This information is based on Sitecore v7.2 and WFM v2.4. It was not tested in other versions of Sitecore and WFM.

 © Evident Interactive BV