What is the issue?
If you try to use Sitecore form with SXA, you might get the following js error:
The reason about this is simple - The jQuery script not reference in the page or after the error script.
Sitecore Form have some new features in Sitecore 9.1, like condition. After compare the code with Sitecore 9.0, i found some new code in Sitecore 9.1:
As you can see, the new script is required jQuery library. But we usually put the style at the top and script at the bottom.
Follow the sitecore document to update the layout, which is doesn't work for me. It always return blank content.
There are two methods mentioned in sitecore document:
Html.RenderFormStyles()
Html.RenderFormScripts()
They are very baisc methods, just render the css and script references if they are exists in HttpContext.Items. The true is the styles and scripts reference only exists after Html.BeginRenderRouteForm method get called.
So it's impossible to render the form related styles and scripts before the form.
How to fix it?
1. Update the Forms.cshtml, replace the script. Make sure jQuery is available before script executed:
(function () {
function initialForm($) {
var $formEl = $("form[data-sc-fxb='@Model.ItemId']");
if ($formEl.length && typeof $formEl.init_fxbConditions === 'function') {
var options = @Html.RenderConditions(Model);
$formEl.init_fxbConditions(options);
}
}
window.addEventListener('load', function () {
initialForm(jQuery);
});
})();2. You can update your layout to call that 2 methods at the file bottom or you can create 2 renderings.