Styling & Themes

Default Styling

SkunkForms ships with a clean, modern default style that works with any WordPress theme. Forms automatically inherit your site's fonts and adapt to your colour scheme.

No configuration needed — it just looks right out of the box.

Visual Customisation

Every form has a Style panel in the block sidebar with these options:

Form Layout

• Single column — fields stack vertically (default)
• Two column — fields side by side on desktop, stacked on mobile
• Inline — all fields in a row (great for newsletter signups)

Colours

• Primary colour — buttons, focus rings, active states
• Background — form container background
• Text colour — labels and input text
• Border colour — input borders

Typography

• Label size — Small, Medium, Large
• Input size — Compact, Default, Large
• Font — Inherit from theme (default), or choose from system fonts

Spacing

• Field gap — space between fields
• Padding — inner padding of the form container
• Border radius — rounded corners (none, subtle, rounded, pill)

Per-Field Styling

Individual fields can override the form-level styles:

• Width — Full, Half, Third, Two-thirds
• Custom CSS class — add your own class for advanced styling
• Hide label — visually hide the label (still accessible to screen readers)

Form Themes

Pro users get access to pre-built form themes:

• Minimal — thin borders, lots of whitespace
• Bold — strong colours, prominent labels
• Rounded — soft corners, card-style fields
• Dark — dark background, light text
• Glass — frosted glass effect with blur

Apply a theme with one click, then customise from there.

Custom CSS

For full control, add custom CSS to any form:

1. Open the form in the editor
2. Go to Settings → Advanced
3. Add CSS in the Custom Styles box

/* Example: custom submit button */
.skunkforms-submit {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 8px;
  transition: transform 0.2s;
}

.skunkforms-submit:hover {
  transform: translateY(-1px);
}