> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.de/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# HubSpot-Formulare

> Erfahren Sie, wie Sie mithilfe von Modulen, HubL oder dem Einbettungscode Formulare zu Ihrer HubSpot-Website oder zu externen Seiten hinzufügen. Erfahren Sie dann, wie Sie sie mit Stilen formatieren können.

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](https://developers.hubspot.de/docs/guides/api/marketing/forms) 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](https://knowledge.hubspot.com/de/forms/create-forms) 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](#the-default-form-module)
* [Durch Hinzufügen eines Formularfelds zu einem benutzerdefinierten Modul](#form-fields-in-custom-modules)[](#using-the-form-hubl-tag)
* [Durch Einbetten mithilfe des Formular-Einbettungscodes](#using-the-form-embed-code)

## Das Standardformularmodul

Wenn Ihre Vorlage über [Drag-&-Drop-Bereiche](/cms/reference/hubl/tags/dnd-areas) verfügt, können Content-Autoren das [Standardformularmodul](/cms/reference/modules/default-modules#form) ü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`.

```hubl theme={null}
{% 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`.

```hubl theme={null}
{% 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](/cms/reference/modules/default-modules#form).

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

<Frame>
  <img src="https://www.hubspot.de/hubfs/Knowledge_Base_2023_2024/clone-form-module.png" alt="clone-form-module" />
</Frame>

* 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 }}">`

<Frame>
  <img src="https://www.hubspot.de/hubfs/Knowledge_Base_2023_2024/default-form-module-clone-section.png" alt="default-form-module-clone-section" />
</Frame>

## Formularfelder in benutzerdefinierten Modulen

Wenn Sie ein benutzerdefiniertes Modul erstellen, können Sie ein Formular berücksichtigen, indem Sie ein [Formularfeld](/cms/reference/fields/module-theme-fields#form) 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.

<Frame>
  <img src="https://www.hubspot.de/hubfs/Knowledge_Base_2023_2024/design-manager-select-form-field.png" alt="design-manager-select-form-field" />
</Frame>

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

<Frame>
  <img src="https://www.hubspot.de/hubfs/Knowledge_Base_2023_2024/module-field-copy-snippet.png" alt="module-field-copy-snippet" />
</Frame>

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

<Frame>
  <img src="https://www.hubspot.de/hubfs/Knowledge_Base_2023_2024/module-field-paste-snippet.png" alt="module-field-paste-snippet" />
</Frame>

### 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](/developer-tooling/local-development/hubspot-cli/install-the-cli) 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"`.                                                                                                     |

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.

```json theme={null}
// 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."
  }
}
```

## 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](https://knowledge.hubspot.com/de/forms/how-can-i-share-a-hubspot-form-if-im-using-an-external-site#add-the-form-embed-code) 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.

<Warning>
  ### Hinweis:

  * Optionen zum Anpassen von Formularen sind nur für in HubSpot erstellte Formulare verfügbar, die [als unformatiertes HTML-Formular festgelegt](https://knowledge.hubspot.com/de/forms/how-can-i-share-a-hubspot-form-if-im-using-an-external-site#with-css-in-your-external-stylesheet-marketing-hub-professional-enterprise-or-legacy-marketing-hub-basic-only) 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 <u>nicht</u> 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.
</Warning>

Nachfolgend finden Sie ein Beispiel für einen Formular-Einbettungscode ohne Anpassung.

```html theme={null}
<script
  charset="utf-8"
  type="text/javascript"
  src="//js.hsforms.net/forms/embed/v2.js"
></script>
<script>
  hbspt.forms.create({
    region: 'na1',
    portalId: '123456',
    formId: 'df93f0c1-2919-44ef-9446-6a29f9a7f',
  });
</script>
```

| 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](https://knowledge.hubspot.com/de/account-security/hubspot-cloud-infrastructure-and-data-hosting-frequently-asked-questions) 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 dem `locale`-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](https://developers.hubspot.de/docs/reference/cms/forms) mehr über Fehlermeldungen bei der Internationalisierung und der Formularvalidierung.

```js theme={null}
hbspt.forms.create({
  portalId: "",
  formId: "",
  locale: "en",
  translations: {
    en: {
      fieldLabels: {
        email: "Electronic mail",
      },
      required: "Hey! That's required!",
      submitText: "Custom Submit Button Text",
      submissionErrors: {
        MISSING_REQUIRED_FIELDS: "Please fill in all required fields!",
      },
    },
  },
});
```

## 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](https://developers.hubspot.de/docs/reference/cms/forms).

```js theme={null}
// Example form embed code callback
hbspt.forms.create({
  portalId: "",
  formId: "",
  onBeforeFormSubmit: function ($form) {
    // YOUR SCRIPT HERE
  },
});

// Example listener
window.addEventListener("message", event => {
  if (event.data.type === "hsFormCallback" && event.data.eventName === "onFormSubmitted") {
    someAnalyticsLib("formSubmitted");
    console.log("Form Submitted! Event data: ${event.data}");
  }
});
```

## Formularformatierung

Während HubSpot [globale Formularstile](https://knowledge.hubspot.com/de/forms/set-global-form-colors-and-fonts) sowie eine [formularspezifische Einstellungsebene](https://knowledge.hubspot.com/de/forms/create-forms#style-and-preview-your-form) anbietet, können Sie ein Formular auch gestalten, je nachdem, wie es zu Ihren CMS-Seiten hinzugefügt wird.

<Warning>
  ### 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.
</Warning>

### 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](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/css/elements/_forms.css), 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.

<Frame>
  <img src="https://cdn2.hubspot.net/hubfs/53/5Cdocs/forms/form-module-css-pane-4.jpg" alt="Benutzerdefiniertes Modul mit CSS" />
</Frame>

### 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](https://developers.hubspot.de/docs/reference/cms/forms#define-custom-styling-for-embedded-forms-using-css) 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](https://knowledge.hubspot.com/de/forms/set-global-form-colors-and-fonts) 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](https://knowledge.hubspot.com/de/forms/create-forms#style-and-preview-your-form).

<Frame>
  <img src="https://cdn2.hubspot.net/hubfs/53/5Cdocs/forms/global-form-styling-options-4.png" alt="Globale Formularstile" />
</Frame>

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 [Formatieren von eingebetteten Formularen in der Wissensdatenbank](https://knowledge.hubspot.com/de/forms/how-can-i-share-a-hubspot-form-if-im-using-an-external-site).

<Frame>
  <img src="https://cdn2.hubspot.net/hubfs/53/5Cdocs/forms/set-as-raw-html-form-4.jpg" alt="Einstellung zum Festlegen als unformatiertes HTML-Formular" />
</Frame>