# Formulare auf Ihrer Website installieren

> Fügen Sie das Emailit-Skript einmal zu Ihrer Website hinzu, platzieren Sie eingebettete Formulare, öffnen Sie Formulare aus Ihrem eigenen Code und verwalten Sie Formular-Tokens, Veröffentlichung und Einsendungen.

Ein einziges Script-Tag zeigt alle Live-Formulare Ihres Workspaces auf Ihrer Website an. Diese Seite erklärt, wo Sie es einfügen, wie Sie eingebettete Formulare platzieren, wie Sie ein Formular aus Ihrem eigenen Code öffnen und wie Sie prüfen, ob Einsendungen ankommen.

## Voraussetzungen

- Erstellen und veröffentlichen Sie mindestens ein Formular. Nur Live-Formulare erscheinen auf Ihrer Website. Siehe [Formular erstellen](/de/docs/forms/build/).
- Sie müssen das HTML Ihrer Website bearbeiten oder in Ihrem Tag-Manager ein eigenes HTML-Tag hinzufügen können.

## Skript hinzufügen

1. **Snippet kopieren.** Wählen Sie unter **Email Marketing → Forms** die Option **Install**. Das Snippet steht außerdem auf der Seite jedes Formulars in der Karte **Installation**. Es sieht so aus, mit dem öffentlichen Schlüssel Ihres Workspaces im Pfad:

```html
<script async src="https://js.emailit.com/js/<WORKSPACE_PUBLIC_KEY>/emailit.js"></script>
```

2. **Zu jeder Seite hinzufügen.** Fügen Sie es einmal in das gemeinsame Layout oder Template Ihrer Website ein, am besten direkt vor dem schließenden Tag `</body>`. Es ist dasselbe Snippet für alle Formulare im Workspace, Sie installieren es also nur einmal.

3. **Formulare veröffentlichen.** Live-Pop-ups, Flyouts, Ganzseiten-Formulare und Banner erscheinen jetzt ohne weiteren Code auf Ihrer Website.

Das Skript lädt asynchron und blockiert Ihre Seite nicht. Schlägt etwas fehl, etwa wegen eines Netzwerkfehlers, bleibt es still, und Ihre Seite funktioniert weiter. Es funktioniert auch, wenn es über einen Tag-Manager eingebunden wird.

Wenn Ihre Website eine Content Security Policy verwendet, erlauben Sie `https://js.emailit.com` in `script-src` und `connect-src`.

## Wie Overlay-Formulare erscheinen

| Typ | Wann es erscheint |
| --- | --- |
| **Banner** | Sobald die Seite geladen ist. Jedes Live-Banner wird angezeigt. |
| **Popup**, **Flyout**, **Full page** | 2,5 Sekunden nach dem Laden der Seite. Pro Seitenaufruf erscheint nur eines davon. |

Um die Verzögerung zu ändern, setzen Sie `display_delay_seconds` in den `settings` des Formulars mit [Formular aktualisieren](/de/docs/api-reference/forms/update/).

Schließt ein Besucher ein Formular, bleibt es in diesem Browser 7 Tage lang ausgeblendet. Nach dem Absenden bleibt es ein Jahr lang ausgeblendet. Emailit merkt sich das im Local Storage des Browsers unter dem Schlüssel `emailit_forms_v1` und setzt keine Cookies. Ist Local Storage nicht verfügbar, erscheinen Formulare bei jedem Seitenaufruf.

## Formular in Ihre Seite einbetten

Eingebettete Formulare erscheinen innerhalb Ihres Inhalts, zum Beispiel im Footer oder in der Seitenleiste eines Blogs. Außer dem Skript brauchen sie ein Platzhalter-Element:

1. **Platzhalter-Element kopieren.** Öffnen Sie die Seite des eingebetteten Formulars. Die Karte **Installation** zeigt das Platzhalter-Element mit dem öffentlichen Token des Formulars:

```html
<div data-emailit-form="FORM_TOKEN"></div>
```

2. **Platzieren.** Fügen Sie das Platzhalter-Element dort ein, wo das Formular erscheinen soll. Sie können dasselbe Formular an mehreren Stellen verwenden.

