Letzte Änderung: 28. August 2025
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:
- Mithilfe des Standardformularmoduls
- Durch Hinzufügen eines Formularfelds zu einem benutzerdefinierten Modul
- Durch Einbetten mithilfe des Formular-Einbettungscodes
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 alsdnd_module
.
module
.
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.

- 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:{{ module.color_field.color }}">

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.

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

- Fügen Sie das Snippet in das HTML-Feld des Moduls ein.

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 diefields.json
-Datei des Formularmoduls lokal so ändern, dass sie die folgenden Felder enthält:
Parameter | Typ | Beschreibung |
---|---|---|
disable_inline_form_editing | Zeichenfolge | Legen Sie die disable_inline_form_editing -Eigenschaft auf true fest, um alle Steuerelemente der Inline-Formularbearbeitung 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 Eigenschaftentypen der Formularfelder ausgewählt werden können. Zu den Werten gehören: "CONTACT" , "COMPANY" und "TICKET" . |
Verwendung des Formular-Einbettungscodes
Wenn ein Modul- oder HubL-Tag nicht ideal ist oder wenn Sie ein Formular zu einer externen Seite hinzufügen möchten, können Sie es stattdessen mit dem Formular-Einbettungscode einbetten. Sie können auch den Formular-Einbettungscode anpassen, um die Funktionalität der Formular zu erweitern. Alle Anpassungsoptionen für Formular-Einbettungscode und mehr finden Sie im Referenzleitfaden für Formulare.Hinweis:
- Optionen zum Anpassen von Formularen sind nur für in HubSpot erstellte Formulare verfügbar, die als unformatiertes HTML-Formular festgelegt wurden. Der HubSpot-Account muss über ein Marketing Hub oder Content Hub Professional- oder Enterprise-Abonnement verfügen.
- HubSpot-Formulare sollten nur mit der von HubSpot gehosteten JavaScript-Datei geladen werden. Das Erstellen einer Kopie des Formular-Einbettungscodes und Self-Hosting werden nicht unterstützt. Verbesserungen von HubSpot in den Bereichen Sicherheit, Antispam, Barrierefreiheit und Performance werden nicht auf Ihre Formular übertragen, wenn Sie sich entscheiden, den Formular-Einbettungscode von HubSpot selbst zu hosten.
Parameter | Typ | Beschreibung |
---|---|---|
portalId | Zahl oder Zeichenfolge | Die ID des HubSpot-Accounts, in dem das Formular erstellt wurde. Dies wird verwendet, um die Formulardefinition abzurufen. |
formId | Zeichenfolge | Die ID des Formulars, die zum Abrufen der Formulardefinition verwendet wird. |
region | Zeichenfolge | Die Region des Accounts, in dem das Formular erstellt wurde. Dies wird verwendet, um die Formulardefinition abzurufen. Mögliche Werte sind na1 oder eu1 . |
Internationalisierung hinzufügen
Standardmäßig stellt HubSpot eine Reihe von Validierungsnachrichten in vielen verschiedenen Sprachen bereit, auf die Sie mit demlocale
-Parameter zugreifen können. Sie können auch benutzerdefinierte Sprachen hinzufügen oder die Fehlermeldungen und die im Formular angezeigten Monate/Tage der Datumsauswahl mit dem translation
-Parameter außer Kraft setzen.
Erfahren Sie in der Referenzdokumentation zu Formularen mehr über Fehlermeldungen bei der Internationalisierung und der Formularvalidierung.
Formular-Events
Formulare bieten zwei Möglichkeiten, Funktionen an Events zu binden: Callbacks im Formular-Einbettungscode von HubSpot und globale Formular-Events. Erfahren Sie mehr über die verfügbaren Formular-Einbettungscode-Callbacks und globale Formular-Events in der Referenzdokumentation für Formulare.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.Hinweis:
Alle in Content Hub generierten Formulare (mit Ausnahme des Formular-Einbettungscodes) ignorieren jegliche Stile, die über die globalen Formulareinstellungen oder die individuellen Einstellungen des Formulars konfiguriert werden.Formatierung 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 Formatieren von Formularen darstellt.Formatierung 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 die Formatierung 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.
Definieren von benutzerdefiniertem Styling für eingebettete Formulare
Wenn Sie eine ** Marketing Hub- ** oder ** CMS Hub-Lizenz ** in der Professional- oder Enterprise-Version haben, können Sie Definitionen für CSS-Variablen verwenden, um globale Stile zu definieren, Schaltflächen und anderen Eingaben anzupassen sowie Ihre mehrstufigen Formulare und Fortschrittsbalken anzupassen. Erfahren Sie mehr darüber, wie Sie benutzerdefinierte CSS-Definitionen auf Ihr eingebettetes Formular anwenden.Formatierung 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.
