HubSpot-Formular auf einer externen Website einrichten und formatieren

 Nachdem Sie ein Formular in HubSpot erstellt haben, können Sie es zu HubSpot-Seiten hinzufügen oder zu Seiten, die außerhalb von HubSpot erstellt wurden. 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. Formatieren Sie nach dem Hinzufügen Ihres Formulars Ihr eingebettetes HubSpot-Formular auf externen Seiten im Formular-Editor oder mit CSS in Ihrem externen Stylesheet.

Bitte beachten: Es ist nicht möglich, Ihr Formular im aktualisierten Editor als unformatiertes HTML festzulegen. Nur Formulare, die mit dem alten y-Editor erstellt wurden, können als unformatiertes HTML festgelegt werden.

Ihr Formular mit Stilen formatieren 

Passen Sie den Text, die Eingabefelder, die Schaltfläche und den Hintergrund für Ihr Formular und die Schritte des Formulars an. Die Stiloptionen, die auf dem Tab Globale Stile konfiguriert wurden, werden auf alle Formularschritte angewendet. Es ist nicht möglich, einzelne Formularschritte separat zu formatieren. 

• Gehen Sie in Ihrem HubSpot-Account zum Abschnitt Marketing und klicken Sie dann auf Formulare.
• Erstellen Sie ein neues Formular oder fahren Sie mit der Maus über ein bestehendes Formular und klicken Sie auf Bearbeiten.
• Klicken Sie auf der linken Seite auf das Styling-Symbol.

• Bei der Anpassung Ihres Textes, Ihrer Eingabefelder oder Ihres Buttons können Sie mit Hilfe der Schnellfeldeingabestile aus vorhandenen Stilen wählen. Alternativ dazu können Sie die Formatierung für jede Komponente Ihres Formulars manuell 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. 

Den Code zum Einbetten des Formulars hinzufügen

So rufen Sie den Formular einbetten Code auf: 

• Gehen Sie in Ihrem HubSpot-Account zum Abschnitt Marketing und klicken Sie dann auf Formulare.
• Bewegen Sie den Mauszeiger über ein Formular und klicken Sie auf Aktionen >teilen.  
• Klicken Sie auf die Registerkarte Einbetten-Code .
• 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 zuordnen, wird der einbetten Code der Formular geändert. In diesem Fall müssen Sie den eingebetteten Code erneut 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 Ihre Formular nachzuverfolgen, muss Ihr HubSpot Tracking-Code auf jeder externen Seite installiert werden, auf der Sie eine 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 Freigabelink kann nicht ausgeblendet oder als privat festgelegt werden. Jeder, der den Freigabel-Link hat, kann auf das Formular zugreifen. 

• Gehen Sie in Ihrem HubSpot-Account zum Abschnitt Marketing und klicken Sie dann auf Formulare.
• Bewegen Sie den Mauszeiger über ein Formular und klicken Sie auf Aktionen >teilen.  
• Klicken Sie im Dialogfeld auf den Tab Freigabe-Link. 
• Klicken Sie auf Kopieren, um die URL der Formularseite in die Zwischenablage zu kopieren. 
• Öffnen Sie in Ihrem Browser ein neues Fenster oder einen neuen Tab 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.