@Html.RenderFormScripts() and @Html.RenderFormStyles() do nothing

Question

We're using Sitecore Forms and allowing the user to add existing forms via a placeholder inside of a component. We have added the form in the placeholder and it renders as expected. Now we want to hook up the front end client side validation / styles.

The Sitecore docs say to add the following in the layout:

If you want to add a form to a page on an existing site, you must add references to the form stylesheets and JavaScript files. Add the reference @using Sitecore.ExperienceForms.Mvc.Html and in the head section add @Html.RenderFormStyles() and @Html.RenderFormScripts()

However, after viewing the page source, it's clear that no script and style references are actually being added. No errors are being thrown in the log.

I can confirm that the script files are located in /sitecore-modules/Web/ExperienceForms/scripts.

Looking at the item in the Sitecore tree, the form item itself has these fields:

It seems to me that @Html.RenderFormScripts() and @Html.RenderFormStyles() would reference these field values on page load, but somewhere along the line it's not.

Any ideas?

Answer 1

Did you make a split in your layout between outer and inner layout?

Step 3 and 4 in documentation: https://doc.sitecore.net/sitecore_experience_platform/digital_marketing/sitecore_forms/setting_up_and_configuring/add_a_form_to_a_web_page

It is important because, to make sure only to load required script and styles, Sitecore forms pushes scripts and styles URLs onto a stack during the rendering of the form. Those stacks are then written out into the html by the @Html.RenderFormScripts() and @Html.RenderFormStyles().

By using the outer layout, the body of your html (containing the forms components) is processed before the html. Thus, the forms component can push its script and styles on the stack before they are written out. If you don't use the outer layout, the stack will be empty when it is written out and filled up to late.