Forming Forms doesn’t ship a design. It uses the block editor’s own controls and a handful of layout rules, so a form looks like the rest of your site from the moment you insert it — and everything you change in theme.json reaches it too.
Use the editor’s design controls
Select the Form block, or any individual field, and the sidebar gives you:
| Control | Form block | Field blocks |
|---|---|---|
| Text & background color | ✔ (plus gradients) | ✔ |
| Typography (size, line height, font family) | ✔ | ✔ (font family on Submit) |
| Border (color, style, width, radius) | ✔ | ✔ |
| Shadow | ✔ | — |
| Padding & margin | ✔ | ✔ |
| Block spacing (gap between fields) | ✔ | — |
| Wide / full alignment | ✔ | — |
| HTML anchor | ✔ | — |
Typography set on the Form block is inherited by the fields inside, so you usually style once at the top and adjust only what stands out — the Submit button, most often.
Laying fields out in columns
Each field has a Width preset in its Field Settings panel: Full width, Three quarters, Two thirds, Half, One third, One quarter.
Fields flow into a row and wrap when they run out of space, so widths compose the way you’d expect:
- Two Half fields → a two-column row (First name / Last name).
- Three One third fields → a three-column row.
- A Two thirds and a One third → an uneven pair.
The space between fields — horizontally and vertically — is the Form block’s Block spacing value.
Widths are proportional, not fixed pixels, so a two-column row stays a two-column row at any container width. If you need a genuine mobile breakpoint (stacking below 600px, say), add a media query in your theme against .forming-field.
The CSS classes Forming Forms outputs
Everything is prefixed forming-, so it’s safe to target from your theme or the site’s Additional CSS:
| Class | Element |
|---|---|
.forming-form | The <form> element |
.forming-form__fields | The flex container holding the fields |
.forming-form__response | The success/error message area (an ARIA live region) |
.forming-form__response.is-success / .is-error | Response state |
.forming-form.is-submitting | On the form while a submission is in flight |
.forming-field | A field wrapper |
.forming-field--text, --email, --select, … | Wrapper modifier per field type |
.forming-field__label | The field label |
.forming-field__required | The red asterisk on required fields |
.forming-field__input | Inputs, textareas and selects |
.forming-field__textarea, .forming-field__select, .forming-field__checkbox | Type-specific control classes |
.forming-field__group | The <fieldset> around radio and multi-checkbox groups |
.forming-field__group--inline | A choice group set to the Inline layout |
.forming-field__choice--other, .forming-field__other | The “Other” choice and its text box |
.forming-field__counter | A textarea’s character counter (.is-limit once the maximum is reached) |
.forming-field__choice | One radio/checkbox option row |
.forming-field__consent | A single consent checkbox row |
.forming-field__help | Help text |
.forming-field__error | A validation message under a field |
.forming-field--captcha | The CAPTCHA widget’s wrapper |
.forming-field.has-error | On a field wrapper that failed validation |
.forming-field__submit | The submit button |
Two custom properties drive the layout, and you can override either:
--forming-gap— the gap between fields, set from the Form block’s Block spacing.--forming-field-width— a field’s width percentage, set from its Width preset.
/* Stack every field on small screens. */
@media (max-width: 600px) {
.forming-field {
flex-basis: 100%;
}
}
/* Give inputs a consistent height without touching the block controls. */
.forming-field__input {
padding: 0.6em 0.8em;
}What the plugin styles for you
Deliberately very little: the field row layout, label and help-text spacing, full-width inputs, the error color (#d63638, WordPress’s own red), the visually hidden honeypot, and a dimmed form while submitting. Colors, fonts, borders and spacing are left to your theme and to the block controls — so there’s no specificity war to win.
Pro fields
Forming Pro’s fields use the same .forming-field wrapper, label, help and error classes, so the rules above apply to them too. Their own parts are prefixed forming-pro-, for example .forming-pro-rating and .forming-pro-scale.