Appearance
Styling forms
A form's structure is set in the builder. Its appearance is set where you place it — so the same form can look one way in a sidebar and another way on a landing page.
The VX Form block, the Elementor widget, and the Bricks element offer one shared set of controls. In Elementor they sit on the Style tab; in the block editor and Bricks they are in the element's own settings.
The eight groups
| Group | What it covers |
|---|---|
| Layout | Space between fields, space under labels, form width, accent color |
| Labels | Color, size, weight, the required mark, and heading color and size |
| Inputs | Text color and size, placeholder color, background, border color and width, corner radius, padding, focus border, and the prefix/suffix/icon boxes |
| Choices, switches, pickers | Choice text color and size, checked color, checkbox size |
| Help text and password rules | The hint under an input, and the password checklist |
| Upload area | The drop zone |
| Submit button | Everything about the button |
| Messages, notices, links | Confirmations, errors, and the links under a login form |
Accent color
One control worth knowing on its own. Accent color under Layout drives the required marks, focus rings, switches, checkboxes, and the chips in relation and term pickers — so matching a form to a brand is usually one setting, not twenty.
Where the styles land
Controls write CSS custom properties on the form's own wrapper (--vxm-form-gap, --vxm-form-accent, --vxm-form-radius, and the rest) rather than blanket rules. Two forms on one page style independently, and a theme's own input styles are overridden only where you actually set something.
Styling beyond the controls
Every part of the form has a stable class:
| Class | What it is |
|---|---|
.vxm-form | The form |
.vxm-form--product | A product options form |
.vxm-field | One field |
.vxm-field--<type> | One field, by type — .vxm-field--select, .vxm-field--file |
.vxm-field.is-half | A half-width field |
.vxm-field-label | A label |
.vxm-req | The required mark |
.vxm-affix | A prefix, suffix, or icon box |
.vxm-choice | One choice in a radio or checkbox group |
Each field also carries data-key with its field key, so a single field can be targeted without depending on its position.
The builder draws what the front end draws
The Build tab renders fields with the front end's own stylesheet, so what you arrange is what a visitor meets. Your placement styles are not applied there — check those in Settings → Preview, or on the page itself.