So integrieren Sie HubSpot & Webflow

Wenn Sie Ihre Website mit Webflow erstellen und hosten, aber weiterhin HubSpot-Formulare nutzen und beide Systeme miteinander verbinden möchten, fragen Sie sich vielleicht, wie das am besten gelingt. In diesem Artikel zeigen wir die besten Wege, Webflow mit HubSpot zu integrieren, damit Sie das Beste aus beiden Tools herausholen.

Option 1: Webflow-Enterprise-Integration mit HubSpot

Ärgerlicherweise steht die „offizielle“ Integration mit HubSpot derzeit nur zur Verfügung, wenn Sie die Enterprise-Version von Webflow kaufen. Die Integration ist damit recht unkompliziert und funktioniert per Plug and Play. Doch was ist, wenn Sie keinen Webflow Enterprise Plan wollen oder brauchen, nur weil Sie die HubSpot-Integration benötigen?

Option 2: Formulare nutzen, die keine HubSpot-Formulare sind

HubSpot bietet eine Konfigurationsoption, mit der Sie Formularübermittlungen von Nicht-HubSpot-Formularen auf einer Website erfassen können, auf der der HubSpot-Tracking-Code installiert ist. Damit das funktioniert, muss diese Option in Ihren HubSpot-Einstellungen unter „Formulare“ aktiviert sein.

Sobald sie aktiviert ist und der HubSpot-Tracking-Code auf der Website und der Seite mit dem Formular installiert ist, erfasst HubSpot die Daten aus diesem Formular. Dabei gibt es einige Voraussetzungen und Einschränkungen, die HubSpot in diesem Artikel aufführt. Damit Formularübermittlungen in HubSpot erfasst werden, muss Ihr Formular:

• ein statisches HTML-Formular sein.
• in HTML-<form>-Tags eingebettet sein.
• nicht in einem <iframe> liegen.
• ein E-Mail-Eingabefeld enthalten.

Falls Sie sich dabei unsicher sind, brauchen Sie hier eventuell die Hilfe eines Entwicklers. Ist die Konfiguration abgeschlossen, erscheint jedes über Webflow abgeschickte Formular im Formularbereich von HubSpot. Beachten Sie, dass dort teils ungewöhnliche Formularnamen auftauchen können, da der Name aus dem CSS-Code der Website übernommen wird.

Das Tool erkennt Formulare auf Ihrer Website anhand des CSS-Selektors des Formulars. Hat Ihr Formular also die CSS-ID „gform_7“, erscheint es in Ihrem Formular-Dashboard als „#gform_7“. Sobald ein Formular im Tool für Nicht-HubSpot-Formulare auftaucht, können Sie es umbenennen, damit Sie und Ihr Team es leichter erkennen.

Der Vorteil von Option 2 ist, dass Sie den Formular-Builder von Webflow nutzen und die Formulare nach Belieben gestalten können, ohne HubSpot-Formulare einbetten zu müssen, die womöglich anders aussehen und zusätzlichen JavaScript-Code erfordern.

Ein weiterer Nachteil dieser Option: Nicht-HubSpot-Formulare lassen sich nicht als Event-Trigger für Google Ads verwenden. Das ist nicht zwingend nötig, aber wenn Sie Formularübermittlungen als Event in HubSpot nutzen möchten, um sie an Google Ads zurückzuspielen, muss es ein HubSpot-Formular sein, was ein wenig lästig ist.

Option 3: Eingebettete HubSpot-Formulare verwenden

Die dritte Option ist die übliche Einbettung Ihrer HubSpot-Formulare. Das ist unkompliziert: Sie kopieren den Einbettungscode des HubSpot-Formulars und fügen ihn im Webflow Designer in Ihre Seite ein. Dafür nutzen Sie die Embed-Funktion von Webflow.

Hier ein Video aus der Wissensdatenbank von Webflow zum Embed-Code. Wenn Sie einen Core-, Growth-, Agency- oder Freelancer-Workspace haben oder Ihre Website einen aktiven Site-Plan besitzt, können Sie das Element Embed verwenden.

Unten sehen Sie ein Beispiel für einen HubSpot-Formular-Einbettungscode. Sie erhalten ihn in HubSpot, indem Sie auf das Formular und dann auf „Teilen“ klicken.

Ein möglicher Nachteil dieser Option zur Integration von HubSpot-Formularen in Webflow ist, dass das Formular anders aussehen kann als die Formulare in Webflow. Sie können zwar in HubSpot die Formulareinstellung ändern, um jegliches Styling zu entfernen, doch dann ist es recht mühsam, CSS-Styles für alle Elemente des Formulars zu erstellen und anzuwenden, damit es zu Ihren Webflow-Formularen passt.

Zusammenfassung

HubSpot und Webflow harmonieren nicht so gut miteinander wie manch andere Tools, lassen sich aber trotzdem recht einfach konfigurieren. Die Funktion für Nicht-HubSpot-Formulare ist sehr hilfreich, um Ihre Webflow-Formulare mit HubSpot zu verbinden, allerdings verlieren Sie dabei etwas Funktionalität. Im Idealfall betten Sie Ihr HubSpot-Formular ein und passen das Styling an Ihre Website an. Dafür brauchen Sie womöglich die Hilfe eines Webentwicklers.