HubSpot-Formulare

Last updated:
APPLICABLE PRODUCTS
  • Marketing Hub
    • Starter or Enterprise
  • Sales Hub
    • Starter, Professional, or Enterprise
  • Service Hub
    • Starter, Professional, or Enterprise
  • CMS Hub
    • Professional or Enterprise

Verwenden Sie HubSpot-Formulare, um Informationen von Benutzern zu erfassen, auf die Sie dann in HubSpot zugreifen können. Erfasste Formulardaten können in Ressourcen wie Smart-Content, Listen, Workflows, Content-Personalisierungen und mehr verwendet werden.

Formulare sind ein zentraler Bestandteil der HubSpot Suite und können in einem HubSpot-Account jeder Abonnementstufe erstellt werden. Sie können Links zu Formularen direkt mit Benutzern teilen, Formulardaten über die API übermitteln und sie mithilfe des CMS auf Ihren Website-Seiten einbetten.

In diesem Handbuch erfahren Sie mehr über die Integration von Formularen in Ihre Website mit dem CMS. Weitere Informationen zum Erstellen von Formularen in HubSpot finden Sie in der Wissensdatenbank von HubSpot.

Formulare zu Webseiten hinzufügen

Nach dem Erstellen eines HubSpot-Formulars können Sie es zu Ihren Vorlagen und Seiten hinzufügen. Es gibt mehrere Möglichkeiten, wie ein Formular zu einer Vorlage hinzugefügt werden kann. Welche Sie letztendlich wählen, hängt von Ihrem Anwendungsfall ab. Im Folgenden erfahren Sie, wie Sie mit den folgenden Methoden Formulare zu einer Vorlage hinzufügen:

Verwendung des Formularmoduls

Mithilfe des Standardformularmodul können Content-Autoren Formulare auswählen und Formularoptionen im Seiten-Editor konfigurieren. Um dies zu ermöglichen, können Sie das Formularmodul zu einem Drag-&-Drop-Bereich in Ihrer Vorlage hinzufügen.   

{% dnd_area "dnd_area" class='body-container body-container__landing', label='Main section' %} {% dnd_section vertical_alignment='MIDDLE' %} {% dnd_column width=6, offset=6 %} {% dnd_row %} <!-- Form module tag for use in templates --> {% dnd_module path='@hubspot/form' %} {% end_dnd_module %} {% end_dnd_row %} {% end_dnd_column %} {% end_dnd_section %} {% end_dnd_area %}

Wenn Sie keinen Drag-&-Drop-Bereich in Ihrer Code-Vorlage verwenden, können Sie das Formularmodul mit der folgenden Syntax erstellen. Mit diesem Tag können Sie auch Formulardetails angeben, z. B. ein bestimmtes Formular oder seine Umleitungsoptionen festlegen. Weitere Informationen zur Verwendung des Formular-HubL-Tags finden Sie im Abschnitt unten.

{% module "form" path="@hubspot/form" %}

Verwendung des eines benutzerdefinierten Moduls

Es gibt einige Fälle, in denen Sie möglicherweise ein benutzerdefiniertes Modul erstellen, das neben anderen Inhalten wie Bildern oder Textblöcken ein Formular enthält. Dazu können Sie entweder das Formularfeld verwenden oder das vorhandene Formularmodul klonen und von dort aus Ihr neues Modul als Ausgangspunkt erstellen. 

Das Formularfeld ist eine einfachere Version des Formularmoduls, die Ihnen grundlegende Formularfunktionen bietet, einschließlich:

Optionen Beschreibung
Dropdown-Menü zur Formularauswahl Ein Dropdown-Menü, das es Content-Autoren ermöglicht, ein vorhandenes Formular auszuwählen. 
Weiterleitung bei Formulareinsendung Eine Option zur Auswahl, ob der das Formular übermittelnde Benutzer weitergeleitet wird oder eine Inline-Danksagungsnachricht bei der Formulareinsendung sieht.
Weiterleitungs-Link Wenn Sie einen Benutzer, der ein Formular einsendet, weiterleiten möchten, können Sie die URL der Seite eingeben, zu der er weitergeleitet wird.
Danksagung Wenn Sie eine Inline-Danksagung anzeigen möchten, können Sie hier Ihre Nachricht eingeben.

