Gewusst wie: So ersetzen Sie ein auf Ihrer Website vorhandenes Formular durch ein HubSpot-Formular

Zuletzt aktualisiert am: May 16, 2016

Anforderungen

Produkt: HubSpot Marketing
Abonnement: Basic, Pro, & Enterprise

Wir bei HubSpot sind uns bewusst, dass einige unserer Kunden eventuell Websites betreiben, die nicht über HubSpot gehostet werden. Das heißt jedoch nicht, dass Sie über diese Websites erhobene Lead-Daten nicht in HubSpot speichern können. Wir bieten zwei Optionen an: Die Forms API (Formular-API) und der Formulareinbettungscode. Mit dem Einbettungscode können Sie auf Ihrer externen Website weiterhin sämtliche Vorteile von HubSpot-Formularen nutzen, zum Beispiel die Kontaktdatenbank-Integration, Smart Fields und intelligentes Profiling (für Nutzer von HubSpot Professional und Enterprise)Hierzu müssen Sie lediglich den Tracking-Code von HubSpot installieren. Um die vollständige Funktionalität der HubSpot-Formulare zu gewährleisten, muss der Tracking-Code auf jeder veröffentlichten Seite Ihrer Website aktiviert werden, bevor Sie den Einbettungscode hinzufügen.

Wenn Sie sich zusätzliche Funktionalität wünschen, aber dennoch erhobene Kontaktdaten mit HubSpot synchronisieren möchten, können Sie eigene Formulare kodieren und die Formular-API verwenden, um Daten via eines serverseitigen Formular-ActionScripts an HubSpot zu übermitteln. Um die Formular-API verwenden zu können, benötigen Sie einen serverseitigen Entwickler. Einige  Grundkonzepte finden Sie hier. Weitere Informationen zur Formular-API finden Sie in unserer Dokumentation für Entwickler.

Da der Einbettungscode Javascript verwendet, sollten Sie sich zunächst vergewissern, ob Ihr CMS Javascript in den Content-Bereichen Ihrer Seiten unterstützt.

Nachdem Sie Ihr HubSpot-Formular zu Ihrer externen Website hinzugefügt haben (inklusive Tracking-Code), erhalten Sie Zugriff auf die gleichen Eigenschaften wie auf HubSpot-Seiten: Sie können die Quelle von Kontakten und die von ihnen angegebenen Daten auf den einzelnen Seiten sehen, die Performance Ihrer Formulare anhand des Verhältnisses zwischen Seitenaufrufen und Einsendungen analysieren, Listen auf Basis der gesammelten Daten erstellen, Workflows auf Basis von Formulareinsendungen erstellen und mehr. Wenn Sie HubSpot-Formulare auf Websites und Landing-Pages verwenden, die über HubSpot gehostet werden, haben Sie nicht nur den Vorteil, dass Ihr gesamter Content an einem zentralen Ort vereint ist, sondern es ist auch leichter, Seiten zu erstellen bzw. zu veröffentlichen und ihre Performance zu messen. Nichtsdestotrotz können HubSpot-Formulare auch ohne Weiteres auf externen Websites verwendet werden.

Anweisungen

Befolgen Sie folgende Anweisungen, um den Einbettungscode eines HubSpot-Formulars zu kopieren.

1. Öffnen Sie das Formular

Navigieren Sie zu Contacts (Kontakte) > Forms (Formulare), um ein vorhandenes Formular zu öffnen oder ein neues zu erstellen.

2. Klicken Sie auf Embed (Einbetten)

Speichern Sie Ihr Formular und klicken Sie auf die SchaltflächeEmbed (Einbetten).

3. Fügen Sie eine Weiterleitungs-URL oder Inline-Danksagung hinzu.

Geben oder fügen Sie Ihre Weiterleitungs-URL in die erste Zeile ein.

Um ein HubSpot-Formular auf einer externen Website zu verwenden, müssen Ihre Leads nach Einsenden des Formulars auf eine Dankeschön-Seite weitergeleitet werden oder es muss eine Inline-Danksagung angezeigt werden. 

Sie können auch eigenständig eine Inline-Danksagung eingeben, die angezeigt wird, nachdem jemand Ihr Formular ausgefüllt hat.

Wenn Sie die Salesforce-Integration verwenden, können Sie einstellen, dass Kontakte nach Einsenden eines Formulars zu einer bestimmten Salesforce-Kampagne hinzugefügt werden. Wenn Ihre Kontakte das Formular einsenden, werden sie mit Salesforce synchronisiert und zur gewünschten Kampagne hinzugefügt. In der entsprechenden Auswahlliste werden nur aktive Kampagnen angezeigt.

Wenn Sie über die HubSpot-App Änderungen an Formularen vornehmen, wird das Einbettungsformular in der Regel automatisch aktualisiert. Für Änderungen an Salesforce-Kampagnen muss allerdings auch der Einbettungscode ersetzt werden. So ändern Sie eine Kampagne nach Einbetten des Formulars:

  • Rufen Sie das Formular auf
  • Wählen Sie eine neue Kampagne aus
  • Fügen Sie den neuen Einbettungscode für das Formular zu Ihrer externen Website hinzu.

Neue Einsendungen werden automatisch mit der neuen Kampagne assoziiert (basierend auf der ID im Einbettungscode) Alte Einsendungen müssen mit der neuen Kampagne in Salesforce synchronisiert werden.

4. Kopieren Sie den Einbettungscode

Kopieren Sie den Einbettungscode, der im Fenster erscheint. Damit Lead-Daten ordnungsgemäß erfasst und an HubSpot übermittelt werden können, müssen sämtliche Bestandteile des Codes vollständig eingefügt werden.

Wenn Sie neue Eigenschaften zu Ihrem Formular hinzufügen oder bestehende Eigenschaften bearbeiten, werden diese auf Ihrer externen Seite mit den neuen Feldoptionen angezeigt.

5. Speichern Sie das Formular

Vergessen Sie zuletzt nicht, Ihr Formular zu speichern, um zu gewährleisten, dass die neuen Formular-Optionen angewendet werden.

6. Betten Sie Ihr HubSpot-Formular auf Ihrer externen Website ein

Als Nächstes fügen Sie den in Schritt 4 kopierten Einbettungscode des Formulars zu Ihrer externen Website hinzu. Hierzu müssen Sie den HTML-Code der betreffenden externen Seite bearbeiten. Wenn Sie sich nicht sicher sind, ob Sie den Einbettungscode des Formulars zum HTML-Code Ihrer Website hinzufügen sollen, empfehlen wir Ihnen, den Administrator Ihrer Website zu kontaktieren, um zu gewährleisten, dass das Formular ordnungsgemäß und an der richtigen Stelle angezeigt wird.

So bearbeiten Sie Ihren Einbettungscode (für fortgeschrittene Nutzer)

Unter Umständen können Sie den Einbettungscode bearbeiten, um bestimmte Eigenschaften des Formulars, wie etwa die Präsentation, anzupassen. Zum Beispiel wird für eingebettete HubSpot-Formulare automatisch ein bestimmtes Design geladen, damit diese – unabhängig von den jeweiligen CSS-Eigenschaften – auf jeder beliebigen Seite gut aussehen. Erfahrene Benutzer können unter Umständen den Einbettungscode bearbeiten, um das Design des Formulars zu bearbeiten. Hier finden Sie eine vollständige Liste aller Personalisierungs-Optionen für das Einbetten von Formularen.

Vorheriger Artikel:

Weiter zum nächsten Artikel: