HALLOFORM
/Custom CSS

Custom CSS

Style your published form beyond the Theme controls using the stable halloform-* class hooks.

How it works#

Custom CSS lives in Settings → Behavior → Custom CSS. Whatever you paste is injected as a <style> tag on every page of your published form (and in preview), letting you override the runtime styling beyond what the Theme controls expose.

Custom CSS only affects the public form at /f/your-form — it never changes the editor or your dashboard.

The class hooks#

Write your rules against the stable halloform-* classes below. These are a supported contract: they won't change when we update the UI. Don't target the utility classes you might see in dev tools (like flex or rounded-md) — those can change at any time.

  • .halloform-form — the form on the current page.
  • .halloform-page — the current step (the same element as .halloform-form).
  • .halloform-progress — the progress-bar track; .halloform-progress-fill — its filled portion.
  • .halloform-field — every question wrapper; .halloform-field-{type} — the wrapper for one field type.
  • .halloform-label — a question's label.
  • .halloform-input — text inputs, textareas and dropdowns.
  • .halloform-option — one choice in multiple-choice, checkboxes or picture choice.
  • .halloform-error — an inline validation message under a field.
  • .halloform-button-submit / .halloform-button-next / .halloform-button-back — the navigation buttons.

The {type} suffix is the field's name lower-cased with dashes — e.g. "Short answer" becomes .halloform-field-short-answer, "Email" becomes .halloform-field-email.

Theme variables
The runtime exposes your theme as CSS variables you can reuse: --theme-primary, --theme-answer, --theme-question, --theme-question-bg and --theme-input-border.

Examples#

/* Rounder, roomier inputs */
.halloform-input {
  border-radius: 12px;
  padding: 14px 16px;
}

/* Full-width, uppercase submit button */
.halloform-button-submit {
  width: 100%;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Highlight just the email field */
.halloform-field-email {
  background: #f8fafc;
  padding: 12px;
  border-radius: 12px;
}

/* Bigger, bolder question labels */
.halloform-label {
  font-size: 1.1rem;
  font-weight: 700;
}

/* Thicker progress bar */
.halloform-progress { height: 6px; }
.halloform-progress-fill { background: var(--theme-primary); }

Tips#

  • Always prefix selectors with a halloform-* hook rather than bare element selectors (input, body) so you only touch the form.
  • Use your browser's inspector to confirm a hook is present on the element you want to style.
  • Changes save with the rest of the Behavior tab — and re-enable Publish so you can ship them.
  • Need a hook that isn't listed here? Let us know and we'll add it.