Load custom stylesheet into Sitecore 9 Forms

Question

I would like the Sitecore 9 Forms builder to display all elements based on the actual CSS stylesheet that the website will be using (it is NOT bootstrap).

Is there a way to tell sitecore to load up this CSS in the Form Builder? I can see that there is a Styles field in the CMS when I look at the Form however if I specify a web url to load the styles from nothing appears to happen.

Answer 1

On the form item is a field Styles

You need to fill the name of your css files splitted by "|"

The files on the disk are stored on folder:

c:\inetpub\wwwroot\yourfoldername\sitecore%20modules/Web/ExperienceForms/css/

Answer 2

Since your initial question was specifically about the Form Build application, I do not think the Styles field is the right way to go. Whatever is specified in the Styles field, all the content is going to be loaded not only in the Form Builder application but also in your live website.

Adding styles through the Styles field to your live website creates some disadvantages. They are probably not critical and most of us usually ignore them. However you have to be aware of them:

• Your custom styles will not be rendered till you also create a custom layout for your pages and add @Html.RenderFormScripts() there. In my SXA based solutions I am usually go with the default SXA layout and the requirements to customize it always create many issues for me;
• the Styles field render a css link for each file which is specified in the field. That increases the number of HTTP requests to your website and degrade performance. One of top recommendations is always combining all your styles, for forms and other website elements, together and deliver them through the only css file call;
• Style files have to be kept in the specific folder \sitecore modules\Web\ExperienceForms\css\. It is natural that we organize our solution structure according to our or business needs and best practices. It is sometimes a problem to see something conflicting with our conventions.
• You have to register your custom styles on each form item or you have to customize available out of the box __Standard Values item of the Form template. Such the customization adds additional complexity during Sitecore upgrades.

So if it is not Styles, then what is it?

As an alternative you can quite easily register a new css file in your Form Builder speak application. The steps are very simple:

• Switch to the core database in Sitecore backend
• go to item /sitecore/client/Applications/FormsBuilder/Pages/FormDesigner/PageSettings/Stylesheet
• duplicate it and give a meaningful name
• specify your css script in the Stylesheet field

• Check the Form Builder application, the script will be loaded too.

As a bonus, you can also minify and bundle all the styles for any speak application. This setting is disabled by default. However you can create a config patch file to enable minification and bundling

<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
 <sitecore>
   <settings>
     <setting name="Speak.Html.MinifyStylesheets">
       <patch:attribute name="value">true</patch:attribute>
     </setting>      
   </settings>
 </sitecore>
</configuration>

Answer 3

To load a custom CSS file for ALL forms while editing, you add the following lines to the /views/FormBuilder/Form.cshtml file:

@{
    bool isEditMode = Request.QueryString["sc_formmode"] == "edit" || Request.QueryString["sc_formmode"] == "new";
}

@if (isEditMode)
{
    <link href="/path/to/my.css" rel="stylesheet">
}

By limiting it to "editMode" the stylesheet will only be included while you are in Form Builder.