Sie können das Formularfeld zu einem Modul im Design-Manager hinzufügen, indem Sie es über „Feld hinzufügen“ > „Selektoren“ > „Formular“ auswählen.

Das Formularfeld zu Ihrem Modul hinzufügen

Von dort aus können Sie dann das Snippet für das Formularfeld kopieren, das Sie Ihrem benutzerdefinierten Modul hinzufügen möchten, indem Sie „Aktionen“ > „Snippet kopieren“ auswählen, wenn Sie im Editor den Mauszeiger über das Feld bewegen.

Das Formular-Snippet für Ihr Feld kopieren

Wenn Sie sich dafür entscheiden, das Standardformularmodul zu klonen, erhalten Sie alles aus dem obigen Formularfeld, einschließlich:

Optionen Beschreibung
Titel Fügen Sie einen Titel hinzu, der über dem Formular angezeigt wird, wenn es dargestellt wird.
E-Mail-Benachrichtigung überschreiben Ein Schalter, mit dem Sie die Standard-E-Mail-Adresse für die Formularbenachrichtigungen überschreiben können. Ist dieser aktiviert, sehen Sie ein Textfeld, um die neuen E-Mail-Adressen hinzuzufügen.
Zu Workflow hinzufügen Ein Schalter, mit dem Sie Einsendungen in den gewünschten Workflow aufnehmen können. Ist dieser aktiviert, wird Ihnen eine Dropdown-Liste zur Auswahl eines Workflows angezeigt.
Follow-up-E-Mail Ein Schalter, mit dem Sie nach dem Einsenden des Formulars eine Follow-up-E-Mail senden können. Ist dieser aktiviert, wird Ihnen eine Dropdown-Liste angezeigt, in der Sie eine Follow-up-E-Mail auswählen können. Wenn Sie keine vorhanden ist, erhalten Sie die Möglichkeit, eine neue zu erstellen.
Salesforce-Kampagne Gibt die Salesforce-Kampagne an, in die Kontakte, die das Formular einsenden, aufgenommen werden sollen. Nur verfügbar, wenn die Salesforce-Integration installiert ist.
GoToWebinar-Link Gibt das GoToWebinar-Webinar an, für das Kontakte, die das Formular einsenden, registriert werden sollen. Nur verfügbar, wenn die GoToWebinar-Integration installiert ist.

Sie können Ihr Formular mit zusätzlichen Optionen weiterentwickeln, die neben dem Standardformularmodul verwendet werden können. Unten sehen Sie ein Beispiel für ein geklontes Standardmodul, das von einem <section>-Tag eingeschlossen ist und ein zusätzliches Farbfeld enthält, um dem Abschnitt eine Hintergrundfarbe hinzuzufügen.

Hinzufügen zum geklonten Formularmodul

Verwendung des Formular-HubL-Tags

Das Modulformularfeld generiert ein HubL-Formular-Tag, wenn Sie das Snippet kopieren, wie oben erwähnt. Das HubL-Tag hat viele Parameter, die Sie bereitstellen können. Es ist am einfachsten, „Snippet kopieren“ zu verwenden, wenn Sie vom Design-Manager aus arbeiten. Wenn Sie lokal arbeiten, lesen Sie die HubL-Tags-Dokumentation, in der alle verfügbaren Parameter aufgeführt sind.

{% module "form" path="@hubspot/form" form={ "form_id": "9e633e9f-0634-498e-917c-f01e355e83c6", "response_type": "redirect", "message": "Thanks for submitting the form.", "redirect_id": null, "redirect_url": "http://www.google.com" } %}

Verwendung des Formular-Einbettungscodes

