Neue HubSpot-Formulare in Webflow mit eigenem CSS gestalten

Die neuen HubSpot Forms (New Form Editor, nicht Legacy) funktionieren grundlegend anders als die alten: Statt klassischer CSS-Klassen (wie .hs-form, .hs-form-field) setzt HubSpot jetzt primär auf CSS Custom Properties (CSS-Variablen) mit dem Präfix --hsf-. Du überschreibst sie im :root {} deines Stylesheets.

Default-Styles deaktivieren

Wenn du volle Kontrolle willst, kannst du beim Embed-Code HubSpots eigene Styles komplett deaktivieren:

hbspt.forms.create({
  region: 'na1',
  portalId: 'DEINE_PORTAL_ID',
  formId: 'DEINE_FORM_ID',
  css: '', // ← leerer String = kein HubSpot-Standard-CSS
});

CSS Custom Properties (neue Forms – empfohlen)

Du setzt alle Werte über :root {}. Diese Variablen stehen zur Verfügung:

:root {
  /* ── GLOBAL ─────────────────────────────── */
  --hsf-global__font-family: 'Inter', sans-serif;
  --hsf-global__font-size: 16px;
  --hsf-global__color: #1a1a1a;
  --hsf-global-error__color: #e53e3e;

  /* ── ROW / SPACING ───────────────────────── */
  --hsf-row__horizontal-spacing: 16px;
  --hsf-row__vertical-spacing: 16px;
  --hsf-module__vertical-spacing: 8px;

  /* ── BUTTON ──────────────────────────────── */
  --hsf-button__font-family: 'Inter', sans-serif;
  --hsf-button__font-size: 16px;
  --hsf-button__color: #ffffff;
  --hsf-button__background-color: #0057ff;
  --hsf-button__background-image: none;
  --hsf-button__border-radius: 6px;
  --hsf-button__padding: 14px 24px;
  --hsf-button__box-shadow: none;

  /* ── RICH TEXT ───────────────────────────── */
  --hsf-richtext__font-family: 'Inter', sans-serif;
  --hsf-richtext__font-size: 14px;
  --hsf-richtext__color: #1a1a1a;

  /* ── HEADING ─────────────────────────────── */
  --hsf-heading__font-family: 'Inter', sans-serif;
  --hsf-heading__color: #1a1a1a;
  --hsf-heading__text-shadow: none;

  /* ── BACKGROUND (Form-Container) ────────── */
  --hsf-background__background-color: #ffffff;
  --hsf-background__background-image: none;
  --hsf-background__background-size: cover;
  --hsf-background__background-position: center;
  --hsf-background__background-repeat: no-repeat;
  --hsf-background__border-style: solid;
  --hsf-background__border-color: #e2e8f0;
  --hsf-background__border-radius: 8px;
  --hsf-background__border-width: 1px;
  --hsf-background__padding: 24px;

  /* ── PROGRESS BAR (Multi-Step) ───────────── */
  --hsf-progressbar-text__font-family: 'Inter', sans-serif;
  --hsf-progressbar-text__font-size: 14px;
  --hsf-progressbar-text__color: #1a1a1a;
  --hsf-progressbar-progressLine__background-color: #0057ff;
  --hsf-progressbar-progressLine__background-image: none;
  --hsf-progressbar-progressLine__border-color: transparent;
  --hsf-progressbar-progressLine__border-style: none;
  --hsf-progressbar-progressLine__border-width: 0px;
  --hsf-progressbar-trackLine__background-color: #e2e8f0;

  /* ── ERROR ALERT ─────────────────────────── */
  --hsf-erroralert__font-family: 'Inter', sans-serif;
  --hsf-erroralert__font-size: 14px;
  --hsf-erroralert__color: #e53e3e;

  /* ── INFO ALERT ──────────────────────────── */
  --hsf-infoalert__font-family: 'Inter', sans-serif;
  --hsf-infoalert__font-size: 14px;
  --hsf-infoalert__color: #1a1a1a;

  /* ── FIELD INPUT (Text, Email, etc.) ─────── */
  --hsf-field-label__font-family: 'Inter', sans-serif;
  --hsf-field-label__font-size: 14px;
  --hsf-field-label__color: #1a1a1a;
  --hsf-field-label-requiredindicator__color: #e53e3e;
  --hsf-field-description__font-family: 'Inter', sans-serif;
  --hsf-field-description__color: #6b7280;
  --hsf-field-footer__font-family: 'Inter', sans-serif;
  --hsf-field-footer__color: #6b7280;
  --hsf-field-input__font-family: 'Inter', sans-serif;
  --hsf-field-input__color: #1a1a1a;
  --hsf-field-input__background-color: #f9fafb;
  --hsf-field-input__placeholder-color: #9ca3af;
  --hsf-field-input__border-color: #d1d5db;
  --hsf-field-input__border-width: 1px;
  --hsf-field-input__border-style: solid;
  --hsf-field-input__border-radius: 6px;
  --hsf-field-input__padding: 12px 16px;

  /* ── FIELD TEXTAREA ──────────────────────── */
  --hsf-field-textarea__font-family: 'Inter', sans-serif;
  --hsf-field-textarea__color: #1a1a1a;
  --hsf-field-textarea__background-color: #f9fafb;
  --hsf-field-textarea__placeholder-color: #9ca3af;
  --hsf-field-textarea__border-color: #d1d5db;
  --hsf-field-textarea__border-width: 1px;
  --hsf-field-textarea__border-style: solid;
  --hsf-field-textarea__border-radius: 6px;
  --hsf-field-textarea__padding: 12px 16px;

  /* ── FIELD CHECKBOX ──────────────────────── */
  --hsf-field-checkbox__padding: 4px 8px;
  --hsf-field-checkbox__background-color: #f9fafb;
  --hsf-field-checkbox__color: #1a1a1a;
  --hsf-field-checkbox__border-color: #d1d5db;
  --hsf-field-checkbox__border-width: 1px;
  --hsf-field-checkbox__border-style: solid;

  /* ── FIELD RADIO ─────────────────────────── */
  --hsf-field-radio__padding: 4px 8px;
  --hsf-field-radio__background-color: #f9fafb;
  --hsf-field-radio__color: #1a1a1a;
  --hsf-field-radio__border-color: #d1d5db;
  --hsf-field-radio__border-width: 1px;
  --hsf-field-radio__border-style: solid;
}
  --hsf-field-checkbox__border-width: 1px;
  --hsf-field-checkbox__border-style: solid;

  /* ── FIELD RADIO ─────────────────────────── */
  --hsf-field-radio__padding: 4px 8px;
  --hsf-field-radio__background-color: #f9fafb;
  --hsf-field-radio__color: #1a1a1a;
  --hsf-field-radio__border-color: #d1d5db;
  --hsf-field-radio__border-width: 1px;
  --hsf-field-radio__border-style: solid;
}