Wie verbinden Sie Webflow-Formulare mit Make und HubSpot?

Kurze Antwort: Sie können Webflow-Formulare auch ohne die native App mit HubSpot verbinden, indem Sie ein Make-Szenario aufbauen, das neue Webflow-Formularübermittlungen erkennt, die Felder auf HubSpot-Kontakteigenschaften abbildet, Duplikate behandelt und die richtige Lifecycle Stage automatisch setzt. So erhalten Sie sauberere Daten und mehr Kontrolle als mit der Standardintegration.

Die native HubSpot-App von Webflow funktioniert für einfache Setups gut. Wenn Sie aber ein Field Mapping benötigen, das über Name und E-Mail-Adresse hinausgeht, eine Deduplizierungslogik oder die automatische Zuweisung der Lifecycle Stage, stoßen Sie schnell an ihre Grenzen.

Make (früher Integromat) schließt diese Lücke. Wenn Sie Ihre Webflow-Formularübermittlungen über ein Make-Szenario leiten, erhalten Sie eine vollständig konfigurierbare Pipeline zwischen Ihrer Website und Ihrem CRM. Dafür ist kein Code nötig, und auf der anderen Seite gibt es keine Probleme mit der Datenqualität.

Dieses Tutorial führt Sie durch die einzelnen Schritte: Webflow und HubSpot in Make verbinden, Ihre Felder korrekt zuordnen, Duplikate herausfiltern und Lifecycle Stages abhängig vom übermittelten Formular setzen.

Was Sie vor dem Start brauchen

Halten Sie vor dem Aufbau des Szenarios Folgendes bereit:

• Eine Webflow-Website mit mindestens einem veröffentlichten Formular
• Ein HubSpot-Konto (jede Stufe funktioniert, auch die kostenlose)
• Ein Make-Konto (der kostenlose Tarif reicht für dieses Szenario aus)
• Administratorzugriff auf alle drei Plattformen

Schritt 1: Den Webflow-Trigger in Make einrichten

Der Webflow-Trigger überwacht neue Formularübermittlungen und startet das Szenario bei jedem Eingang.

1. Öffnen Sie Make und klicken Sie auf Create a new scenario
2. Suchen Sie nach Webflow und wählen Sie das Modul Watch Form Submissions
3. Klicken Sie auf Add, um eine neue Webflow-Verbindung zu erstellen
4. Gehen Sie in Webflow zu Site Settings > Integrations > API Access und erzeugen Sie ein neues API-Token
5. Fügen Sie das Token in Make ein und speichern Sie die Verbindung
6. Wählen Sie Ihre Website aus dem Dropdown-Menü
7. Wählen Sie das Formular aus, das Sie überwachen möchten (für Formulare mit unterschiedlicher Logik können Sie separate Szenarien erstellen)
8. Setzen Sie das Limit auf 1 für die Verarbeitung in Echtzeit

Klicken Sie auf OK und führen Sie das Modul einmal mit einer Testübermittlung aus, damit Make die Datenstruktur erfasst. Senden Sie Ihr Webflow-Formular mit Testdaten ab, bevor Sie mit dem nächsten Schritt fortfahren.

Schritt 2: Zuerst in HubSpot nach einem bestehenden Kontakt suchen

Der häufigste Fehler bei dieser Art von Integration ist der Verzicht auf die Deduplizierung. Ohne sie legt jede Formularübermittlung einen neuen Kontaktdatensatz an, und Ihre HubSpot-Datenbank füllt sich innerhalb weniger Wochen mit Duplikaten.

Fügen Sie ein HubSpot-Modul Search for a Contact hinzu, bevor Sie etwas anlegen:

1. Fügen Sie nach dem Webflow-Trigger ein neues Modul hinzu
2. Suchen Sie nach HubSpot CRM und wählen Sie Search for Contacts
3. Verbinden Sie Ihr HubSpot-Konto per OAuth (Make fordert Sie dazu auf)
4. Setzen Sie den Filter auf die Suche nach email und verwenden Sie dafür den E-Mail-Wert aus der Webflow-Übermittlung (aus der Ausgabe von Schritt 1 zugeordnet)
5. Setzen Sie das Ergebnislimit auf 1

Dieses Modul gibt den bestehenden Kontakt zurück, falls einer gefunden wird, und andernfalls ein leeres Ergebnis. Der nächste Schritt verzweigt abhängig von diesem Ergebnis.

Schritt 3: Einen Router für neue und bestehende Kontakte hinzufügen

Ein Router-Modul teilt Ihr Szenario in zwei Pfade auf: einen für neue Kontakte, einen für bestehende.

1. Fügen Sie nach dem Suchschritt ein Router-Modul hinzu
2. Pfad 1 (Neuer Kontakt): Fügen Sie einen Filter mit der Bedingung „Number of results equals 0“ hinzu
3. Pfad 2 (Bestehender Kontakt): Fügen Sie einen Filter mit der Bedingung „Number of results greater than 0“ hinzu

