Zum Hauptinhalt
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: September 15, 2022

Produkte/Lizenzen

Alle

 Nachdem Sie ein Formular in HubSpot erstellt haben, können Sie es zu Seiten von HubSpot oder Seiten, die außerhalb von HubSpot erstellt wurden, hinzufügen. Formulare können auf Ihrer externen, nicht von HubSpot gehosteten Website geteilt werden, indem Sie entweder:

  • Einbetten des Formularcodes auf einer vorhandenen Seite.
  • Eine eigenständige Formularseite erstellen, auf die Sie verlinken können.

Mit beiden Methoden werden Änderungen am Formular im Formular-Tool von HubSpot automatisch auf das Live-Formular auf Ihrer externen Website übertragen. Nach dem Hinzufügen Ihres Formulars können Sie Ihr eingebettetes HubSpot-Formular auf externen Seiten im Formular-Editor oder mit CSS in Ihrem externen Stylesheet gestalten.

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

Formular-Einbettungscode hinzufügen

So greifen Sie auf den Formular-Einbettungscode zu: 
  • Gehen Sie in Ihrem HubSpot-Account zu Marketing > Lead-Erfassung > Formulare.
  • Bewegen Sie den Mauszeiger über ein Formular und klicken Sie auf „Aktionen“ > „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. 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.
  • Klicken Sie auf Kopieren.
  • 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. 


Eine eigenständige Formularseite erstellen 

Sie können Ihr Formular auch über den Link Teilen teilen. In einem Share-Link wird das Formular auf einer eigenständigen Seite unter einer eigenen URL angezeigt. Dieser Freigabe-Link kann nicht ausgeblendet oder privat gemacht werden. Jeder, der den Freigabelink hat, kann auf das Formular zugreifen.   

  • Gehen Sie in Ihrem HubSpot-Account zu Marketing > Lead-Erfassung > Formulare
  • Bewegen Sie den Mauszeiger über ein Formular und klicken Sie auf „Aktionen“ > „Teilen“
  • Klicken Sie im Dialogfeld auf die Registerkarte Freigabe-Link .
  • Klicken Sie auf „Kopieren“, um die URL der Formularseite in Ihre Zwischenablage zu kopieren. 
  • Ö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.

Eingebettetes Formular im Formular-Editor gestalten

Wenn Sie Ihr eingebettetes Formular mit dem HubSpot-Formular-Editor gestalten, können Sie entweder ein Design verwenden oder Ihren eigenen benutzerdefinierten Stil anwenden. 

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 mit den Stiloptionen des Formularmoduls im Content-Editor formatiert werden.

Formular mit einem Design gestalten

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 diesen Designs verfügen Sie zusätzlich zu globalen Stileinstellungen für Formulare über weitere Anpassungsoptionen für Formulare.

So gestalten Sie Ihr Formular mit einem Design: 

  • Gehen Sie in Ihrem HubSpot-Account zu Marketing > Lead-Erfassung > Formulare.
  • Bewegen Sie den Mauszeiger über ein Formular und klicken Sie auf „Bearbeiten“
  • Klicken Sie im Formular-Editor auf die Registerkarte Stil & Vorschau.
  • Deaktivieren Sie beim Bearbeiten eines Legacy-Formulars im linken Bereich das Kontrollkästchen Altes Design beibehalten. Dadurch 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 gilt nicht für neue Formulare, die in Ihrem Account erstellt werden. 
  • Wählen Sie ein Design aus.
  • Klicken Sie oben rechts auf „ Veröffentlichen“ oder „ Aktualisieren“.

 

Benutzerdefinierten Stil verwenden

Wenn Sie ein Marketing Hub Starter-, Professional- oder  Enterprise-Abonnement mit Ihrem HubSpot-Konto haben, können Sie eingebettete Formulare auch auf einer detaillierteren Ebene gestalten.

So wenden Sie einen benutzerdefinierten Stil an: 

  • Gehen Sie in Ihrem HubSpot-Account zu Marketing > Lead-Erfassung > Formulare.
  • Bewegen Sie den Mauszeiger über ein Formular und klicken Sie auf „Bearbeiten“
  • Klicken Sie im Formular-Editor auf die Registerkarte Stil & Vorschau.
  • Klicken Sie In der linken Ansicht auf den Abschnitt Stil. 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.
  • Nachdem Sie Ihr Formular angepasst haben, klicken Sie oben rechts auf „ Veröffentlichen“ oder „ Aktualisieren“.



Eingebettetes Formular mit CSS in Ihrem externen Stylesheet gestalten 

Wenn Sie ein Marketing Hub- oder CMS Hub Professional- oder Enterprise-Abonnement mit Ihrem HubSpot-Account haben, können Sie Ihr Formular als RAW-HTML-Formular einbetten und dieses eingebettete Formular dann mit CSS in Ihrem externen Stylesheet gestalten. 

Eingebettetes Formular mit CSS gestalten: 

  • Gehen Sie in Ihrem HubSpot-Account zu Marketing > Lead-Erfassung > Formulare.
  • Bewegen Sie den Mauszeiger über ein Formular und klicken Sie auf „Bearbeiten“
  • 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.
  • Klicken Sie oben rechts auf „Veröffentlichen“ oder „Aktualisieren“.
  • 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:
    • Sie können das Formular 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

 

Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.