I’m a big Gravity Forms fan. It’s the WordPress form plugin I recommend to all my clients.
Recent versions use a new theming engine for styles, with a default theme called Orbital. I do like the fact that it offers a lot of style customizations in the Block Editor. The only problem is, you can’t save your own default preferences for these settings. You can copy your styles from one block and paste them onto another, but that’s a pretty weak substitute for just setting your defaults that you want all of your forms to use automatically.
The Gravity Forms documentation doesn’t really acknowledge this seemingly obvious need. But I did manage to find a thread in their support forums that gets right at it. There are just two problems: a) the given answer is not quite right, and b) the forums automatically lock threads after 24 hours.
As far as that second issue goes, I kind of get it; I know how much forums can be magnets for spammers. But it seems easy enough for a paid plugin to restrict forum posting access to paying customers, which should pretty much eliminate that issue.
Of course, the only reason I even cared about that is that I have a correction to address the first problem, but I can’t post it as a reply on the thread, because of the second. So I’m posting it here instead.
The problem with the answer in the forum is that it assumes the CSS code is in the body tag, but it’s not. So, here I present, the correct (well, a correct) selector for applying your own overrides to the CSS variables in the Orbital theme:
html:has(#gravity_forms_theme_framework-css)
.gform-theme--framework.gform-theme--orbital
(That’s supposed to have a space in it, not a line break, but it’s too long to fit on one line in my current site theme, and a line break is fine in CSS code formatting anyway.)
The change I made was to replace body with html at the beginning of the selector.
I’ve confirmed this works, with my main goal of overriding the default blue “accent” color with one of the colors from my client’s customized Astra theme, like this:
html:has(#gravity_forms_theme_framework-css)
.gform-theme--framework.gform-theme--orbital {
--gf-color-primary: var(--ast-global-color-2);
}
I don’t consider this a complete answer though, because a) it doesn’t change the accent color in the Block Editor sidebar, and b) that technically doesn’t matter, because when you use this CSS, the accent color in the sidebar gets ignored anyway.
Still, the goal here is mainly to impose my consistent theme style on the forms, so I’m not so concerned with the user being unable to customize the appearance. In fact, I don’t want them to be able to customize the appearance.
Ultimately, there are two features I want Gravity Forms to add, so I’ll shout them into the void here and try to will them into existence.
First, I’d like a global configuration page for the parameters of the Orbital theme, and/or for all of the default CSS variables.
Second, I’d like the ability to turn off the style tools in the Block Editor.