Sitecore Forms: Layouts and assets

A simplified approach

Sitecore's shiny new (newish?) forms handling solution is called Sitecore Forms, and it is included by default in Sitecore 9, i.e. it is not an add-on module. It replaces the previous forms module, Web Form for Marketers, and it comes with a with-the-times drag-n-drop interface, among other new features such as multi-page forms.

Below I will discuss some of the discrepancies between WFFM and Forms when it comes to how you present them on a page.

Form layouts and assets 

One of the changes that Sitecore has done to their form handling from WFFM to Forms is that you need to create your own forms layout, to use on pages where you want to display a form, or several forms for that matter. You can read more about this in Sitecores official docs.

Firstly, there is a slight error in the documentation,which we have confirmed with Sitecore support. The guide says to put the script and css includes in the <head> of your layout, as below.

renderassets

Web-dev savvy people such as yourselves might realize that the scripts include does not belong in the head section, and you would be right. This include should be placed in the body secton of the page.

Back to the matter at hand; In our case it was not an option having a special layout only for pages with forms, as we would use pre-built page templates (with pre-set layouts) to make it easier for the editors. We also wanted all the same assets and functionalities provided by our existing layouts on pages with forms. So we could follow Sitecores guide with the added hassle of duplicating our existing layouts, but for obvious reasons we chose not to go down that path.

We chose another, in our eyes, much simpler alternative. In practice, the "only" thing these layouts get you (aside from things you should already have in your layouts) are includes for forms-related scripts and stylesheets. At first I thought that this is why they want you to create the layouts, so that form assets are only render on pages with forms. But that's not the case. In reality, what the rendering statements include is determined by what is set on the given form item in the below fields. When the form is rendered, these assets will be stored in HttpContext.Items as key/value with their entire paths, and the above Html.RenderForm-extensions will fetch them from there and render them to the DOM as html-strings.

Asset form fields

Base path for scripts is ~\sitecore modules\Web\ExperienceForms\scripts, and for styles it is ~\sitecore modules\Web\ExperienceForms\css

So in essence, instead of form-specific layouts, you can simply add the render statements to your own existing layouts in good conscience; the RenderFormStyles to your head section, and the RenderFormScripts to your body section. Simple as. The asset paths will always be added to the http context, but they will only be fetched and rendered if you include the render statements. Just dont forget the using-statement in order to access the Forms-specific html extensions.

example_layout

This was all for now, however I will probably publish a few more Forms related posts in the near future, so stay tuned!

TL;DR

You don't need to create additional layouts specifically for forms pages. Just add the includes to your existing layouts and they will render the appropriate forms assets when on form pages. On other pages, they will do nothing.

 

15 Aug 2018, by Bonny Nilsson | 

Sitecore, Forms, Layout, Assets