How it works ?

Lets understand the way it works. The Sitecore recommended way of adding forms to a web page is to create a new layout and add the forms html helpers and refer that in existing layout.

Ref: https://doc.sitecore.com/developers/91/sitecore-experience-manager/en/add-a-form-to-a-webpage.html

RenderForm Pipeline

The Render form pipeline checks the available forms on the page and add the script, styles needed to the ViewContext with the following respective keys.

• ExperienceFormsScriptsKey
• ExperienceFormsStylesKey

Html Helpers

The Html helpers will pick up the scripts and styles from the view context and render them as script tags on the page. It will only inject if a form is present on the page. It has to be always included in the head section for proper functionality.

@Html.RenderFormStyles()

The style file names are picked up from the styles field of the form.They are split by pipe seperator and rendered as style tags.
All the style files are expected to be in the folder path
/sitecore modules/Web/ExperienceForms/css/

@Html.RenderFormScripts()

The script file names are picked up from the script field of the form. They are split by pipe seperator and rendered as script tags.
Example:
jquery.validate.min.js|jquery.validate.unobtrusive.min.js|jquery.unobtrusive-ajax.min.js|form.validate.js|form.tracking.js|form.conditions.js

All the script files are expected to be in the folder path
/sitecore modules/Web/ExperienceForms/scripts/

Note:
Sitecore Forms Conditions are rendered with the form. So it will not work if its added below the form like footer.
If a custom file needs to be added to form and all the new forms in future then it needs to be added to the standard value of
/sitecore/templates/System/Forms/Form/__Standard Values

Solution

I came up with this custom solution that will render the scripts when included on the page and not in forms editor mode. The main reason is performance we dont want to load in head section but also wanted the Sitecore conditions to work properly. It will also not load multiple times if multiple forms are added to the same page.

Common Issues

jQuery is not defined

Ensure the jQuery is refered before the forms is loaded on a page.

Sitecore Forms Conditions not working

The Condition are dynamically rendered part of the forms.cshtml. The main requirements is the jQuery and forms.conditions.js should be refered before the form loads on the page.

• Check the html and ensure the scripts are refered properly.
• Open console in the browser and check if this outputs as a function $("form").init_fxbConditions this will confirm if the forms.condition file is loaded. If this works then its just the loading sequence issue.

Submit action not working

Please refer the following article
https://bala.one/sitecore-experience-forms-bad-json-escape-sequence/