# Einbettung & Popups

Bette dein Formular auf einer Website ein oder zeige es als Popup-Overlay an.

## Einbettung & Popups

Füge dein Formular als Inline-Einbettung oder Popup-Overlay in jede Webseite ein. Du richtest es im Teilen-Panel ein und fügst ein einziges Snippet in deine Website ein.

<p>
  Beide Snippets bauen auf dem ausgewählten Freigabelink auf und übernehmen dessen Ablaufdatum, Antwortlimit, eigene Domain und Analysen.
  Erstelle den Link zuerst — siehe <a href="/de/sharing-publishing/sharing-embedding">Freigabelinks</a>. Eine Ausnahme sind
  Query-Parameter-Standardwerte, die am Link eingestellt sind: Sie werden Einbettungs- oder Popup-Snippets nicht hinzugefügt.
</p>

<h2 id="embed">Inline-Einbettung</h2>

<p>
  Eine Inline-Einbettung platziert dein Formular direkt über ein iframe auf einer Seite. Öffne das <strong>Teilen</strong>-Panel, klicke auf
  die <strong>Einbetten</strong>-Karte und kopiere den generierten Snippet in das HTML deiner Website.
</p>

<h3 id="embed-layout">Layout</h3>

<h3 id="embed-display">Anzeige</h3>

<p>
  Klicke auf <strong>Code anzeigen</strong>, um das generierte HTML zu sehen. Nutze <strong>Einbettungscode kopieren</strong>, um es zu
  kopieren, und füge es dann in deine Website ein. <strong>Auf Standard zurücksetzen</strong> stellt jede Einstellung wieder her.
</p>

<h3 id="embed-snippet">Was das Snippet enthält</h3>

<p>
  Ist die automatische Höhenanpassung aus, besteht das Snippet aus einem einzelnen iframe, das auf deinen Freigabelink mit angehängtem{' '}
  <code>?embed=1</code> zeigt. Die Anzeigeoptionen fügen eigene Parameter hinzu: <code>hideCover=1</code>, <code>hideLogo=1</code> sowie{' '}
  <code>theme=dark</code> oder <code>theme=light</code>.
</p>

```html
<iframe src="https://form.formstep.io/Abc12XYz?embed=1" width="100%" height="600" style="border: none;"></iframe>
```

<p>
  Ist die automatische Höhenanpassung an, wird das iframe in ein <code>div</code> eingebettet und von einem Skript gefolgt. Das eingebettete
  Formular sendet bei jeder Höhenänderung eine <code>formbase:resize</code>-Nachricht; das Skript prüft den Ursprung der Nachricht und den
  sendenden Frame und setzt dann die iframe-Höhe. Sonst wird nichts auf deiner Seite verändert, und es wird kein externes Skript geladen.
</p>

<h2 id="popup">Popup</h2>

<p>
  Ein Popup zeigt dein Formular als Overlay auf deiner Seite an. Öffne das <strong>Teilen</strong>-Panel, klicke auf die{' '}
  <strong>Popup</strong> Karte, richte deine Optionen ein und füge den generierten Code-Snippet in deine Website ein.
</p>

<h3 id="popup-trigger">Auslöser</h3>

<p>Wähle, wie das Popup geöffnet wird:</p>

<h3 id="popup-layout">Layout</h3>

<h3 id="popup-display">Anzeige</h3>

<h3 id="popup-styling">Popup-Gestaltung</h3>

<h3 id="popup-behavior">Verhalten</h3>

<p>
  Klicke auf <strong>Code anzeigen</strong>, um den generierten Snippet zu sehen. Nutze <strong>Popup-Code kopieren</strong>, um ihn zu
  kopieren, und füge ihn dann in deine Website ein. <strong>Auf Standard zurücksetzen</strong> stellt alle Einstellungen wieder her.
</p>

<h3 id="popup-snippet">Was das Snippet enthält</h3>

<p>
  Das Popup-Snippet ist ein einziger, in sich geschlossener <code>{'<script>'}</code>-Block. Er baut das Overlay, den Schließen-Button und
  das iframe in reinem JavaScript auf, sobald das Popup geöffnet wird — vorher wird nichts zu deiner Seite hinzugefügt, es wird kein
  Stylesheet eingefügt und kein externes Skript geladen. Der Kommentar unter dem Skript nennt dir den Namen der aufzurufenden Funktion:
</p>

```html
<!-- Call window.openFormbasePopup_Abc12XYz() to open the form popup -->
```

<p>
  Ein Bindestrich in einem benutzerdefinierten Slug wird im Funktionsnamen zu einem Unterstrich, weil ein Bindestrich in einem
  JavaScript-Bezeichner nicht gültig ist. Kopiere den Namen aus dem Kommentar, statt ihn selbst herzuleiten.
</p>

<h2 id="color-scheme">Farbschema</h2>

<p>Einbettungen und Popups teilen dieselben drei Optionen, und beide überschreiben das eigene Theme des Formulars innerhalb des Rahmens:</p>

<ul>
  <li>
    <strong>Nutzer entscheidet</strong> — der Standard. Das Formular folgt den Betriebssystem- oder Browser-Einstellungen des Besuchers für
    Dunkel- oder Hellmodus.
  </li>
  <li>
    <strong>Dunkelmodus</strong> — erzwingt den Dunkelmodus unabhängig von den Einstellungen des Besuchers.
  </li>
  <li>
    <strong>Hellmodus</strong> — erzwingt den Hellmodus unabhängig von den Einstellungen des Besuchers.
  </li>
</ul>

> 💡 **Passe das Theme deiner Website an**
> <p>
>     Wenn deine Website immer dunkel ist, stelle die Einbettung oder das Popup auf Dunkelmodus, damit sich das Formular nahtlos einfügt. Wenn
>     deine Website die Einstellungen des Besuchers berücksichtigt, wähle Nutzer entscheidet. Um das Formular selbst zu gestalten, sieh dir{' '}
>     <a href="/de/branding-domains/appearance-theming">Erscheinungsbild &amp; Design</a> an.
>   </p>

<h2 id="next-steps">Nächste Schritte</h2>
<div class="not-prose grid gap-3 sm:grid-cols-2">
  - [Freigabelinks](/de/sharing-publishing/sharing-embedding) — Freigabelink-URLs erstellen und verwalten
  - [QR-Codes](/de/sharing-publishing/sharing-embedding#qr-codes) — Scannbare Codes erstellen und platzieren
  - [Eigene Domains](/de/branding-domains/custom-domains) — Formulare über deine eigene Domain bereitstellen
  - [Erscheinungsbild & Design](/de/branding-domains/appearance-theming) — Theme, Titelbild, Logo, Dunkelmodus
</div>