WPZOOM Forms gives you several layers of styling, from one-click looks to custom CSS. Start at the top of this list and go only as deep as you need:
Table of Contents
Open the form in the builder and click Settings in the top bar (or Edit Form Settings in the right panel).
| Setting | Options |
|---|---|
| Submit Button Text | Any text, e.g. “Send message” |
| Submit Button Alignment | Left · Center · Right · Full (button spans the form width) |
| Labels Position | Top · Left · Hidden |
| Form Layout | Default · Horizontal · Compact |
| Form Style | Default · Minimal · Modern · Bold · Rounded · Flat · Soft · Ink · Outline · Custom Style (PRO) |
| Show required-field asterisk (*) | Adds a red * after the label of required fields |
The canvas updates live as you change these, and the settings are saved with the form — every embed of the form (shortcode, block, Elementor) uses them.
Click a style swatch under Form Style. This is how the Contact Form template looks on the front end with each one (Twenty Twenty-Five theme):
Default
Minimal
Modern
Bold
Rounded
Flat
Soft (PRO)
Ink (PRO)
Outline (PRO)
Default keeps the plugin’s neutral look and inherits fonts from your theme. The other styles set their own field borders, radius, spacing and button colours. Soft, Ink, Outline and Custom Style are available in WPZOOM Forms PRO.
Choose Custom Style to open the colour editor:
Click Done, then Save the form. The swatch under Form Style shows your five colours so you can recognise the custom form later.
Form Layout
| Default | Horizontal | Compact |
|---|---|---|
| Fields stacked, submit button below | The submit button sits beside the fields on the same row — ideal for one-field forms such as a newsletter signup (Email + Subscribe) | Removes the spacing between fields — for long forms, sidebars and footers |
Labels Position
Every field has a Width setting (Full, 1/2, 1/3, 2/3) in its General tab. Consecutive fields whose widths add up to one row are placed side by side — e.g. First name (1/2) + Last name (1/2), or City (1/3) + State (1/3) + ZIP (1/3). Fields stack on mobile automatically. Details in the Form Fields Reference.
The settings above are part of the form. When you place the form on a page you get a second, optional set of colour controls that apply to that embed only — handy when the same form sits on a light page and on a dark footer.
Contact Form by WPZOOM block (block editor)
Select the block, open the sidebar and switch to the Styles tab:
The block also supports Wide and Full alignment from its toolbar, so a form can span the full content width in block themes.
Elementor widget (“Contact Form by WPZOOM” / “Contact Form PRO by WPZOOM”, category WPZOOM Forms)
The Style tab offers sections for the Form (background, text colour, padding), Fields (border, radius, text and background colours), Labels (colour) and Button (border, radius, text and background colours).
Shortcode embeds use the form’s own settings only — use a Form Style or custom CSS to adjust them.
WPZOOM Forms → Settings → General
Click Save Settings.
For one field — select the field → Advanced tab → Additional CSS. Write selector to mean this field’s wrapper:
selector { margin-bottom: 32px; }
selector label { text-transform: uppercase; letter-spacing: .04em; }
selector input { border-width: 2px; }
You can also add a CSS Class to the field and target it from your theme.
For the whole form — add rules under Appearance → Customize → Additional CSS (or your child theme). Useful hooks:
| Selector | Matches |
|---|---|
.wpzf-form |
every WPZOOM form |
.wpzf-form.wpzf-theme-modern |
forms using the Modern style (wpzf-theme-<style>) |
.wpzf-form.wpzf-layout-compact, .wpzf-labels-left |
layout / label-position variants |
.wpzf-field--type-email |
all fields of one type (text, email, tel, textarea, select, radio, checkboxes, date, file, …) |
.wpzf-field_input_7f6bf203 |
one specific field (the Field ID from the Advanced tab) |
.wpzf-submit__btn |
the submit button |
Example — a full-width green button on one form only:
form[data-form-id="4"] .wpzf-submit__btn { background: #1f7a4d; width: 100%; }
Forms created with WPZOOM Forms 1.x keep their original
wp-block-wpzoom-forms-*classes until you open and save them in the new builder, so older custom CSS keeps working.
What’s Next?