Ein HubSpot Formular auf einer externen Website einrichten und gestalten (alt)

 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. 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.

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

Bitte beachten: Es wird empfohlen, den aktualisierten Formular-Editor zu verwenden, um Formulare zu erstellen und zu verwalten. Dieser Artikel sollte nur als Referenz für vorhandene Formulare dienen, die mit dem alten Editor erstellt wurden. Erfahren Sie mehr über das Styling von Formularen auf einer externen Website. 

Den Code zum Einbetten des Formulars hinzufügen

Bitte beachten: Ab dem 16. Mai 2024 muss beim Einbetten des Einbettungscodes Ihres Formulars auf einer externen Seite die Domain der Seite als Website-Domain hinzugefügt werden, um als vertrauenswürdige Domain zu gelten. Wenn nicht, werden die Einsendungen des Formulars auch in Ihre Spam-Einsendungen gefiltert.

• 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.
• 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. 

• 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 Ihre 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.
  
  

Ihr eingebettetes Formular im Formular-Editor formatieren

Wenn Sie Ihr eingebettetes Formular mit dem HubSpot-Formular-Editor formatieren, 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 Formularseiten.   Formulare auf Ihren HubSpot-Seiten können nurmit den Formularmodul-Stiloptionen im Content-Editor gestylt werden.

Ihr Formular mit einem Design formatieren 

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

So formatieren Sie Ihr Formular mit einem Design: 

• 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 Bearbeiten.
• Klicken Sie im Formulare-Editor auf den Tab Stil & Vorschau.
• Wenn Sie ein altes Formular bearbeiten, deaktivieren Sie im linken Bereich das Kontrollkästchen Design beibehalten. Dadurch wird die vorherige auf dieses Formular angewendete HubSpot-Standardformatierung gelöscht. 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

Sie können Formulare auch auf einer detaillierteren Ebene formatieren. 

So wenden Sie einen benutzerdefinierten Stil an: 

• 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 Bearbeiten.
• Wenn Sie ein Marketing Hub Starter -, Professional- oder Enterprise-Abonnement haben, klicken Sie im Formular-Editor auf die Registerkarte "Stilvorschau & ".  
  • 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 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.
    
    

Ihr eingebettetes Formular mit CSS in Ihrem externen Stylesheet formatieren (alt)

Wenn Sie einMarketing Hub- oder Content Hub Professional- oder Enterprise-Abonnement mit Ihrem HubSpot-Account haben, können Sie Ihr altes Formular als unformatiertes HTML-Formular einbetten und dann dieses eingebettete Formular mit CSS in Ihrem externen Stylesheet formatieren. 

Bitte beachten: Sie können alte Formulare nur als unformatierten HTML festlegen. Erfahren Sie mehr über das Styling Ihres eingebetteten Formulars mit CSS im aktualisierten Formular-Editor. 

So formatieren Sie Ihr eingebettetes Formular mit CSS: 

• 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 Bearbeiten.
• Klicken Sie im Formulare-Editor auf den Tab Stil & Vorschau.
• Klicken Sie auf den Schalter Als unformatiertes HTML-Formular festlegen, um ihn zu aktivieren. 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 mit dieser neuen Version ohne Formatierung ersetzen. Nachdem Sie Ihr Formular eingebettet haben:
  
  • Sie können das Formular in Ihrem externen Stylesheet mit CSS formatieren.
  • Sie können auch den Code zum Einbetten des Formulars ändern, um zusätzliche Formularanpassungen vorzunehmen. Da HubSpot-Formulare auf JavaScript und nicht auf HTML basieren, wenden Sie sich beim Anpassen des Codes zum Einbetten des Formulars an einen Entwickler, der mit JavaScript vertraut ist.