Mit dieser Struktur überschreiben Sie nie versehentlich Kontaktdaten mit einem leeren Formularfeld und legen auch keine Duplikate an.

Schritt 4: Felder zuordnen und den HubSpot-Kontakt anlegen (Pfad 1)

Fügen Sie im Pfad für neue Kontakte ein HubSpot-Modul Create a Contact hinzu.

Beim Field Mapping scheitern die meisten Integrationen. Die Feldnamen in Webflow und die Eigenschaftsnamen in HubSpot stimmen selten von Haus aus überein. So gehen Sie richtig vor:

Standard-Feldzuordnungen:

Ein Feld mit dem vollständigen Namen aufteilen:

Wenn Ihr Webflow-Formular nur ein einziges Feld „Name“ hat, teilen Sie es mit den integrierten Textfunktionen von Make auf:

• Vorname: {{1.name | split: " " | first}}
• Nachname: {{1.name | split: " " | last}}

Die Lead-Quelle zuordnen:

Übergeben Sie immer den Formularnamen oder die Seiten-URL als HubSpot-Eigenschaft, damit Sie wissen, woher jeder Kontakt stammt. Ordnen Sie den Wert der Webflow-Übermittlung pageUrl einer benutzerdefinierten HubSpot-Eigenschaft zu, die heißt: lead_source_url.

Schritt 5: Den bestehenden Kontakt aktualisieren (Pfad 2)

Fügen Sie im Pfad für bestehende Kontakte ein HubSpot-Modul Update a Contact hinzu.

1. Ordnen Sie die Contact ID aus der Ausgabe des Search-Moduls zu (so weiß HubSpot, welcher Datensatz aktualisiert werden soll)
2. Ordnen Sie nur Felder zu, die bei einer erneuten Übermittlung aktualisiert werden sollen (überschreiben Sie keine Felder wie createdate oder original_source)
3. Eine sichere Standardeinstellung: nur last_form_submitted und last_activity_date aktualisieren, es sei denn, Ihr Anwendungsfall erfordert mehr

So bleiben Ihre bestehenden Kontaktdatensätze sauber, und die neue Interaktion wird trotzdem erfasst.

Schritt 6: Die Lifecycle Stage automatisch setzen

Die Lifecycle Stage gehört zu den wertvollsten Eigenschaften in HubSpot und bleibt dennoch besonders oft leer. Machen Sie sie zum Teil des Szenarios, damit jeder Kontakt bereits mit der richtigen Stage ankommt. Wenn Sie später Ihre Funnel-Performance auswerten, hilft es außerdem, den Stage-Verlauf mit umfassenderen B2B-SaaS-Benchmarks zu vergleichen.

Fügen Sie diese Logik sowohl dem Create- als auch dem Update-Pfad hinzu:

Option A: Pro Formular eine feste Lifecycle Stage festlegen

Wenn Ihr Formular „Demo anfragen“ immer Sales Qualified Leads erzeugt, legen Sie im Modul dieses Szenarios lifecyclestage fest als salesqualifiedlead fest.

Option B: Eine Bedingung auf Basis des Formularnamens verwenden

Wenn ein Szenario mehrere Formulare verarbeitet, fügen Sie vor dem HubSpot-Modul ein Set Variable-Modul hinzu und verwenden Sie eine Bedingung:

If form name = "Request a Demo" → lifecyclestage = salesqualifiedlead
If form name = "Download Guide" → lifecyclestage = lead
If form name = "Contact Us" → lifecyclestage = marketingqualifiedlead

Ordnen Sie diese Variable anschließend dem Feld lifecyclestage in HubSpot zu.

HubSpot-Werte für die Lifecycle Stage (verwenden Sie genau diese Zeichenfolgen):

• subscriber
• lead
• marketingqualifiedlead
• salesqualifiedlead
• opportunity
• customer

Schritt 7: Fehlerbehandlung einbauen, damit nichts verloren geht

Make-Szenarien schlagen standardmäßig unbemerkt fehl. Ein Timeout der HubSpot-API oder ein fehlerhaftes Feld lässt die Übermittlung ohne Warnung verloren gehen.

Fügen Sie einen einfachen Error Handler hinzu, um Fehler abzufangen:

1. Klicken Sie mit der rechten Maustaste auf das HubSpot-Modul Create/Update
2. Wählen Sie Add error handler
3. Wählen Sie Resume und verbinden Sie es mit einem Send an Email- oder Slack-Modul, das Sie bei Fehlern benachrichtigt
4. Nehmen Sie die Rohdaten der Übermittlung in die Benachrichtigung auf, damit Sie den Kontakt bei Bedarf manuell anlegen können

Die Einrichtung dauert fünf Minuten und verhindert Datenverlust, wenn das Szenario ausfällt.

Schritt 8: Das gesamte Szenario testen

Führen Sie vor der Aktivierung des Szenarios einen vollständigen End-to-End-Test durch:

