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.

HubSpot-Formular auf einer externen Website einrichten und gestalten

Zuletzt aktualisiert am: Februar 19, 2024

Mit einem der folgenden Abonnements verfügbar (außer in den angegebenen Fällen):

Alle

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

  • Durch Einbetten des Formularcodes in eine bestehende Seite.
  • Durch Erstellen einer eigenständigen Formularseite, 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. Nachdem Sie Ihr Formular hinzugefügt haben, können Sie Ihr eingebettetes HubSpot-Formular auf Ihren externen Seiten im Formular-Editor oder mit CSS in Ihrem externen Stylesheet stylen.

Wenn Sie mit WordPress arbeiten, erfahren Sie, wie Sie unter ein Formular in Ihren WordPress Post oder Ihre Seiteeinfügen.

Bitte beachten Sie: Ab dem 16. Mai 2024 muss beim Einbetten des Einbettungscodes Ihres Formulars auf einer externen Seite die Domain der Seite als Site-Domain hinzugefügt werden, um als vertrauenswürdige Domain behandelt zu werden. Wenn nicht, werden die Übermittlungen an das Formular auch an Ihre Spam-Übermittlungengefiltert.

Formular-Einbettungscode hinzufügen

Kein Zugriff auf den Einbettungscode des Formulars: 
  • Klicken Sie in Ihrem HubSpot-Account auf Marketing > Lead-Erfassung und dann auf 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 eine Salesforce-Kampagne mit Ihrem Formular verknüpfen, 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 Freigabe-Link teilen. Bei einem Freigabe-Link wird das Formular auf einer eigenständigen Seite unter seiner eigenen URL angezeigt. Dieser Freigabe-Link kann nicht ausgeblendet oder als privat festgelegt werden. Jeder, der den Freigabel-Link hat, kann auf das Formular zugreifen. 

  • Klicken Sie in Ihrem HubSpot-Account auf Marketing > Lead-Erfassung und dann auf Formulare
  • Bewegen Sie den Mauszeiger über ein Formular und klicken Sie auf „Aktionen“ > „Teilen“.
  • Klicken Sie im Dialogfeld auf die Registerkarte Link freigeben 
  • Klicken Sie auf Copy, um die URL der Formularseite in die 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 Seiten-URL des Formulars auch direkt an andere weitergeben, um ihnen den Zugriff auf das Formular zu ermöglichen.

Eingebettetes Formular im Formular-Editor gestalten

Beim Styling Ihres eingebetteten Formulars mit dem HubSpot-Formular-Editor können Sie entweder ein Design verwenden oder Ihren eigenen benutzerdefinierten Stil anwenden. 

Bitte beachten Sie: Designs und Styles, die im Formular-Editor eingestellt werden, gelten nur für eingebettete Formulare oder eigenständige FormularseitenFormulare auf Ihren HubSpot-Seiten können nurmit den Formularmodul-Stiloptionen im Content-Editor gestylt werden.

Ihr Formular mit einem Design gestalten

Wenn Sie Ihre Formulare gestalten möchten, ohne benutzerdefinierten Code zu schreiben, können Sie voreingestellte Designs auf Ihr eingebettetes Formular oder eigenständige Formularseiteanwenden. Diese Designs fügen weitere Anpassungsoptionen für Ihre Formulare hinzu, zusätzlich zu den globalen Styling-Einstellungen von .

So stylen Sie Ihr Formular mit einem Design: 

  • Klicken Sie in Ihrem HubSpot-Account auf Marketing > Lead-Erfassung und dann auf Formulare.
  • Bewegen Sie den Mauszeiger über ein Formular und klicken Sie auf „Bearbeiten“.
  • Klicken Sie im Formular-Editor auf die Registerkarte Stil & Vorschau .
  • Wenn Sie ein altes Formular bearbeiten, deaktivieren Sie im linken Fensterbereich das Kontrollkästchen Altes Design beibehalten . Dadurch wird das frühere Standard-Styling von HubSpot, das auf dieses Formular angewendet wurde, entfernt. Dem Formular hinzugefügter benutzerdefinierter CSS- oder JavaScript-Code funktioniert 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.

 

Einen benutzerdefinierten Stil verwenden

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

So wenden Sie einen benutzerdefinierten Stil an: 

  • Klicken Sie in Ihrem HubSpot-Account auf Marketing > Lead-Erfassung und dann auf 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 im linken Fensterbereich auf den Abschnitt Style. Hier können Sie Breite, Schriftartfamilie, Schriftgrade und Schriftfarben für Formularfelder sowie den Formular-Button konfigurieren. Diese Stile werden für jedes einzelne Formular festgelegt und überschreiben die globalen Einstellungen für den Stil des Formulars .
  • 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 rohes HTML-Formular einbetten und dann dieses eingebettete Formular mit CSS in Ihrem externen Stylesheet gestalten. 

So stylen Sie Ihr eingebettetes Formular mit CSS: 

  • Klicken Sie in Ihrem HubSpot-Account auf Marketing > Lead-Erfassung und dann auf 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 hier, um den Schalter Als rohes HTML-Formular einstellen einzuschalten. Das Formular wird als unformatiertes 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 Einbettungscode für das Formular auf Ihrer externen Seite ein. Wenn Sie Ihr Formular bereits eingebettet haben, müssen Sie den vorhandenen Einbettungscode durch diese neue, ungestylte Version ersetzen. Nach dem Einbetten Ihres Formulars:
    • Sie können das Formular in Ihrem externen Stylesheet mit CSS formatieren.
    • Sie können auch den Einbettungscode des Formulars ändern, um zusätzliche Anpassungen des Formulars vorzunehmen. Da HubSpot-Formulare mit JavaScript und nicht mit HTML erstellt werden, erfordert die Anpassung des eingebetteten Codes die Hilfe eines Entwicklers, der sich mit JavaScript auskennt

 

War dieser Artikel hilfreich?
Dieses Formular wird nur verwendet, um Feedback zur Dokumentation zu sammeln. Erfahren Sie, wie Sie Hilfe bei Fragen zu HubSpot erhalten können.