4

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:

Form 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?

7

Did you make a split in you're 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 url's 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.

  • What you're saying makes sense -- I was able to get it in a partially working state thanks to your post, but now we're running into problems with RequireJS. Require is called in the head of our main layout, and SItecore's addition of <script> tags below it causes issues. Will keep you posted. – Marcel Jun 11 '18 at 16:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.