3. **Skript prüfen.** Stellen Sie sicher, dass das [Skript](#add-the-script) ebenfalls auf der Seite ist.

Das Skript füllt jedes Platzhalter-Element mit `data-emailit-form`, dessen Token zu einem eingebetteten Live-Formular passt. Es beobachtet außerdem die Seite, sodass später hinzugefügte Platzhalter-Elemente, etwa von einer Single-Page-App, gefüllt werden, sobald sie erscheinen. Eingebettete Formulare werden jedes Mal angezeigt, unabhängig davon, ob der Besucher sie schon einmal abgesendet hat.

## Formular aus Ihrem Code öffnen

Rufen Sie `emailit("show", token)` auf, um ein Pop-up, Flyout, Ganzseiten-Formular oder Banner zu einem selbst gewählten Zeitpunkt zu öffnen, zum Beispiel über eine Schaltfläche:

```html
<button type="button" onclick="emailit('show', 'FORM_TOKEN')">
  Join the newsletter
</button>
```

- Das Formular öffnet sich sofort, auch wenn der Besucher es zuvor geschlossen oder abgesendet hat.
- Das Formular muss live sein, und das Skript muss auf der Seite sein.
- Aufrufe, die erfolgen, während das Skript noch lädt, werden in eine Warteschlange gestellt und ausgeführt, sobald es bereit ist.
- Bei einem eingebetteten Formular durchsucht `show` die Seite erneut nach seinen Platzhalter-Elementen.

`openForm` funktioniert als Alias für `show`.

## Live-Formular verwalten

### Aktualisieren oder Veröffentlichung zurückziehen

Gespeicherte Änderungen an einem Live-Formular oder das Zurückziehen seiner Veröffentlichung erreichen Ihre Website innerhalb von etwa einer Minute. Um ein Formular von Ihrer Website zu nehmen, öffnen Sie seine Seite und wählen Sie **Unpublish**. Es wird wieder zum Entwurf, und Sie können es später erneut veröffentlichen.

### Öffentliches Token zurücksetzen

Jedes Formular hat ein öffentliches Token, das auf seiner Seite als **Public token** angezeigt wird. Platzhalter-Elemente für eingebettete Formulare und Aufrufe von `emailit("show", ...)` verwenden es. Um ein neues auszustellen, rufen Sie [Öffentliches Token zurücksetzen](/de/docs/api-reference/forms/reset-token/) auf:

```bash
curl https://api.emailit.com/v2/forms/frm_8Lq2Wx5nVb3Tk/reset-token \
  -X POST \
  -H "Authorization: Bearer $EMAILIT_API_KEY"
```

Das alte Token funktioniert sofort nicht mehr. Aktualisieren Sie daher Ihre Platzhalter-Elemente und Ihren Code mit dem neuen `token` aus der Antwort. Overlay-Formulare, die automatisch erscheinen, sind nicht betroffen.

## Einsendungen prüfen

Senden Sie das Formular auf Ihrer Website mit Ihren eigenen Daten ab und öffnen Sie dann die Seite des Formulars in der Weboberfläche. **Recent submissions** listet jede Einsendung mit ihrem Zeitpunkt unter **Created** und ihrem **Payload** auf: den abgesendeten Werten, zugeordnet nach dem Property name jedes Felds. Filtern Sie die Liste nach Erstellungsdatum.

Zusätzlich zu den Werten speichert Emailit bei jeder Einsendung die Seiten-URL, den Referrer, die IP-Adresse des Besuchers und den User-Agent seines Browsers. Erwähnen Sie das in Ihrer Datenschutzerklärung.

Einsendungen werden noch nicht zu Ihren Kontakten oder Kontaktlisten hinzugefügt. Siehe [Einsendungen](/de/docs/forms/#submissions).

## Fehlerbehebung

<details>
<summary>Das Formular erscheint nicht</summary>

Prüfen Sie, ob das Formular **Live** ist und ob das Skript mit dem Schlüssel Ihres Workspaces in der URL auf der Seite ist. Wenn Sie das Formular zuvor geschlossen oder abgesendet haben, bleibt es in Ihrem Browser ausgeblendet: Öffnen Sie die Seite in einem privaten Fenster oder entfernen Sie den Eintrag `emailit_forms_v1` aus dem Local Storage. Denken Sie daran, dass pro Seitenaufruf nur ein Pop-up, Flyout oder Ganzseiten-Formular erscheint.

</details>

<details>
<summary>Ein eingebettetes Formular wird nicht angezeigt</summary>

Prüfen Sie, ob der Typ des Formulars **Embed** ist, ob es live ist und ob der Wert `data-emailit-form` des Platzhalter-Elements mit dem aktuellen öffentlichen Token des Formulars übereinstimmt. Wenn Sie das Token zurückgesetzt haben, aktualisieren Sie das Platzhalter-Element.

</details>

## Siehe auch

  - [Formular erstellen](/de/docs/forms/build/): Schritte, Felder und Stile gestalten.
  - [API für Formulare](/de/docs/api-reference/forms/): Formulare per Code erstellen, veröffentlichen und verwalten.

---
Quelle: https://emailit.com/de/docs/forms/install/