HubSpot-Formulare

Last updated:

Verwenden Sie HubSpot-Formulare, um Informationen von Website-Benutzern zu erfassen, auf die Sie dann in HubSpot zugreifen können. 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.

Formulare sind ein zentraler Bestandteil von HubSpot und können in einem HubSpot-Account jeder Abonnementstufe erstellt werden. Formulare sind nicht nur für Kunden-Konversionen wichtig, sondern auch, weil Formulardaten in anderen HubSpot-Tools und -Elementen wie Smart-Content, Listen, Workflows, Content-Personalisierung und mehr verwendet werden können.

Nach dem Erstellen eines HubSpot-Formulars können Sie es zu Ihren Vorlagen und Seiten hinzufügen. Je nach Anwendungsfall gibt es mehrere Möglichkeiten, ein Formular zu einer Vorlage hinzuzufügen:

Das Standardformularmodul

Wenn Ihre Vorlage über Drag-&-Drop-Bereiche verfügt, können Content-Autoren das Standardformularmodul über den Seiten-Editor zu einer Seite hinzufügen und dann die Formularoptionen in der linken Seitenleiste konfigurieren.

Um ein Formularmodul direkt in eine Vorlage mit Drag-&-Drop-Bereichen zu codieren, referenzieren Sie es als dnd_module. 

{% 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 %}

Um ein Formularmodul zu einer Vorlage außerhalb eines Drag-&-Drop-Bereichs hinzuzufügen, referenzieren Sie es stattdessen als ein Standard-module. 

{% 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" } %}

Bei beiden Implementierungen können Sie dem module-Tag Parameter hinzufügen, um Einstellungen wie das zu verwendende Formular und die Weiterleitungsoptionen festzulegen, wie im obigen Code-Beispiel gezeigt. Weitere Informationen zu den verfügbaren Parametern finden Sie in der Dokumentation zu Standardmodulen.

Klonen des Standardmoduls

Sie können das Standardmodul nicht nur verwenden, wie es ist, sondern es auch klonen, um es bearbeitbar zu machen, damit Sie es nach Bedarf anpassen können. Sie könnten beispielsweise das Standardformularmodul klonen, ein Farbfeld hinzufügen und dann den HTML-Code des Moduls in ein <section>-Tag mit Formatierung einschließen, um die Farbe als Hintergrund hinzuzufügen:

  • Gehen Sie im Design-Manager der linken Seitenleiste zum @hubspot-Ordner, klicken Sie dann mit der rechten Maustaste auf form.module und wählen Sie Modul klonen aus.
clone-form-module
  • Klicken Sie in der rechten Seitenleiste auf Feld hinzufügen und wählen Sie dann Farbe aus.
  • Fügen Sie ein <section>-Tag um den HTML-Content herum hinzu und fügen Sie dann Formatierung hinzu, um das Farbfeld zu referenzieren, z. B.:

<section style="background:">

default-form-module-clone-section

Formularfelder in benutzerdefinierten Modulen

Wenn Sie ein benutzerdefiniertes Modul erstellen, können Sie ein Formular berücksichtigen, indem Sie ein Formularfeld hinzufügen und dazu das Code-Snippet des Felds zum HTML des Moduls hinzufügen. Sie können beispielsweise ein Anfrageformular für eine Beratung zu einem Modul hinzufügen, das ein Bild eines Produkts und ein beschreibendes Leistungsversprechen enthält.

So fügen Sie einem benutzerdefinierten Modul über den Design-Manager ein Formularfeld hinzu:

  • Klicken Sie in der rechten Seitenleiste des Modul-Editors auf Feld hinzufügen und wählen Sie dann Formular aus.
design-manager-select-form-field
  • Nachdem Sie das Feld hinzugefügt haben, bewegen Sie den Mauszeiger über das Feld in der rechten Seitenleiste, klicken Sie dann auf Aktionen und wählen Sie Snippet kopieren aus.
module-field-copy-snippet
  • Fügen Sie das Snippet in das HTML-Feld des Moduls ein.

module-field-paste-snippet

Formularoptionen im Editor einschränken

Nach dem Hinzufügen zu einer Seite haben Content-Autoren in der Regel die Kontrolle über viele Aspekte des Formulars, einschließlich des zu verwendenden Formulars und der Formularfelder selbst. Sie können jedoch die im Seiten-Editor vorgegebenen Steuerungsmöglichkeiten einschränken, indem Sie die fields.json-Datei des Formularmoduls lokal so ändern, dass sie die folgenden Felder enthält:

Use this table to describe parameters / fields
ParameterTypeDescription
disable_inline_form_editing
Zeichenfolge

Legen Sie die disable_inline_form_editing-Eigenschaft auf true fest, um alle Steuerelemente für die Inline-Bearbeitung von Formularen im Formularmodul auszublenden. Dazu gehören die Formularfelder, der Text der Einsenden-Schaltfläche, die Datenschutz- und Einwilligungsoptionen sowie CAPTCHA.

required_property_types
Array

Ein Array, das angibt, welche Formulare basierend auf den Eigenschaftstypen der Formularfelder ausgewählt werden können. Zu den Werten gehören: "CONTACT", "COMPANY" und "TICKET").

Wenn Sie beispielsweise ein Modul entwickelt haben, das nur für Formulare verwendet werden sollte, mit denen Besucher die verschiedenen Serviceabteilungen Ihres Unternehmens kontaktieren können, können Sie Content-Autoren erlauben, nur Formulare auszuwählen, die Ticket-Eigenschaften verwenden.

// Form field { "id" : "843b4f0f-0ed7-5b10-e86a-5cc8a0f11a0c", "name" : "form_field_1", "display_width" : null, "label" : "Form", "required" : false, "locked" : false, "type" : "form", "disable_inline_form_editing": true, "required_property_types": ["TICKET"], "default" : { "response_type" : "inline", "message" : "Thanks for submitting the form." } }

Formularformatierung

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 ein Marketing Hub- oder CMS Hub Professional- oder Enterprise-Abonnement haben, können Sie beim Erstellen eines Formulars die Option Als unformatiertes HTML-Formular festlegen auswählen. Mit dieser Einstellung wird das Formular als HTML und nicht als Iframe gerendert, wodurch das Formatieren des eingebetteten Formulars mit CSS vereinfacht wird.

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.