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

Formular-Einbettungscode hinzufügen

• 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 Ihrem Formular eine Salesforce-Kampagne zuordnen, 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 die Registerkarte 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 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 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: Im Formular-Editor festgelegte Designs und Stile gelten nur für eingebettete Formulare oder eigenständige Formularseiten. Formulare auf Ihren HubSpot-Seiten können nur mit den Stiloptionen des Formularmoduls im Content-Editor formatiert werden.

Ihr Formular mit einem Design formatieren

Wenn Sie Ihre Formulare ohne benutzerdefinierten Code formatieren möchten, können Sie vordefinierte Designs auf Ihr eingebettetes Formular oder die eigenständige Formularseite anwenden. Mit diesen Designs verfügen Sie zusätzlich zu globalen Stileinstellungen für Formulare über weitere Anpassungsoptionen für die Formulare.

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 Formular-Editor auf die Registerkarte 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

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 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.
• Klicken Sie im Formular-Editor auf die Registerkarte Stil & Vorschau.
• 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 einzelne Formulare festgelegt, und sie überschreiben globale Stileinstellungen für Formulare.
• 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 

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

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 Formular-Editor auf die Registerkarte 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 Formular-Einbettungscode zu Ihrer externen Seite hinzu. 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 Formular-Einbettungscode ändern, um zusätzliche Formularanpassungen vorzunehmen. Da HubSpot-Formulare auf JavaScript und nicht auf HTML basieren, wenden Sie sich beim Anpassen des Formular-Einbettungscodes an einen Entwickler, der mit JavaScript vertraut ist.