ACSS has a full form styling section built around WS Forms, letting you control field colors, borders, labels, help text, validation states, and more from one place. In ACSS 4.x, support for Fluent Forms (and all other form plugins besides WS Forms) was dropped, leaving Fluent Forms users without a styling integration. This snippet bridges that gap by mapping ACSS’s WS Forms CSS variables to Fluent Forms selectors, so your ACSS form settings apply to Fluent Forms just like they would to WS Forms.

Coverage isn’t guaranteed to be 100%, and since this stylesheet is adapted from WS Forms rather than built specifically for Fluent Forms, it never will be. That said, in practice it handles the vast majority of styling, including inputs, textareas, selects, checkboxes, radio buttons, range sliders, prefixes/suffixes, labels, help text, validation errors, tooltips, multi-step progress, and more. If you’re doing anything especially custom, you may need some specific overrides, but for standard form builds this gets you very far.

If you run into anything that isn’t styling correctly, shoot me an email and I’ll look into adding a fix.

Requirements: ACSS 4.0 RC2+ with the “Load Form Tokens Globally” toggle enabled.

How It Works

The ACSS form section outputs a set of CSS custom properties under --wsf-* namespacing. Those variables were written to target WS Forms, but they’re just CSS variables, so they’ll work on any selector you point them at. This stylesheet takes those variables and applies them to the corresponding Fluent Forms classes. The “Load Form Tokens Globally” toggle in ACSS 4.0 RC2+ is what makes this possible, as it moves those tokens to :root so they’re available outside of WS Forms contexts – by my request 😉

At the top of the stylesheet, you’ll also find three color variables mapped to your ACSS palette. Update these to match your preferred ACSS color tokens if needed.

CSS

On to the Code!

A couple of the button styles use the ACSS mixins (btn(primary) and btn(secondary)), so this needs to be added somewhere that processes ACSS SCSS. Your options are:

Either approach works. The second keeps things a bit more organized if you prefer to manage your form styles separately.

CSS