Fine-tuning Form look and feel with the Custom Styles feature

The modern Form designer has so many cool features, it’s easy to miss them.

Take styling the form, for instance. At the highest level, there are two themes – dark, and light.

If you’re using tabs or accordion sections in your forms, there are also three built-in themes you can apply – which look different depending on whether you’re using dark or light modes.

You can also use the Styles section in the right-panel to define: font face, color, and size; background color; and border style, color, and weight (yes, I know my example is gruesome, but it’s impossible to miss!).

But I want to draw your attention to the “Custom styles” area in the style dialog. Custom styles allow for a lot more opportunities for defining the CSS attributes of containers and fields without actually having to write CSS.

Custom style controls include background, border, font, margin, and padding controls – and that’s just the start. Since CSS typically allows you to define all four sides of a thing individually, it’s completely possible to have padding, for instance, that’s different top to bottom or side to side.

There’s some arcane stuff included, too – things like cursor, or clip, or z-index. I’m not going to spoil your fun by telling you what everything is or what it does. Instead, I want to encourage you to check out the CSS reference page at W3Schools.com for a complete list of all the current CSS attributes and definitions – just click on the attribute to get detailed information on how to use it.

Now, I’ll be honest – there are still some things you can’t do with custom styles inside the dialog. And, there are some elements of the form – such as tab button or input fields – that you can’t change using Styles. Luckily, for those things you can still actively edit the CSS within the tool using the CSS button in the menu bar – but, that’s a topic for a different day.

If you’d like to watch a video demonstration of both custom styles and manipulating form CSS, check out Form Builder - Advanced Styling and CSS in the Ultimate Forms tutorials.