Signup forms

Styling forms with CSS

Wynko ships a structural stylesheet only — just enough CSS to make the error messages and the help tooltip work. Everything else (colour, type, spacing, layout) is left to your theme. There’s nothing to override or undo; you’re styling on a blank slate.

Add your own class to any field

Open a field’s settings in the field editor (the gear icon) and you’ll find a CSS class box. Whatever you type there is added to that field’s wrapper, alongside Wynko’s own classes — so you can target one specific field, a group of fields, or restyle the whole form without touching a stylesheet outside your theme.

The sign-up button row has the same box, for its own class.

This means you never need !important or ID selectors to reach a field: give it a class in the editor and write a normal rule for it in your theme’s stylesheet or the Customizer’s Additional CSS panel.

Structural classes you can target

These are the classes Wynko renders. They’re stable — safe to write CSS against — but carry no visual styling of their own beyond what the error and help-tooltip mechanics require.

Class	Where it is
.wynko-form	The form’s outer wrapper
.wynko-form-{id}	Same wrapper, scoped to one form’s ID — use this to style a single form differently from others on the same site
.wynko-form__form	The <form> element itself
.wynko-form__field	Every field’s wrapper (a <p> or <fieldset>)
.wynko-form__field--email	The email field’s wrapper, in addition to .wynko-form__field
.wynko-form__field--terms	The terms-checkbox wrapper, if you’ve enabled one
.wynko-form__field--error	Added to a field’s wrapper when it fails validation
.wynko-form__label	Every field’s <label>
.wynko-form__error	The validation message shown under a field
.wynko-form__help-wrap / .wynko-form__help-toggle / .wynko-form__help	The ? help-tooltip button and its popup
.wynko-form__range-value	The live value shown next to a range/slider field
.wynko-form__actions	The wrapper around the sign-up button
.wynko-form__submit	The sign-up button itself
.wynko-form__notice	A success/failure/duplicate message, with .wynko-form__notice--success, --error, or --duplicate added depending on which

Don’t style .wynko-form__hp — it’s the spam honeypot field, and it’s deliberately hidden off-screen. Changing its visibility defeats the protection it provides.

CSS custom properties

A handful of values that the structural stylesheet itself depends on are exposed as custom properties on .wynko-form, so you can retint them without overriding whole rules:

.wynko-form {
	--wynko-bubble-bg: #1d2327;      /* help-tooltip background */
	--wynko-bubble-fg: #fff;         /* help-tooltip text colour */
	--wynko-bubble-radius: 3px;      /* help-tooltip corner radius */
	--wynko-error-accent: #d63638;   /* validation error colour */
}

Set these on .wynko-form (or on .wynko-form-{id} for one form only) in your theme’s stylesheet or the Customizer.

Where to write the CSS

Any of the usual places work, since Wynko’s markup is ordinary HTML in your page — not an iframe:

• Your theme’s stylesheet, if you’re maintaining a child theme
• Appearance → Customize → Additional CSS
• A site-wide custom CSS plugin, if that’s your workflow

There’s nothing Wynko-specific about where the CSS lives — it’s reachable by anything that can reach the rest of your page.