Sie können einen JavaScript-Einbettungscode verwenden, um ein Formular zu einer Seite hinzuzufügen, bei der ein Modul oder ein HubL-Tag nicht ideal ist, z. B. auf externen Seiten. Mit dieser Methode können Sie auch die Funktionalität des Formulars durch erweiterte Optionen ausweiten. Nachfolgend finden Sie ein Beispiel für den Formular-Einbettungscode mit erweiterter Funktionalität. 

<!--[if lte IE 8]> <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script> <![endif]--> <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script> <script> hbspt.forms.create({ portalId: "[YourPortalIdHere]", formId: "00000000-0000-0000-0000-000000000000", cssClass: "class-applied-to-form", submitButtonClass: "class-applied-to-submit-button", onFormSubmit: function($form) { // YOUR SCRIPT HERE } }); </script>

Formular-Styling

Während HubSpot globale Formularstile sowie eine formularspezifische Einstellungsebene anbietet, können Sie ein Formular auch gestalten, je nachdem, wie es zu Ihren CMS-Seiten hinzugefügt wird.

Bitte beachten: Alle in CMS Hub generierten Formulare (mit Ausnahme des Formular-Einbettungscodes) ignorieren alle Stile, die über die globalen Formulareinstellungen oder die individuellen Einstellungen des Formulars konfiguriert werden. 

Styling von Formularen über das Standardformularmodul oder das HubL-Tag

HubSpot-Formulare, die zu HubSpot-Seiten hinzugefügt werden, können mithilfe des CSS Ihrer Website formatiert werden. HubSpot enthält eine Reihe unterschiedlicher Klassen und Attribute in Formularen, die generiert werden, bei denen Sie Stile anwenden können. Als Ausgangspunkt verweisen wir auf das Formular-CSS der HubSpot Boilerplate, das die besten Praktiken für das Styling von Formularen darstellt.

Styling von Formularen über ein benutzerdefiniertes Modul

Formulare in benutzerdefinierten Modulen können durch CSS im CSS-Bereich des Moduls im Design-Manager formatiert werden. Indem Sie CSS auf das Modul beschränken, können Sie sicherstellen, dass immer, wenn das Modul einer Seite hinzugefügt wird, die Stile übernommen werden. Es wird empfohlen, dem Formular einen Wrapper hinzuzufügen und diesen dann als Top-Level-Selektor für das CSS zu verwenden. Dadurch wird verhindert, dass das Styling der Formulare Ihres benutzerdefinierten Moduls durch zusätzliche Stile im Hauptstylesheet Ihrer Website überschrieben wird. Nachfolgend finden Sie einen Screenshot des benutzerdefinierten Moduls von oben, das dem CSS-Fenster hinzugefügt wurde.

Benutzerdefiniertes Modul mit CSS

Styling von Formularen, die über den Formular-Einbettungscode hinzugefügt werden

Wenn Sie den Formular-Einbettungscode verwenden, können Sie das Formular mit den Einstellungen für globale Formularstile oder mit dem CSS Ihrer Website formatieren.

Mit den Einstellungen für globale Formularstile können Sie Standardeinstellungen für jedes Formular im Account konfigurieren. Sie können diese Stile auch für ein einzelnes Formular im Formular-Editor überschreiben.

Globale Formularstile

Wenn Sie das Formular mit dem CSS Ihrer Website formatieren möchten, sollten Sie im Formular-Editor zunächst die Option „Als unformatiertes HTML-Formular festlegen“ aktivieren. Dadurch kann das Formular auf der Seite als HTML anstelle eines iframe dargestellt werden, was das Styling erleichtert. Erfahren Sie mehr über das Styling von eingebetteten Formularen in der Wissensdatenbank.

Einstellung zum Festlegen als unformatiertes HTML-Formular

War dieser Artikel hilfreich?
Dieses Formular dient dazu, Feedback zu unserer Entwicklerdokumentation zu sammeln. Wenn Sie uns Ihre Meinung zu HubSpot-Produkten mitteilen möchten, teilen Sie diese bitte im Ideenforum der Community.