Question

Referencing an external CSS file in the Modern Form Designer any workaround?

Forms How To Discussions Forms Layout Designer

Updated September 15

asked on June 18 • Show version history

Hi everyone,

I'm trying to apply a custom stylesheet to a form built in the Modern Form Designer. The goal is maintainability. Keep one branded CSS file as the single source of truth (hosted on our Forms server) and want several forms to reference it, instead of pasting the full stylesheet into each form's Theme/Styles panel.

What I've tried

@import url("...") inside the CSS/Styles panel
A Javascript snippet that creates a <link rel="stylesheet"> and appends it to <head>
A Custom HTML element containing the script to inject the <link>

My questions

Is there any supported way to reference an extrenal CSS files in the Modern Designer, or is inline CSS in Theme/Styles panel genuinely the only option?
For Teams that fully adopted the Modern Designer: how do you maintain shared branding CSS across many forms without manually copy-pasting the same stylesheet everywhere?
Has anyone found a workable pattern to keep stylesheet centralized?

Any guidance is appreciated,

Thanks!

4 0

Replies

replied on September 14

BUMP!

2 0

replied on September 15

Hi there,

Modern Designer is sandboxed, so it cannot access anything external to the form. So your attempts will fail, there is a workaround by modifying Forms installation files, by this way your own css files will become global sheets for all modern forms, I DO NOT recommend doing though because once Forms is upgraded/reinstalled, the modifications will be reverted, but if you want it, the workaround is:

1. Prepare your css sheets, e.g. mystyles.css, and put it under Laserfiche Forms\Forms\ModernForm\dist\renderer\

2. go to open Laserfiche Forms\Forms\Views\ModernForm\ModernFormRenderer.cshtml, find the <head> tag, add a new line in it like <link rel="stylesheet" href="@Url.Content("~/ModernForm/dist/renderer/mystyles.css")">.

By this way, all your modern forms will load this sheet while filling the form. You must be aware of it and actively maintain it for your system.

1 0

replied on September 15

Thank you for the response! Any plans to make import css a native feature in the future?

1 0

replied on September 15

I'm afraid we don't have the plan yet.

0 0

You are not allowed to follow up in this post.

Question

Question

Referencing an external CSS file in the Modern Form Designer any workaround?

Replies

Sign in to reply to this post.