Css class function on a url element

How To
1

ProForms field not respecting variant styles or CSS classes

We have a Bricks component with two variants (Light and Dark) wrapping a BricksForge ProForms element. The goal is to change the background colour of form fields (URL input, text inputs, textareas) depending on which variant is selected.

What we’ve tried:

  • Applying different background colours via Bricks component variants — styles apply in the builder preview but don’t render on the frontend
  • Adding global CSS classes to each variant instance — the CSS Class field on the ProForms element doesn’t appear to propagate to the inner form fields
  • Using [data-brx-variant] CSS selectors — BricksForge doesn’t seem to output the data-brx-variant attribute on the inner <input> / <textarea> elements

The core issue: BricksForge ProForms renders its own HTML for form fields internally. Component variant attributes and CSS classes applied to the ProForms wrapper don’t reach the inner field elements.

Question: What’s the correct way to conditionally style ProForms field backgrounds per component variant? Is there a BricksForge-specific approach, or do we need a custom CSS/JS workaround?

2

Hi Gareth,

the good news is that you don’t need JS for this. A bit of custom CSS on the right element does it.

Here is how the markup is built. The Pro Forms element renders a form element, and your CSS classes and global classes from the Pro Forms element end up on that form element. Every field is its own Bricks element, rendered as a wrapper div with the class form-group, for example brxe-brf-pro-forms-field-url. The actual input or textarea sits inside that wrapper. So your class does exist in the frontend markup, just not on the input itself. You need a descendant selector.

For example, add a class like form-dark to the Pro Forms element (or to the component root) in your Dark variant, then:

.form-dark input:not([type="submit"]),
.form-dark textarea,
.form-dark select {
  background-color: #1e1e1e;
}

If you only want to target a specific field type, use its element class, e.g. .form-dark .brxe-brf-pro-forms-field-url input.

Two more things:

  1. If you have already set a background under Global Field Styles on the form, or under Style > Background on a single field, those rules are scoped to the element and may be more specific than your class rule. Either clear those settings or make your variant rule more specific.

  2. Each field also has a “CSS Class” setting. A class you enter there is put directly on the input or textarea, if you prefer to target the field itself.

I can’t say much about why the variant styles show in the builder but not on the frontend. That part is handled by Bricks’ component variants, not by Bricksforge.

Best,
Daniele