Hinweis: Dieser Artikel wird aus Kulanz zur Verfügung gestellt. Er wurde automatisch mit einer Software übersetzt und unter Umständen nicht korrekturgelesen. Die englischsprachige Fassung gilt als offizielle Version und Sie können dort die aktuellsten Informationen finden. Hier können Sie darauf zugreifen.
Forms

HubSpot-Formular auf einer externen Website einrichten und gestalten

Zuletzt aktualisiert am: Oktober 19, 2020

Produkte/Lizenzen

Alle

Formulare können auf zwei Arten auf Ihrer externen, nicht von HubSpot gehosteten Website ausgetauscht werden.

Mit beiden Methoden wird jede Änderung des Formulars im Formularwerkzeug von HubSpot automatisch auf das Live-Formular auf Ihrer externen Website übertragen.

Erfahren Sie, wie Sie HubSpot-Formulare zu WordPress-Seiten oder -Beiträgen hinzufügen.

Formular-Einbettungscode hinzufügen

Bitte beachten Sie: Wenn Sie Ihrem Formular eine Salesforce-Kampagne zuordnen, wird der Einbettungscode des Formulars geändert. In diesem Fall müssen Sie mit Erneut hinzufügen den Einbettungscode zu Ihrer externen Website hinzufügen.

  • Gehen Sie in Ihrem HubSpot-Account zu Marketing > Lead-Erfassung > Formulare.
  • Erstellen Sie ein neues Formular oder bewegen Sie den Mauszeiger über ein vorhandenes Formular, klicken Sie auf das Dropdown-Menü „Aktionen“ und wählen Sie „Formular bearbeiten“ aus.
  • Klicken Sie auf die Registerkarte Optionen, um auszuwählen, was passieren soll, nachdem ein Besucher Ihr Formular abgeschickt hat. Sie können wählen, ob Sie Ihre Besucher auf eine Dankesseite weiterleiten oder eine Inline-Dankesnachricht anzeigen möchten, wenn ein Besucher Ihr Formular abschickt.
  • Klicken Sie im Formular-Editor oben rechts auf „Teilen“.
  • Wenn Sie im Dialogfeld Kontakte hinzufügen möchten, die das Formular an eine Salesforce-Kampagne senden, klicken Sie auf das Dropdown-Menü Kontakte zu einer Salesforce-Kampagne hinzufügen und wählen Sie eine Kampagne aus.
  • Klicken Sie auf Kopieren.
    forms-editor-share-form-copy-form-embed
  • Klicken Sie oben rechts auf „Veröffentlichen“
  • Fügen Sie den Einbettungscode in das HTML-Modul auf Ihrer externen Seite ein. Um Analytics für Ihr Formular nachzuverfolgen, muss Ihr HubSpot-Tracking-Code auf jeder externen Seite installiert werden, auf der Sie ein HubSpot-Formular platzieren. Wenn kein HubSpot-Tracking-Code installiert ist, sammelt HubSpot Formulareinsendungen, aber es werden keine Analytics aufgezeichnet. 

Wenn Sie mit WordPress arbeiten, erfahren Sie, wie Sie ein Formular in Ihrem WordPress-Beitrag oder Ihrer WordPress-Seite einfügen.

Eine eigenständige Formularseite erstellen 

Sie können Ihr Formular über eine Formularseite teilen, so dass es auf einer eigenen Seite unter einer eigenen URL existiert.  

  • Gehen Sie in Ihrem HubSpot-Account zu Marketing > Lead-Erfassung > Formulare
  • Erstellen Sie ein neues Formular oder bewegen Sie den Mauszeiger über ein vorhandenes Formular, klicken Sie auf das Dropdown-Menü „Aktionen“ und wählen Sie „Formular bearbeiten“ aus.
  • Klicken Sie oben rechts auf Freigeben.
  • Klicken Sie im Dialogfeld auf die Registerkarte Freigabe-Link .
  • Klicken Sie auf „Kopieren“, um die URL der Formularseite in Ihre Zwischenablage zu kopieren.

share-form-own-page

  • Klicken Sie oben rechts auf Veröffentlichen.
  • Öffnen Sie in Ihrem Browser ein neues Fenster oder eine neue Registerkarte und fügen Sie die URL Ihrer Formularseite in die Adressleiste ein, um sie zu laden. Sie können die URL der Formularseite auch direkt für andere freigeben, um ihnen Zugriff auf das Formular zu geben.
Wenn Sie ein Formular auf Ihrer WordPress-Website einbetten, müssen Sie möglicherweise zusätzliche CSS-Definitionen in Ihrem externen Stylesheet anwenden, um das Formular responsiv zu gestalten.

