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, navigate 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.

    FORMS-scripts.png

    Note

    If you want the script and/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 in 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.