Customizing Umbraco Forms themes: finding the default CSS and JS

Front-end teams like to own the markup of a form. Umbraco Forms makes that possible with themes, but there is a part that is easy to miss: where do the default theme's CSS and JavaScript come from, so you can start editing them?

How Forms themes work

Here are the basics:

• Create a folder at Views/Partials/Forms/Themes/<your-theme>.
• Copy only the files you want to change. It can be one file or the whole default theme.
• Any view that isn't in your theme folder falls back to the default theme, so you never have to copy everything.
• Your theme then appears in the theme picker, and you can also choose one when you render a form.
• Never edit the default theme files directly. Your changes would be lost on the next Forms upgrade.

The missing piece: the CSS and JS

The docs give you a zip file of the default theme's partial views. The stylesheet and script for the default theme are not in that zip. They ship inside the Forms package as static assets, so a front-end developer opening the project finds nothing to copy.

There are two ways to get them:

1. Publish the project. Run a publish to a clean folder and look inside the output.

dotnet publish -c Release -o output

The default theme's static files are then in:

output/wwwroot/App_Plugins/UmbracoForms/assets/themes/default

1. Look in your NuGet cache. The same files sit in the umbraco.forms.staticassets package, in a folder like staticwebassets/Assets/themes/default. Publishing is usually easier, because the folder structure is much easier to see.

Wiring up your own CSS and JavaScript

Once you have copied and edited the files into your own location, tell the form to use them from your theme's views. The helper methods are:

Html.SetFormThemeCssFile("~/path/to/your/style.css");
Html.AddFormThemeScriptFile("~/path/to/your/umbracoforms.js");

Be careful with the method signature. In the documentation for older versions the first helper takes the form model as its first argument, and in the latest documentation it doesn't. Check the docs for the Forms version you are on.

If you change or add scripts, copy Script.cshtml from the default theme and update its script references to point at your own files.

Two things to remember

• Keep the CSS classes the logic needs. Forms' conditional logic depends on some classes. Add your own classes, but don't remove the ones already there.
• Upgrades are the real cost. The most common frustration is working out what changed in the default theme between Forms versions. The docs provide the default theme as a zip for several versions, so keep the version you started from and compare it with the new one using any diff tool.