HubSpot-Formular auf einer externen Website einrichten und formatieren

Nachdem Sie ein Formular in HubSpot erstellt haben, können Sie es zu Seiten von HubSpot hinzufügen oder zu Seiten, die außerhalb von HubSpot erstellt wurden. Wenn Ihr Inhalt außerhalb von HubSpot gehostet wird, können Sie Formulare mit den folgenden Methoden hinzufügen:

• Betten Sie das Formular ein, indem Sie den Einbettungscode kopieren und auf Ihrer externen Seite hinzufügen.
• Verwenden Sie den Link zum Teilen des Formulars, der eine eigenständige Webseite für Ihr Formular bietet, auf die Sie verlinken können.

Bei beiden Methoden werden Änderungen am Formular automatisch im Live-Formular auf Ihrer externen Website aktualisiert. Sie können Ihr eingebettetes HubSpot-Formular im Formular-Editor oder mit CSS in Ihrem externen Stylesheet formatieren.

Bevor Sie loslegen

• Wenn Sie Ihr Formular als unformatiertes HTML-Formular festlegen möchten, ist diese Option im aktualisierten Formular-Editor nicht verfügbar. Nur Formulare, die mit dem alten Formular-Editor erstellt wurden, können als unformatiertes HTML festgelegt werden.
• WennSie Ihr HubSpot-Formular auf einer externen Seite einbetten, müssen Sie den HubSpot-Tracking-Code installieren, um Analytics nachzuverfolgen. Erfahren Sie, wie Sie den HubSpot-Tracking-Code installieren.

Styling Ihres Formulars 

Passen Sie den Text, die Eingabefelder, die Schaltfläche und den Hintergrund für Ihr Formular und Ihre Formularschritte an. Styling-Optionen, die auf der Registerkarte Globales Styling konfiguriert wurden, 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. Sie können die Formatvorlage für die folgenden Formularkomponenten 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. 

Kopieren Sie den Code zum Einbetten des Formulars

Sie können Ihr HubSpot-Formular auf Ihrer externen Seite einbetten, 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 rufen Sie den Einbettungscode auf: 

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.

Verwenden Sie den Freigabe-Link, um eine eigenständige Formularseite freizugeben. 

Sie können Ihr Formular mit dem Freigabe-Link teilen, der das Formular auf einer eigenständigen Webseite anzeigt. Dieser Freigabelink kann nicht ausgeblendet oder als privat festgelegt werden. Jeder, der den Freigabel-Link hat, kann auf das Formular zugreifen. 

So greifen Sie auf den Freigabe-Link 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 Freigabelink kopieren.
6. Klicken Sie unten auf Kopieren. Dadurch wird die Webadresse der Formularseite in Ihre Zwischenablage kopiert.
7. Ö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.

Ihr eingebettetes Formular mit CSS in Ihrem externen Stylesheet formatieren 

Benutzer in einem Marketing Hub oder Content Hub Professional- oder Enterprise-Account können Formulare einbetten und mit CSS im externen Stylesheet gestalten.  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.