1. Klicken Sie in Make auf Run once
2. Senden Sie Ihr Webflow-Formular mit einer neuen E-Mail-Adresse ab
3. Prüfen Sie, ob der Kontakt mit den richtigen Feldern und der richtigen Lifecycle Stage in HubSpot erscheint
4. Senden Sie dasselbe Formular erneut mit derselben E-Mail-Adresse ab
5. Prüfen Sie, ob HubSpot einen Kontakt anzeigt statt zwei und ob die relevanten Felder aktualisiert wurden

Wenn der Deduplizierungspfad nicht ausgelöst wird, prüfen Sie, ob Ihr Search-Modul nach dem richtigen E-Mail-Feld aus der Webflow-Ausgabe filtert. Der Feldname hängt davon ab, wie Ihr Formular in Webflow beschriftet ist.

Schritt 9: Das Szenario aktivieren und planen

Sobald die Tests erfolgreich sind:

1. Schalten Sie das Szenario auf Active
2. Stellen Sie das Zeitplanintervall auf alle 15 Minuten (kostenloser Make-Tarif) oder nutzen Sie Instant-Trigger, wenn Sie einen kostenpflichtigen Tarif haben
3. Beobachten Sie den Tab Scenario History in den ersten 24 Stunden, um Sonderfälle zu erkennen

Für Formulare mit hohem Volumen lohnt sich das Upgrade auf den Core-Tarif von Make, der Instant-Trigger und höhere Operations-Limits bietet.

Warum Make statt der nativen Webflow-HubSpot-App verwenden?

Die native Webflow-HubSpot-Integration übernimmt die Übergabe einfacher Felder. Make ist die bessere Wahl, wenn Sie Folgendes benötigen:

• Deduplizierungslogik, bevor Datensätze angelegt werden
• Bedingte Zuweisung der Lifecycle Stage abhängig vom Formulartyp
• Mehrstufige Workflows (zum Beispiel zusätzlich eine Slack-Benachrichtigung oder das Anlegen eines HubSpot-Deals neben dem Kontakt)
• Individuelles Field Mapping für nicht standardmäßige Eigenschaften
• Fehlerbehandlung mit Fallback-Benachrichtigungen

Für Teams, die mehr als ein Formular betreiben oder ein CRM mit bestehenden Daten pflegen, bietet Make eine Kontrolle, die die native App nicht bietet. Liegen diese Formulare auf wichtigen Conversion-Seiten, lohnt sich eine optimierte Integration noch mehr, wenn sie mit soliden Best Practices für SaaS-Landingpages kombiniert wird.

FAQs

F: Kann ich mehrere Webflow-Formulare mit einem einzigen Make-Szenario mit HubSpot verbinden?

A: Ja. Verwenden Sie ein Router-Modul, um das Szenario anhand des Formularnamens aus der Ausgabe des Webflow-Triggers zu verzweigen. Jeder Zweig kann sein eigenes Field Mapping und seine eigene Logik für die Lifecycle Stage haben. Alternativ erstellen Sie für jedes Formular ein eigenes Szenario, das sich leichter pflegen lässt.

F: Funktioniert das mit den nativen Formularen von Webflow oder nur mit eingebetteten Formularen?

A: Dieses Tutorial nutzt die nativen Formulare von Webflow über den API-Trigger. Es funktioniert mit jedem Formular, das mit dem nativen Formular-Builder von Webflow erstellt wurde. Wenn Sie eingebettete HubSpot-Formulare direkt in Webflow verwenden, gehen diese Übermittlungen direkt an HubSpot, und Make wird dazwischen nicht benötigt.

F: Was passiert, wenn HubSpot bei einer Formularübermittlung nicht erreichbar ist?

A: Make wiederholt fehlgeschlagene Vorgänge automatisch, abhängig von den Einstellungen Ihres Error Handlers. Ist der Error Handler wie in Schritt 7 beschrieben konfiguriert, löst jede fehlgeschlagene Übermittlung eine Benachrichtigung aus, sodass Sie das Problem manuell beheben können. Make protokolliert außerdem alle fehlgeschlagenen Ausführungen im Tab „Scenario History“.

F: Wie vermeide ich, dass die Lifecycle Stage bei bestehenden Kontakten überschrieben wird?

A: Setzen Sie im Pfad „Update Contact“ nur dann lifecyclestage , wenn der aktuelle Wert im Funnel weiter vorne liegt als der neue. Verwenden Sie vor dem Update-Modul einen Filter, der die Lifecycle Stage des bestehenden Kontakts prüft und das Update nur ausführt, wenn die neue Stage eine Aufwertung ist (zum Beispiel der Wechsel von lead setzen auf marketingqualifiedlead).

F: Ist Make für diesen Anwendungsfall kostenlos?

A: Der kostenlose Tarif von Make umfasst 1.000 Operationen pro Monat und Abfrageintervalle von 15 Minuten. Bei einem Formular mit geringem bis mittlerem Volumen (unter 500 Übermittlungen pro Monat) deckt der kostenlose Tarif das hier beschriebene Szenario ab. Ein höheres Volumen oder Instant Trigger erfordern einen kostenpflichtigen Tarif ab etwa 9 $ pro Monat.