So, before submitting a form, my web page loaded all the form-related scripts completely. However, after the form is submitted, the page went blank and only displaying the form element, and it got redirected to "mysite.com/formbuilder?fxb.FormItemId=xxxx". I also saw "jQuery is not defined" error in the console. Already tried the Sitecore guide to add form to a webpage, however, the issue still remains.
Any idea on why this keeps happening? FYI, I'm using Sitecore 9.1
I too have got this problem. You can try troubleshooting with the below steps that worked for me :
Make sure the default script files used in the form validations are present in webroot/scInstance.dev.local/sitecore modules/Web/ExperienceForms/scripts.
Check whether you've called the below scripts in the head section of the MVCOuterLayout.cshtml (I have added in this file under /Views/Shared) with its corresponding using namespace. Refer the full content of my MVCOuterLayout.cshtml file at the end.
@using Sitecore.ExperienceForms.Mvc.Html
<head>
@Html.RenderFormStyles()
@Html.RenderFormScripts()
</head>
In your website layout, make sure you have set the path of this outerlayout as below :
@using Sitecore.Mvc
@using Sitecore.Mvc.Presentation
@using Sitecore.Mvc.Analytics.Extensions
@model RenderingModel
@{
Layout = "Shared/MVCOuterLayout.cshtml"; // here
}
Full content of my MVCOuterLayout.cshtml
@using Sitecore.Mvc
@using Sitecore.Mvc.Analytics.Extensions
@using Sitecore.Mvc.Presentation
@using Sitecore.ExperienceForms.Mvc.Html
@model RenderingModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>@Html.Sitecore().Field("title", new { DisableWebEdit = true })</title>
@Html.RenderFormStyles()
@Html.RenderFormScripts()
</head>
<body>
@RenderBody()
</body>
</html>
EDIT : (Tip) A much simple and straight-forward approach of getting this done is to add these code directly in your website layout file itself :
WebsiteLayout.cshtml
@using ...
@using ....
@using Sitecore.ExperienceForms.Mvc.Html // required namespace
<head>
@Html.RenderFormStyles() //call them here
@Html.RenderFormScripts() //call them here
....
</head>
