HubSpot und Webflow verbinden: Blog, Formulare, CRM

Kurzantwort: HubSpot und Webflow lassen sich verbinden. Formulare und Tracking bindest du per Einbettung oder Formular-Zuordnung an, Blogartikel kommen über die HubSpot-API oder eine Automatisierung in die Webflow-CMS-Collection. Je nach Redaktionsprozess ist auch ein kompletter Umzug des Blogs nach Webflow sinnvoll. Wichtig ist, vorher zu klären, wo der Blog künftig geschrieben wird und wohin die Leads fließen.

Was sich verbinden lässt

Webflow und HubSpot sind zwei getrennte Systeme. Du kannst vier Dinge verbinden: Formulare, Tracking, Blogartikel und CRM-Daten. Jede Verbindung hat ihre eigene Technik und ihre eigenen Grenzen.

• Formulare: Anfragen von der Webflow-Website landen als Kontakte in HubSpot.
• Tracking: Der HubSpot-Tracking-Code ordnet Besuche und Formulareingaben einem Kontakt zu.
• Blog: Artikel aus HubSpot erscheinen auf der Webflow-Website, oder der Blog zieht komplett um.
• CRM-Daten: Felder, Lifecycle-Phasen und Zuständigkeiten werden sauber übergeben.

Allgemein zur Anbindung von Website und CRM schreiben wir im Ratgeber Website und CRM verbinden. Hier geht es nur um die Kombination HubSpot mit Webflow.

Blog aus HubSpot in Webflow anzeigen

Es gibt drei Wege. Welcher passt, hängt davon ab, wo dein Team schreiben will.

Variante A: API und Automatisierung in die CMS-Collection

Die HubSpot-API liefert Blogartikel über den Endpunkt zum Auflisten von Beiträgen, mit Feldern wie Titel, Slug, Inhalt, Zusammenfassung, Veröffentlichungsdatum, Titelbild und Autor-ID. Der Zugriff läuft über ein Bearer-Token. Eine Besonderheit aus der Dokumentation: Das Feld authorName nennt den Nutzer, der zuletzt veröffentlicht hat, nicht den Blogautor. Für den Autor brauchst du die Autor-ID und die separate Autoren-Schnittstelle.

Auf der Webflow-Seite legst du Artikel über die Data API v2 als CMS-Einträge an. Dafür braucht das Token die Berechtigung cms:write, jeder Eintrag braucht mindestens Name und Slug, und pro Anfrage sind bis zu 100 Einträge möglich. Neue Einträge sind standardmäßig Entwürfe, bis du sie freigibst und veröffentlichst. Wird das Rate-Limit erreicht, antwortet die API mit dem Status 429. Diese Details sind wichtig, weil eine Automatisierung genau an solchen Stellen unbemerkt stoppen kann.

Variante B: Blog nach Webflow migrieren

Der Blog zieht komplett um. Danach schreibt das Team im Webflow-CMS, und HubSpot bleibt für CRM, Formulare und E-Mails. Das ist die sauberste Lösung, wenn niemand mehr in HubSpot veröffentlichen muss. Es ist aber ein echtes Migrationsprojekt, mehr dazu weiter unten.

Variante C: Blog in HubSpot lassen und einbinden

Der Blog bleibt in HubSpot und wird verlinkt oder per Teaser-Liste auf der Webflow-Seite angezeigt. Das ist am schnellsten umgesetzt. Du pflegst aber zwei Systeme, und Gestaltung und Navigation müssen zusammenpassen. Prüfe außerdem, ob der Blog auf einer eigenen Subdomain oder im Verzeichnis deiner Hauptdomain läuft, weil das die Zuordnung in der Suche beeinflusst.

Vorsicht bei Echtzeit-Versprechen Eine Anbindung per API oder Automatisierung läuft meist in Intervallen. Ob und wie schnell ein Artikel nach der Veröffentlichung in HubSpot auf der Webflow-Seite erscheint, hängt von der Umsetzung ab und sollte getestet werden, bevor du dich darauf verlässt.

Formulare und Lead-Übergabe

Formulare sind die häufigste Verbindung und die mit den meisten Stolperstellen.

HubSpot-Formulare einbinden

Du kopierst den Einbettungscode des Formulars aus HubSpot und fügst ihn in ein Code-Element der Webflow-Seite ein. Laut HubSpot-Dokumentation brauchst du den HubSpot-Tracking-Code auf der Seite, damit Analysedaten zum Formular erfasst werden. Außerdem muss die Domain der Seite als vertrauenswürdige Domain hinterlegt sein, sonst werden Einsendungen als Spam markiert. Das Anpassen des Formularcodes per CSS setzt einen Marketing-Hub- oder Content-Hub-Tarif Professional oder Enterprise voraus.

Webflow-Formulare an HubSpot anbinden