Wenn das Formular nicht in WordPress funktioniert oder der Einbettungscode geändert wird, wenn Sie die Live-Seite anzeigen, müssen Sie ggf. das Formular mit einem Plug-in hinzufügen, um sicherzustellen, dass der Einbettungscode intakt bleibt. Wenn Sie die neueste Version von Gutenberg (entfernt Inline-JavaScript) verwenden, betten Sie Formulare und CTAs mithilfe des Plug-ins zum Blockieren von Inline-JS für Gutenberg auf Ihrer Seite ein.

Eingebettetes Formular auf externen Seiten gestalten

Gestalten Sie Ihr eingebettetes HubSpot-Formular auf externen Seiten auf zweierlei Weise: im Formular-Editor oder mit CSS in Ihrem externen Stylesheet.

Im Formular-Editor

Design

Wenn Sie Ihre Formulare ohne benutzerdefinierten Code gestalten möchten, können Sie vordefinierte Designs auf Ihr eingebettetes Formular oder die eigenständige Formularseite anwenden. Mit den Designs verfügen Sie zusätzlich zu globalen Stileinstellungen für Formulare über weitere Anpassungsoptionen für die Formulare.

  • Navigieren Sie in Ihrem HubSpot-Account zu „Marketing“ > „Lead-Erfassung“ > „Formulare“.
  • Klicken Sie auf den Namen eines Formulars.
  • Klicken Sie im Formular-Editor auf die Registerkarte Stil & Vorschau.
  • Deaktivieren Sie im linken Bereich im Abschnitt „Design“ das Kontrollkästchen „Altes Design beibehalten“.

Bitte beachten: Durch das Deaktivieren des Kontrollkästchens „Altes Design beibehalten“ wird die vorherige auf dieses Formular angewendete HubSpot-Standardformatierung gelöscht. Dem Formular hinzugefügte benutzerdefinierte CSS oder JavaScript funktionieren dann nicht mehr. Dieses Kontrollkästchen ist nur für Legacy-Formulare verfügbar und ist keinem neuen Formular mehr verfügbar, das in Ihrem Account erstellt wird. 

  • Wählen Sie eines von vier Designs aus.

 

Stil (nur Marketing Hub Starter, Professional, Enterprise oder Legacy Marketing Hub Basic)

Sie können eingebettete Formulare nicht nur mit Designs, sondern auch auf einer detaillierteren Ebene gestalten.

  • Navigieren Sie in Ihrem HubSpot-Account zu „Marketing“ > „Lead-Erfassung“ > „Formulare“.
  • Klicken Sie auf den Namen eines Formulars.
  • Klicken Sie im Formular-Editor auf die Registerkarte Stil & Vorschau.
  • Klicken Sie im linken Bereich auf den Abschnitt > Stil, um ihn zu erweitern. Hier können Sie Breite, Schriftartfamilie, Schriftgrade und Schriftfarben für Formularfelder sowie den Formular-Button anpassen.

Diese Stile werden für einzelne Formulare festgelegt, und sie überschreiben globale Stileinstellungen für Formulare.

Bitte beachten: Im Formular-Editor festgelegte Designs und Stile gelten nur für eingebettete Formulare und eigenständige Formularseiten. Formulare auf Ihren HubSpot-Seiten können nur formatiert werden mit den Stiloptionen des Formularmoduls im Content-Editor.

Formular mit CSS im externen Stylesheet gestalten (nur Marketing Hub Professional, Enterprise oder Legacy Marketing Hub Basic)

  • Navigieren Sie in Ihrem HubSpot-Account zu „Marketing“ > „Lead-Erfassung“ > „Formulare“.
  • Klicken Sie auf den Namen des Formulars.
  • Klicken Sie im Formular-Editor auf die Registerkarte „Stil & Vorschau“.
  • Klicken Sie auf den Schalter „Als unformatiertes HTML-Formular festlegen“, um ihn zu aktivieren. Das Formular wird als HTML-Element auf Ihrer externen Seite und nicht innerhalb eines iFrame angezeigt, und alle standardmäßig auf das Formular angewendeten HubSpot-Formatierungen werden gelöscht.

options-unstyled-form

  • Klicken Sie oben rechts auf „Teilen“.
  • Klicken Sie im Dialogfeld auf „Kopieren“, um den Formular-Einbettungscode zu kopieren.
  • Fügen Sie den Formular-Einbettungscode zu Ihrer externen Seite hinzu. Wenn Sie Ihr Formular bereits eingebettet haben, müssen Sie den vorhandenen Einbettungscode mit dieser neuen Version ohne Style ersetzen.
  • Nach Einbetten des Formulars können Sie es in Ihrem externen Stylesheet mit CSS gestalten. 
  • Sie können auch den Formular-Einbettungscode ändern, um zusätzliche Formularanpassungen vorzunehmen. Da HubSpot-Formulare auf JavaScript und nicht auf HTML basieren, wenden Sie sich beim Anpassen des Formular-Einbettungscodes an einen Entwickler, der mit JavaScript vertraut ist.