Zusammenfassung
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.
Key Take-Aways
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 {}
: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;
}