Alternativ bleibt das Formular ein Webflow-Formular, und die Daten gehen an HubSpot. Webflow bietet dafür eine native Zuordnung von Formularfeldern zu HubSpot-Feldern. Laut einer Partnerbeschreibung war diese Funktion zunächst nur für Enterprise-Kunden verfügbar, prüfe deshalb vorab, ob sie in deinem Tarif nutzbar ist. Jedes Formular braucht einen eindeutigen Namen, und Formulare müssen nach der Einrichtung neu veröffentlicht werden. Zusätzlich kann HubSpot mit der Funktion „Nicht-HubSpot-Formulare“ einfache HTML-Formulare erfassen. Dort gelten Einschränkungen: Nur einzeilige Textfelder werden zugeordnet, versteckte Felder werden nicht übernommen, und das Formular darf nicht in einem iFrame oder einer Single-Page-App liegen.

Tracking, UTM, Consent

Lädt der Tracking-Code ohne Einwilligung, riskierst du einen Datenschutzverstoß. HubSpot weist in seiner Dokumentation zu Nicht-HubSpot-Formularen selbst nicht auf Einwilligungsanforderungen hin. Die Regeln dazu erklären wir im Ratgeber Tracking und Consent nach TDDDG. UTM-Parameter helfen, Leads einer Kampagne zuzuordnen, siehe UTM-Parameter. Wie du das Formular selbst verbesserst, steht im Beitrag Anfrageformular optimieren. Dieser Text ersetzt keine Rechtsberatung.

CRM-Anbindung im Detail

Wichtiger als die Technik ist der Datenfluss. Lege fest, welche Felder aus dem Formular in welche HubSpot-Eigenschaften wandern und wer den Lead danach bekommt.

Bei Nicht-HubSpot-Formularen werden Daten nur in einzeilige Textfelder geschrieben und automatisch nach Feldname oder Label zugeordnet. Eine manuelle Zuordnung ist dort nicht möglich. Für komplexe Formulare mit Auswahlfeldern ist deshalb die Zuordnung über die native Anbindung oder ein eingebettetes HubSpot-Formular meist die bessere Wahl.

Blog-Migration und SEO sauber vorbereiten

Zieht der Blog um, ändern sich oft URLs. Dann entscheidet die Vorbereitung darüber, wie gut die Sichtbarkeit erhalten bleibt. Garantieren kann das niemand.

Redirects, URL-Struktur, Metadaten

Google empfiehlt bei geänderten URLs dauerhafte Weiterleitungen (301 oder 308) von jeder alten auf die jeweils passende neue Adresse, ohne Ketten und nicht alle auf die Startseite. Die Weiterleitungen sollten laut Google in der Regel mindestens ein Jahr bestehen bleiben. Rankings können nach dem Umzug eine Zeit lang schwanken, bei kleineren Seiten dauert es oft einige Wochen, bis die meisten Seiten umgezogen sind. Mehr zu den Grundlagen findest du im Ratgeber CMS-Migration: Checkliste und im Beitrag Website-Relaunch und Rankings.

Checkliste: Blog-Migration von HubSpot nach Webflow

• Alle Blog-URLs exportieren und eine Zuordnungstabelle alt zu neu anlegen.
• Entscheiden, ob die URL-Struktur gleich bleibt, und Abweichungen begründen.
• Titel, Meta-Beschreibung, Slug und Datum je Artikel übernehmen.
• Bilder inklusive Alt-Texte übernehmen und Dateinamen prüfen.
• Autoren, Kategorien und Tags im Webflow-CMS abbilden.
• Interne Links im Text auf die neuen URLs umstellen.
• 301-Weiterleitungen einrichten und stichprobenartig testen.
• Neue Sitemap in der Google Search Console einreichen.
• Canonical-Tags prüfen, damit keine doppelten Inhalte entstehen.
• Nach dem Go-live Fehlerseiten und Traffic wochenlang beobachten.

Stolperfallen

Doppelte Inhalte

Läuft derselbe Artikel in HubSpot und in Webflow, entstehen Duplikate. Google empfiehlt, bei doppelten Seiten Weiterleitungen oder das rel=canonical-Element zu nutzen und auf allen internen Links die bevorzugte URL zu verwenden. Entscheide also, welche Version die „echte“ ist.

Bildverwaltung

Bilder aus HubSpot liegen auf HubSpot-Servern. Werden sie nur verlinkt, hängt deine Seite von einem fremden System ab. Besser ist ein Import in die Webflow-Medienverwaltung mit Alt-Text.

Wartung von Automatisierungen

Automatisierungen brechen leise. Ein abgelaufenes Token, ein geändertes Feld oder ein erreichtes Rate-Limit reichen. Plane Benachrichtigungen bei Fehlern ein und lege fest, wer zuständig ist. Prüfe außerdem, ob der Artikeltext aus HubSpot nach der Übernahme im Webflow-Rich-Text sauber dargestellt wird.

Welche Agentur richtet das zuverlässig ein?

