Add styles and scripts to Sitecore Forms

Abstract

Add css and script files to customize your forms.

Sitecore Forms uses css and script files located in: <siteroot>/sitecore modules/Web/ExperienceForms.

To start using custom styles and scripts in your 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.

    Scripts field in the Content Editor.

    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 your custom style or script file to one of the following folders:

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

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

  3. To render the files, you must Add the following methods to your layout:

    • @Html.RenderFormStyles()

    • @Html.RenderFormScripts()

  4. To use the custom styling in your forms, you can add the css class to the form element.