HubSpot-Formulare stylen und auf einer externen Website einbetten

Verwenden Sie HubSpot-Formulare auf Ihrer externen Website, um Leads zu erfassen und Kontaktdaten automatisch mit Ihrem HubSpot-Account zu synchronisieren. Sie können Ihr Formular in HubSpot formatieren und den Formular-Einbettungscode verwenden, um es zu Ihrer Website hinzuzufügen. Oder verwenden Sie einen Freigabe-Link, um ein eigenständiges Formular an Ihre Zielgruppe zu senden. 

Durch das Einbetten eines Formulars wird sichergestellt, dass Einsendungen direkt mit Ihrem HubSpot-Account synchronisiert werden. Dort können Sie Kontakte verwalten, Automatisierungen auslösen und die Performance analysieren. Sie können beispielsweise ein HubSpot-Formular zu einer Produktseite auf der Website Ihres Unternehmens hinzufügen, um Demoanfragen zu erfassen und mit einer automatisierten E-Mail nachzufassen. 

Wenn Ihr Formular im alten Formular-Editor erstellt wurde, erfahren Sie hier, wie Sie ein altes Formular auf einer externen Website einrichten und formatieren.

Bevor Sie loslegen

Bevor Sie mit dieser Funktion arbeiten, sollten Sie sich die technischen Anforderungen und Überlegungen für die Verwendung von Formularen auf externen Websites ansehen.

Anforderungen

• Wenn Sie ein HubSpot-Formular auf einer externen Website einbetten, müssen Sie die Website-Domain zu Ihren Tracking-Einstellungen hinzufügen. Formulareinsendungen von Domains, die nicht hinzugefügt wurden, werden als Spam markiert.
• Um Analytics auf Ihrem eingebetteten Formular nachzuverfolgen, müssen Sie den HubSpot-Tracking-Code auf Ihrer externen Seite installieren.
  

Einschränkungen und Überlegungen

• Das Festlegen Ihres Formulars als unformatiertes HTML-Formular ist im aktualisierten Formular-Editor nicht verfügbar. Nur Formulare, die mit dem alten Formular-Editor erstellt wurden, können als unformatiertes HTML festgelegt werden.
• Wenden Sie sich zum Anpassen des Einbettungscodes eines Formulars an einen Entwickler, der mit JavaScript vertraut ist. Erweiterte Anpassungen können mit einem benutzerdefinierten Formular und der Formulare-API von HubSpot vorgenommen werden.

Styling Ihres Formulars 

Passen Sie den Text, die Eingabefelder, die Schaltflächen und den Hintergrund für Ihr Formular und die Formularschritte an. Anpassungen von Formularstilen werden auf alle Formularschritte angewendet. Sie können einzelne Schritte des Formulars nicht separat stylen. 

1. Gehen Sie in Ihrem HubSpot-Account zum Abschnitt Marketing und klicken Sie dann auf Formulare.
2. Erstellen Sie ein neues Formular oder bewegen Sie den Mauszeiger über ein vorhandenes Formular und klicken Sie auf Bearbeiten.
3. Klicken Sie im Menü der linken Seitenleiste auf das styles Symbol für Formatieren.
4. Im Bedienfeld "Formularstile " können Sie die folgenden Komponenten anpassen:
   • Felder: Passen Sie das Feld an, einschließlich Hintergrund und Rahmen. Sie können auch die Schriftart, die Schriftgröße und die Farben für Ihre Label sowie die Farben für Ihren Hilfetext, die Platzhalter und den Fehlertext anpassen. 
   • Schaltflächen: Passen Sie die Höhe, die Eckenabrundung, den Hintergrund sowie den Farbverlauf der Schaltfläche an und fügen Sie der Schaltfläche einen Schlagschatten hinzu. Sie können auch die Schriftart, die Schriftgröße und die Farbe für den Text der Schaltfläche anpassen. 
   • Absatz (Rich-Text): Passen Sie die Schriftart, Schriftgröße und Farbe für Ihren Haupttext an. 
   • Überschrift: Passen Sie die Schriftart und Textfarbe Ihrer Überschrift an. Sie können Ihrem Kopfzeilentext einen Schlagschatten hinzufügen. 
   • Hintergrund: Passen Sie den Hintergrund für Ihr Formular und Ihre Formularschritte an. Sie können eine Hintergrundfarbe festlegen oder ein Bild für den Hintergrund verwenden. Sie können KI-Assistenten verwenden, um Bilder zu generieren. Sie können auch einen Rahmen für Ihr Formular festlegen.
   • Fortschrittsleiste: Passen Sie die Fortschrittsleiste in Ihrem Formular an, einschließlich der Farbe der Fortschrittslinie und der Schriftart der Fortschrittsleiste. 

