Styling Forms

Every form has its own style settings, configured under SSE Emails > Forms > Edit.

Style Presets

Choose from four built-in presets that control the form’s overall look:

Minimal

• No background or border
• Underline-style inputs (bottom border only)
• Square button corners
• Best for: blending into existing page designs, sidebar widgets, clean layouts

Clean (default)

• White background with a subtle border
• Rounded inputs with standard borders
• Compact padding
• Best for: most use cases, content areas, landing pages

Single Line

• Inputs and button laid out on one horizontal row (stacks on narrow screens)
• Compact, inline feel
• Best for: header/footer bars, narrow strips, “one field + button” signups

Branded

• White background with a drop shadow
• More generous padding
• Full-width submit button
• Extra border radius for a modern feel
• Best for: hero sections, standalone signup sections, popup forms

Custom Colors

Override any preset’s colors with the color pickers:

Setting	What it controls	Default
Background	Form background (Clean/Branded presets)	#ffffff
Text	Input text and labels	#333333
Button	Submit button background	#0073aa
Button Text	Submit button text color	#ffffff

Colors are applied via CSS custom properties, so they cascade naturally and respect the chosen preset’s layout.

Border Radius

Controls the roundness of inputs and buttons. Set to 0 for sharp corners or up to 50 for pill-shaped elements. Default is 6 pixels.

Button Label

Change the submit button text. Default is “Subscribe”. You might use:

• “Join the list”
• “Sign me up”
• “Get updates”
• “Subscribe free”

How Theming Works

The form uses CSS custom properties (variables) set via an inline style attribute on the form wrapper:

--sse-bg: #ffffff;
--sse-text: #333333;
--sse-btn: #0073aa;
--sse-btn-text: #ffffff;
--sse-radius: 6px;

All form elements reference these variables. This means:

• Styles are scoped — they won’t leak into or be affected by your theme
• Each form instance can have different colors on the same page
• The form inherits your theme’s default font family

Dark Mode

The form automatically adjusts border colors when the visitor’s system is set to dark mode (prefers-color-scheme: dark). The Clean and Branded presets lighten their border colors for better contrast on dark backgrounds.

If your theme has its own dark mode handling, the form’s CSS custom properties can be overridden via your theme’s stylesheet:

.my-dark-section .sse-form {
    --sse-bg: #1a1a2e;
    --sse-text: #e0e0e0;
    --sse-btn: #4cc9f0;
    --sse-btn-text: #1a1a2e;
}

Responsive Behaviour

• On screens narrower than 480px, form fields stack vertically
• The Branded and Clean presets make the button full-width on mobile
• All presets maintain readable font sizes and tap-friendly input heights

Advanced: Custom CSS

For more control, target the form with CSS in your theme:

/* All SSE forms */
.sse-form { }

/* Specific preset */
.sse-form--minimal { }
.sse-form--clean { }
.sse-form--branded { }

/* Inputs */
.sse-form__input { }
.sse-form__input:focus { }

/* Submit button */
.sse-form__submit { }
.sse-form__submit:hover { }

/* Success state */
.sse-form--success .sse-form__success { }
.sse-form__success-icon { }
.sse-form__success-text { }

Target a specific form by its data attribute:

.sse-form[data-form-id="3"] {
    /* Styles only for form #3 */
}