HubSpot-Formular auf einer externen Website einrichten und gestalten

 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.

Formular-Einbettungscode hinzufügen

• Klicken Sie in Ihrem HubSpot-Account auf Marketing > Lead-Erfassung und 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. 

• Klicken Sie in Ihrem HubSpot-Account auf Marketing > Lead-Erfassung und 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.
  
  

Eingebettetes Formular im Formular-Editor gestalten

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

Ihr Formular mit einem Design gestalten

Wenn Sie Ihre Formulare ohne benutzerdefinierten Code gestalten 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 gestalten Sie Ihr Formular mit einem Design:

• Klicken Sie in Ihrem HubSpot-Account auf Marketing > Lead-Erfassung und 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:

• Klicken Sie in Ihrem HubSpot-Account auf Marketing > Lead-Erfassung und 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“.
  
  

Eingebettetes Formular mit CSS in Ihrem externen Stylesheet gestalten 

Wenn Sie einMarketing Hub- oder CMS 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:

• Klicken Sie in Ihrem HubSpot-Account auf Marketing > Lead-Erfassung und 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 Style 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.