Eine eigenständige Formularseite teilen 

Verwenden Sie einen Freigabe-Link, um Ihr Formular auf einer eigenständigen Seite anzuzeigen. Jeder mit dem Freigabe-Link kann auf das Formular zugreifen. Der Freigabe-Link kann nicht ausgeblendet oder als privat festgelegt werden.

So kopieren Sie den Freigabe-Link:

1. Gehen Sie in Ihrem HubSpot-Account zum Abschnitt Marketing und klicken Sie dann auf Formulare.
2. Bewegen Sie den Mauszeiger über ein Formular und klicken Sie auf Bearbeiten.
3. Klicken Sie oben rechts auf Überprüfen und aktualisieren.
4. Klicken Sie im rechten Bereich unten auf Aktualisieren.
5. Klicken Sie im Dialogfeld auf Freigabelink kopieren.
6. Klicken Sie unten auf Kopieren. Dadurch wird die Webadresse der Seite in Ihre Zwischenablage kopiert.
7. Öffnen Sie in Ihrem Browser ein neues Fenster oder einen neuen Tab und fügen Sie die URL Ihrer Seite 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.

Kopieren Sie den Code zum Einbetten des Formulars

Betten Sie Ihr Formular auf Ihrer externen Seite ein, indem Sie den Formular-Einbettungscode kopieren und auf Ihrer externen Seite einfügen. Um Analytics für Ihr eingebettetes Formular nachzuverfolgen, muss Ihr HubSpot-Tracking-Code auf der externen Seite installiert werden, auf der Sie das HubSpot-Formular einbetten.

So kopieren Sie den Einbettungscode: 

1. Gehen Sie in Ihrem HubSpot-Account zum Abschnitt Marketing und klicken Sie dann auf Formulare.
2. Bewegen Sie den Mauszeiger über ein Formular und klicken Sie auf Bearbeiten. 
3. Klicken Sie oben rechts auf Überprüfen und aktualisieren.
4. Klicken Sie im rechten Bereich unten auf Aktualisieren.
5. Klicken Sie im Dialogfeld auf eingebetteten Code abrufen.
6. Klicken Sie auf der Registerkarte Einbettungscode auf Kopieren.
7. Fügen Sie den Einbettungscode in das HTML-Modul auf Ihrer externen Seite ein.

Auf den Entwicklercode des Formulars zugreifen

Betten Sie Ihr Formular ein und passen Sie den Stil mit CSS in Ihrem externen Stylesheet an. Mit dieser Methode können Sie Standardstile außer Kraft setzen, granulares Styling auf bestimmte Formularelemente anwenden und globale Regeln für ein konsistentes Styling in Ihren eingebetteten Formularen festlegen. Erfahren Sie mehr darüber, wie Sie benutzerdefinierte Stile für eingebettete Formulare mit CSS definieren. 

So greifen Sie auf den Entwicklercode zu: 

1. Gehen Sie in Ihrem HubSpot-Account zum Abschnitt Marketing und klicken Sie dann auf Formulare.
2. Bewegen Sie den Mauszeiger über ein Formular und klicken Sie auf Bearbeiten. 
3. Klicken Sie oben rechts auf Überprüfen und aktualisieren.
4. Klicken Sie im rechten Bereich unten auf Aktualisieren.
5. Klicken Sie im Dialogfeld auf eingebetteten Code abrufen.
6. Klicken Sie auf die Registerkarte Entwicklercode (Erweitert).
7. Um das Risiko einzugehen, dass extern an CSS oder JavaScript vorgenommene Änderungen dazu führen können, dass Ihr Formular nicht mehr funktioniert, aktivieren Sie das Kontrollkästchen Ich verstehe die Risiken, zeige mir den Code .
8. Klicken Sie unten auf Kopieren.
9. Fügen Sie den Formular einbetten Code zu Ihrer externen Seite hinzu. Nachdem Sie Ihr Formular eingebettet haben, können Sie das Formular in Ihrem externen Stylesheet mit CSS formatieren.
   • Die CSS-Variablen, die Sie überschreiben können, sind in diesem Artikel aufgeführt.
   • Globale Stile überschreiben das Styling der obersten Ebene in allen eingebetteten Formularen. Sie können auch einzelne Elemente Ihrer Formulare als Ziel festlegen, z. B. eine Formularelementzeile, Schaltflächen zum Einsenden oder Formularüberschriften.