weForms — every design
One widget styles any weForms form: four ready-made designs, fields in columns, custom checkboxes and radios, hover and focus states, the submit button and every validation message. The forms below are real weForms forms — try submitting one.
1. Four ready-made designs
Form Design sets the look in one click: Clean (bordered), Soft (filled), Underline, and Dark for dark backgrounds. The Style tab overrides any of it.
Clean — bordered (default)
Soft — filled
Underline
Dark background
2. Plugin default + your own styling
Form Design “Plugin default” keeps the form plugin’s own look; the Style tab still reaches every part — the same controls Happy Addons offers.
Plugin default, untouched
Plugin default, restyled in the Style tab
3. Fields in columns
Short fields sit side by side, per device. Text areas, choice lists and the button always take the full width.
Two columns (one on phones)
Three columns, wide gap
4. Checkboxes & radios
Custom-drawn boxes take a size, border, fill and radius; switch them off for the browser’s own. Choices can sit in a row.
Custom boxes, stacked
Custom boxes in a row, round-ish
Native checkboxes, accent colour
Bigger boxes, bold options
5. Labels & placeholders
Hide labels for placeholder-only forms (they stay available to screen readers), or style labels and the required mark.
Labels hidden — placeholders only
Small caps labels, red required mark
6. Field states
Normal, hover and focus each get their own background, border and shadow. Click into a field to see focus.
Glow on focus
Fill on focus, tall fields
7. Submit button
Fit the text, full width or a custom width; any alignment; its own typography, border, gradient, shadow and a lift on hover.
Full width
Centred pill with gradient
Outline, right aligned
Custom width, uppercase
8. Validation & messages
Preview Messages shows a sample field error, error message and success message, so they can be styled without submitting. Here they are set to “Always”.
The design’s own messages
Restyled messages
9. Form container
Background, border, radius, shadow, padding, width and position of the whole form.
Narrow card, centred
Gradient panel, white text
10. Section breaks
Headings the form plugin puts between groups of fields get their own typography, colour and spacing.
The design’s section breaks
Restyled: small caps, accent colour
Finished design: contact page
Let’s build something people love to use.
Tell us where you are and where you want to be. A designer — not a sales rep — reads every message and replies within one working day.
hello@northstudio.co
+1 555 0100 · Mon–Fri, 9–6
Finished design: newsletter on dark
The product letter, once a month.
New components, the odd essay on craft, and nothing you’ll want to unsubscribe from.
Finished design: event booking
A longer form in a card: two columns, section-style labels, inline choices and a full-width button.