Add styles and scripts to Sitecore Forms

Abstract

Add css and script files to customize your forms.

For your customized forms to function and display correctly, you must add the styles and scripts you require to Sitecore.

To add styles and scripts to Sitecore Forms:

  1. In the Content Editor, go to sitecore/Forms, click the form that you want to add a script or style to and, in the Scripts or Styles field, add the name of your custom script or style file.

    Example of the path to a script file

    Note

    If you want the script or styles to be available for all forms, you must update the settings on the standard value item: sitecore/Templates/System/Forms/Form/__Standard Values.

  2. Add custom style or script files to the following folders:

    • Styles: <siteroot>/sitecore modules/Web/ExperienceForms/css

    • Scripts : <siteroot>/sitecore modules/Web/ExperienceForms/scripts

  3. Add the following methods in your layout to render the files:

    • @Html.RenderFormStyles()

    • @Html.RenderFormScripts()

  4. Add autocomplete lists for the Form designer to use with the CSS Class and CSS Class Label fields if required.