Custom CSS for forms

A form's Style settings (preset, colours, corners, spacing, fonts, effects…) cover most needs. Custom CSS is for the rest: a detail those settings don't offer.

Version française

Where to find it

• One form (contact or newsletter signup): in its card, Style section, Customize button, then Add custom CSS at the bottom of the panel.
• Every contact form at once: Contact forms → Defaults, same path (Customize → Add custom CSS).
• Every signup form at once (since 0.9.2): Newsletters → Forms → Defaults → Add custom CSS.

The CSS saves itself when you leave the box. It applies to the site as soon as it is saved; the admin preview picks it up the next time the page loads.

The one rule to remember

Every form carries a class with its number, e.g. .lrob-etk-form-12. It is shown above the CSS box, with a button to copy it.

Start every rule with that class: the rule then only touches this form.

.lrob-etk-form-12 button.lrob-etk-form-submit {
    border-radius: 999px;
}

In the Defaults, start with the family's class: .lrob-etk-form--contact for every contact form, .lrob-etk-form--signup for every signup form. (.lrob-etk-form alone would reach both families.) Both classes exist since 0.9.2; on 0.9.1, use .lrob-etk-form.

Why doesn't my rule work?

1. The tag is missing. To hold its own against themes, the plugin targets its controls with their tag (input, select, textarea, button). Name it too: .lrob-etk-form-12 input, not .lrob-etk-form-12 .some-field.
2. The setting already exists under "Customize". Colours, corners, spacing and sizes set in the panel come before custom CSS. Change them in the panel, or add !important to your rule.
3. The theme has a more specific rule. Rare; !important settles it too.

Recipes to copy

Replace 12 with your form's number.

Uppercase, spaced-out button

.lrob-etk-form-12 button.lrob-etk-form-submit {
    text-transform: uppercase;
    letter-spacing: .08em;
}

Full-width button

.lrob-etk-form-12 button.lrob-etk-form-submit {
    width: 100%;
}

Bigger labels

.lrob-etk-form-12 .lrob-etk-form-label {
    font-size: 1.1em;
}

Hide the helper texts under the fields

.lrob-etk-form-12 .lrob-etk-form-helper {
    display: none;
}

Quieter text on the tracking-consent box

.lrob-etk-form-12 .lrob-etk-form-field--tracking-consent .lrob-etk-form-checkbox-inline {
    font-size: .85em;
    opacity: .8;
}

Taller message box

.lrob-etk-form-12 textarea {
    min-height: 12em;
}

Centred, bold success message

.lrob-etk-form-12 .lrob-etk-form-status {
    text-align: center;
    font-weight: 700;
}

Variables

The simplest way to change a colour or a size across the whole form: set a variable on the form itself. It only applies while the Customize panel leaves that setting at its default (otherwise add !important).

.lrob-etk-form-12 {
    --lrob-etk-cf-accent: #e63946;
    --lrob-etk-cf-btn-bg: #e63946;
}

Variable	What it changes
--lrob-etk-cf-accent	Accent colour (active field, links)
--lrob-etk-cf-btn-bg	Button background
--lrob-etk-cf-btn-hover-bg	Button background on hover
--lrob-etk-cf-accent-fg	Button text
--lrob-etk-cf-form-bg	Form background
--lrob-etk-cf-form-border	Form border
--lrob-etk-cf-bg	Field background
--lrob-etk-cf-input-fg	Field text
--lrob-etk-cf-placeholder	Placeholder text
--lrob-etk-cf-border	Field border
--lrob-etk-cf-border-focus	Active field border
--lrob-etk-cf-fg	Label text
--lrob-etk-cf-muted	Helper texts
--lrob-etk-cf-success-fg / --lrob-etk-cf-success-bg	Success message (text / background)
--lrob-etk-cf-error / --lrob-etk-cf-error-bg	Errors (text / background)
--lrob-etk-cf-radius	Field corners
--lrob-etk-cf-btn-radius	Button corners
--lrob-etk-cf-border-width	Border width
--lrob-etk-cf-spacing	Space between fields
--lrob-etk-cf-form-pad	Form padding
--lrob-etk-cf-form-max-width	Form maximum width
--lrob-etk-cf-field-pad	Field padding
--lrob-etk-cf-btn-pad	Button padding
--lrob-etk-cf-font-size	Text size
--lrob-etk-cf-helper-size	Helper and error text size
--lrob-etk-cf-font	Form font
--lrob-etk-cf-label-font	Label font
--lrob-etk-cf-label-weight	Label weight (400, 600…)

Useful classes

Class	Element
.lrob-etk-form-12	The whole form (number 12)
.lrob-etk-form--contact / .lrob-etk-form--signup	Every contact / signup form
.lrob-etk-form-row / .lrob-etk-form-col	A row / a column
.lrob-etk-form-field	A field with its label, helper and error
.lrob-etk-form-field--text, --email, --textarea, --select, --phone, --checkbox…	A field of a given type
.lrob-etk-form-field--tracking-consent	The tracking-consent box (newsletter)
.lrob-etk-form-label	A label
.lrob-etk-form-helper	A helper text
.lrob-etk-form-error	An error message
.lrob-etk-form-checkbox-inline	A single checkbox with its text
.lrob-etk-form-option	One option of a checkbox or radio group
button.lrob-etk-form-submit	The submit button
.lrob-etk-form-status	The message after sending
.lrob-etk-thread	A contact form's conversation page

What gets refused

This is CSS, not HTML: tags are stripped, and a block containing </style, @import, expression( or javascript: is refused whole.