HubSpot Formular-Styler — eigenes CSS für Webflow

Warum HubSpot-Formulare auf deiner Seite anders aussehen

Ein eingebettetes HubSpot-Formular bringt sein eigenes Markup mit — .hs-form, .hs-form-field, .hs-input, .hs-button — und, sofern du das nicht abschaltest, das Standard-Stylesheet von HubSpot. Das Ergebnis passt selten zu einer sorgfältig gestalteten Webflow-Seite: andere Schriften, schmale Felder, nebeneinander stehende halbe Spalten und ein generischer orangefarbener Button. Formular stylen heißt, diese Klassen mit CSS zu überschreiben, das spezifisch genug ist, um sich durchzusetzen.

Was dieser Styler abdeckt

• Layout — Felder in voller Breite, einheitliche Abstände und zwei- oder dreispaltige Fieldsets, mit Flexbox neu aufgebaut (auf Mobilgeräten untereinander).
• Eingabefelder — Text, E-Mail, Auswahl (mit eigenem Pfeil), Textarea, Checkboxen und Radiobuttons in deiner Akzentfarbe.
• Zustände — Fokusring, ungültige Felder und HubSpots Fehlermeldungen; die Sammelmeldung „Bitte alle Pflichtfelder ausfüllen“ ist ausgeblendet.
• Einwilligungstext und Links — DSGVO- und Rechtstexte in kleinerer, gut lesbarer Darstellung.
• Button — Farben, Hover, Radius, Innenabstand und Option für volle Breite.
• Dankesnachricht — die Inline-.submitted-message nach dem Absenden.

Alle Regeln sind auf die Container-Klasse .hubspot-form begrenzt, sodass sie nichts anderes auf der Seite beeinflussen können.

Wichtig: reine HTML-Formulare vs. iframe-Formulare

CSS auf deiner Seite kann nur ein Formular stylen, das direkt auf der Seite gerendert wird. HubSpot-Formulare, die mit dem klassischen Script hbspt.forms.create (v2) eingebettet werden, erscheinen als HTML, wenn das Formular als Raw-HTML-Formular eingestellt ist (Formularoptionen in HubSpot; die Verfügbarkeit hängt von deinem HubSpot-Tarif ab). Formulare, die in einem iframe gerendert werden — auch Formulare aus dem neueren Formulareditor von HubSpot — lassen sich von außen nicht stylen; gestalte sie stattdessen in den Stileinstellungen von HubSpot. Schneller Test: Klicke auf deiner Live-Seite mit der rechten Maustaste auf ein Formularfeld und wähle Untersuchen. Siehst du class="hs-input" direkt im Seitenquelltext, funktioniert dieses CSS.

Die Option css: "" im Embed-Code sagt HubSpot, dass es sein Standard-Formular-CSS nicht laden soll, damit deine Styles sauber greifen. Schalte „HubSpots Standard-CSS behalten“ ab, wenn du nur wenige Details überschreiben willst.

HubSpot-Formular in Webflow einbinden

1. Füge den Code Embed aus diesem Tool ein (oder füge ein Code Embed hinzu und kopiere den kompletten Embed-Code hinein).
2. Das Formular erscheint nur auf der veröffentlichten Seite — im Designer wird das Embed leer angezeigt.
3. Wenn du mehrere Formulare auf einer Seite hast, gib jedem eine eigene Container-ID.
4. Messe Conversions mit versteckten Feldern und UTM-Parametern oder höre im Footer-Script auf den Callback onFormSubmitted von HubSpot.

Farben aus deinem Designsystem übernehmen? Konvertiere sie mit dem Color Converter und prüfe den Textkontrast mit dem Contrast Checker. Für native Webflow-Sektionen siehe HTML & CSS to Webflow.

Auch gesucht als: hubspot formular css, hubspot formular stylen, hubspot formular design, hubspot formular webflow, hubspot embed code, hubspot formular anpassen, hs-form css, hubspot formular styling.

Passende Tools zu: HubSpot Formular Styler

• Datumsformat-Konverter — Füge ein Datumsformat wie DD.MM.YYYY HH:mm ein und erhalte das passende Format für Make, Zapier, n8n, date-fns, Python und PHP — mit Live-Vorschau und fertigen Ausdrücken zum Einfügen.
• JSON-Pfad-Finder — Füge einen Webhook-Payload oder eine API-Antwort ein, klicke auf einen beliebigen Wert und kopiere seinen exakten Pfad – für JavaScript, JSONPath, jq, Python, PHP, n8n und Make.
• HTML & CSS zu Webflow — Füge HTML und das passende CSS ein, klicke auf Copy to Webflow und füge im Designer ein.
• UTM-Builder — Füge utm_source, utm_medium, utm_campaign und Co.