Kriterien

• Die Agentur fragt zuerst nach Redaktionsprozess und Datenfluss, nicht nach dem Tool.
• Sie erklärt die Varianten mit Vor- und Nachteilen, auch wenn eine einfache Lösung reicht.
• Sie belegt technische Aussagen mit der aktuellen Dokumentation von HubSpot und Webflow.
• Sie verspricht keine Echtzeit-Synchronisierung, ohne sie getestet zu haben.
• Sie sagt, wer die Automatisierung nach dem Go-live überwacht.

Webwavers als Option

Webwavers ist einer von sieben Webflow Premium Partnern in Deutschland und setzt Webentwicklung mit Webflow um, daneben auch mit WordPress, TYPO3 und Headless. Ob und wie eine Anbindung an HubSpot für dein Projekt sinnvoll ist, klären wir im Erstgespräch gemeinsam mit dir. Was dort nicht zu Webflow passt, sagen wir offen.

Ablauf und Kosten

1. Anforderungen klären: Wo wird geschrieben, welche Leads, welche Felder?
2. Variante wählen: API, Migration oder Einbindung.
3. Technik aufsetzen: Zugänge, Felder, Zuordnung, Consent.
4. Testen: Testeinträge, Testformulare, Fehlerfälle.
5. Go-live und Beobachtung: Redirects prüfen, Fehlerbenachrichtigung aktivieren.

Die Kosten hängen vor allem von der Variante, der Zahl der Artikel und der Formulare ab. Eine pauschale Zahl wäre unseriös. Verbindlich nennen können wir nur die bestätigten Startwerte: Webentwicklung ab 5.000 € netto, Betreuung Care ab 500 € pro Monat netto. Was deine Anbindung kostet, klären wir im Erstgespräch.

Verwandte Ratgeber: Kundenbereich auf der Website und Landingpage zur Produkteinführung.

Wie wir das bei Webwavers umsetzen

Webwavers wurde 2021 gegründet, hat Standorte in Günzburg und München und arbeitet deutschlandweit. Wir sind einer von sieben Webflow Premium Partnern in Deutschland. Webentwicklung und Plattformfragen findest du auf unseren Seiten zu Webentwicklung und Webflow-Agentur. Begriffe wie API erklären wir im Glossar.

Häufige Fragen

Welche Agentur richtet die Anzeige eines HubSpot-Blogs auf einer Webflow-Website zuverlässig ein?

Achte auf Agenturen, die Redaktionsprozess und Datenfluss vor dem Tool klären und mehrere Varianten erklären. Technische Aussagen sollten sie mit der aktuellen Doku belegen. Webwavers klärt das im Erstgespräch mit dir.

Kann man HubSpot mit Webflow verbinden?

Ja. Formulare lassen sich einbetten oder zuordnen, der HubSpot-Tracking-Code lässt sich einbinden, und Blogartikel können per API oder Automatisierung in die Webflow-CMS-Collection gelangen. Ob eine native Anbindung in deinem Webflow-Tarif verfügbar ist, solltest du vorher prüfen.

HubSpot-Formulare in Webflow einbinden, wie geht das?

Du kopierst den Einbettungscode aus HubSpot und fügst ihn in ein Code-Element ein. Auf der Seite sollte der HubSpot-Tracking-Code laufen, und die Domain muss als vertrauenswürdig hinterlegt sein, sonst gelten Einsendungen als Spam.

Blog von HubSpot zu Webflow migrieren, wie funktioniert das?

Du exportierst die Artikel, legst sie im Webflow-CMS an, übernimmst Metadaten und Bilder und richtest 301-Weiterleitungen von den alten auf die neuen URLs ein. Danach reichst du eine neue Sitemap ein und beobachtest die Seite.

Was kostet die Anbindung von HubSpot an Webflow?

Das hängt von Variante, Artikelzahl und Formularen ab. Bei Webwavers beginnt Webentwicklung ab 5.000 € netto, den Preis für deine Anbindung klären wir im Erstgespräch.

Fazit

HubSpot und Webflow arbeiten gut zusammen, wenn du vorher festlegst, wo geschrieben wird und wohin Leads gehen. Die Technik ist meist nicht das Problem, die Pflege danach schon. Wenn du das mit uns durchsprechen willst, melde dich für ein kostenloses Erstgespräch. Danach bekommst du eine ehrliche Einschätzung, auch wenn Webwavers nicht der richtige Partner ist.

Quellen

• HubSpot: Formular auf einer externen Website einbinden und gestalten
• HubSpot: Nicht-HubSpot-Formulare nutzen
• HubSpot Developers: CMS Blog Posts API
• Webflow Developers: CMS-Einträge erstellen (Data API v2)
• Tenten: Webflow-HubSpot-Formularintegration
• Google Search Central: Website-Umzug mit URL-Änderungen
• Google Search Central: Doppelte URLs zusammenführen