I have a Sitecore Form that is working fine on one SXA site. However, if try to use the same form on another site then on the click of submit button, it's redirecting to the Formbuilder page. Also, I checked the page source that default Form CSS and JS like jquery-3.4.1.min.js are not there. Any solution for it?
Basically the default Sitecore Forms JS files should be present/referenced when you inspect or view the page source as below:
In your case, you said these JS files are not present. So, you need to call the
@Html.RenderFormScripts() before the end of the body tag and see if the above script files are added to the page. Now you should be able to submit the form successfully without any problems.
This approach has worked for me when calling
@Html.RenderFormScripts() in the head section did not add the default JS files to the page html. This maybe due to other scripts that are referenced in the beginning of the head section.
So, the layout should now look like this :
@using Sitecore.ExperienceForms.Mvc.Html <!DOCTYPE html> <html> <head> @Html.RenderFormStyles() @Html.Sitecore().VisitorIdentification() . . . . . . . </head> <body> . . . . . @Html.RenderFormScripts() </body> </html>
As you mentioned, you are using this Sitecore Form on another SXA website and on this new page, you did not see default CSS and JS. Make sure you're following all the below steps to add a form to a page:
- Open the Toolbox. In the Forms section, select and drag the Sitecore Form Wrapper rendering to the relevant placeholder.
- After that, drag an Mvc Form rendering to the Sitecore Forms Wrapper.
After dragging the Mvc Form onto the page, In the Select the Associated Content dialog box, select the form that you want to display on the page and click OK. The form is now displayed on the page.
In the Experience Editor, click Partial Design and click Metadata. In the SXA Toolbox, in the Forms category, drag and drop the Forms Scripts component before the closing /body tag of the page.