Teilen & Veröffentlichen
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.
Beide Snippets bauen auf dem ausgewählten Freigabelink auf und übernehmen dessen Ablaufdatum, Antwortlimit, eigene Domain und Analysen. Erstelle den Link zuerst — siehe Freigabelinks. Eine Ausnahme sind Query-Parameter-Standardwerte, die am Link eingestellt sind: Sie werden Einbettungs- oder Popup-Snippets nicht hinzugefügt.
Inline-Einbettung
Eine Inline-Einbettung platziert dein Formular direkt über ein iframe auf einer Seite. Öffne das Teilen-Panel, klicke auf die Einbetten-Karte und kopiere den generierten Snippet in das HTML deiner Website.
Layout
| Einstellung | Was sie bewirkt |
|---|---|
| Höhe (px) | iframe-Höhe in Pixeln. Standard ist 600. |
| Höhe automatisch anpassen | Passt die iframe-Höhe an den Formularinhalt an, sodass Teilnehmer innerhalb der Einbettung nie eine Scrollleiste sehen. Standardmäßig aus. Das Einschalten fügt dem Snippet ein kleines Skript hinzu. |
| Verzögertes Laden | Verzögert das Laden, bis das iframe sichtbar wird, indem loading="lazy" ergänzt wird. Standardmäßig aus. Beschleunigt den initialen Seitenaufbau, wenn das Formular weiter unten auf der Seite steht. |
Anzeige
| Einstellung | Was sie bewirkt |
|---|---|
| Titelbild ausblenden | Entfernt das Formular-Titelbild innerhalb der Einbettung. Nützlich, wenn deine Host-Seite bereits einen eigenen Header hat. |
| Logo ausblenden | Entfernt das Formular-Logo innerhalb der Einbettung. |
| Farbschema | Nutzer entscheidet (Standard, folgt den System-Einstellungen des Besuchers), Dunkelmodus oder Hellmodus. Siehe Farbschema weiter unten. |
Klicke auf Code anzeigen, um das generierte HTML zu sehen. Nutze Einbettungscode kopieren, um es zu kopieren, und füge es dann in deine Website ein. Auf Standard zurücksetzen stellt jede Einstellung wieder her.
Was das Snippet enthält
Ist die automatische Höhenanpassung aus, besteht das Snippet aus einem einzelnen iframe, das auf deinen Freigabelink mit angehängtem
?embed=1 zeigt. Die Anzeigeoptionen fügen eigene Parameter hinzu: hideCover=1, hideLogo=1 sowie
theme=dark oder theme=light.
<iframe src="https://form.formbase.so/Abc12XYz?embed=1" width="100%" height="600" style="border: none;"></iframe>Ist die automatische Höhenanpassung an, wird das iframe in ein div eingebettet und von einem Skript gefolgt. Das eingebettete
Formular sendet bei jeder Höhenänderung eine formbase:resize-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.
Popup
Ein Popup zeigt dein Formular als Overlay auf deiner Seite an. Öffne das Teilen-Panel, klicke auf die Popup Karte, richte deine Optionen ein und füge den generierten Code-Snippet in deine Website ein.
Auslöser
Wähle, wie das Popup geöffnet wird:
| Auslöser | Funktionsweise |
|---|---|
| Wenn eine Funktion aufgerufen wird | Der Standard. Das Snippet definiert eine globale Funktion, benannt nach dem Code oder dem benutzerdefinierten Slug deines Freigabelinks — zum Beispiel window.openFormbasePopup_Abc12XYz. Rufe sie über einen Button, einen Link oder einen beliebigen Event-Handler auf deiner Website auf. |
| Automatisch beim Seitenladen | Das Popup öffnet sich, sobald die Seite vollständig geladen ist. Zwei zusätzliche Einstellungen erscheinen: Verzögerung (Sekunden) und Einmal pro Sitzung zeigen, was ein Flag im sessionStorage des Besuchers speichert, damit das Popup nicht auf jeder Seite erneut erscheint. |
Layout
| Einstellung | Was sie bewirkt |
|---|---|
| Position | Wo das Popup erscheint: Zentriert, Unten rechts (Standard), Unten links, Oben rechts oder Oben links. Bei Zentriert ist das Popup 80 % der Viewport-Höhe hoch; die vier Eckpositionen sind 600 px hoch. |
| Breite (px) | Popup-Breite in Pixeln, begrenzt auf 90 % der Viewport-Breite. Standard ist 500. |
Anzeige
| Einstellung | Was sie bewirkt |
|---|---|
| Titelbild ausblenden | Entfernt das Formular-Titelbild innerhalb des Popups. |
| Logo ausblenden | Entfernt das Formular-Logo innerhalb des Popups. |
| Farbschema | Dieselben drei Optionen wie bei der Einbettung. Siehe Farbschema weiter unten. |
Popup-Gestaltung
| Einstellung | Was sie bewirkt |
|---|---|
| Overlay-Deckkraft (%) | Dunkelheit des Hintergrunds hinter dem Popup, 0 bis 100. Standard ist 50. |
| Kantenradius (px) | Eckenrundung des Popups. Standard ist 12. |
Verhalten
| Einstellung | Was sie bewirkt |
|---|---|
| Mit Escape schließen | Standardmäßig an. Durch Drücken von Escape wird das Popup geschlossen. |
| Bei Klick auf Overlay schließen | Standardmäßig an. Ein Klick auf den Hintergrund außerhalb des Popups schließt es. |
| Nach dem Absenden automatisch schließen | Standardmäßig aus. Das Popup schließt sich drei Sekunden, nachdem der Teilnehmer absendet. Die Verzögerung ist fest eingestellt. |
Klicke auf Code anzeigen, um den generierten Snippet zu sehen. Nutze Popup-Code kopieren, um ihn zu kopieren, und füge ihn dann in deine Website ein. Auf Standard zurücksetzen stellt alle Einstellungen wieder her.
Was das Snippet enthält
Das Popup-Snippet ist ein einziger, in sich geschlossener <script>-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:
<!-- Call window.openFormbasePopup_Abc12XYz() to open the form popup -->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.
Farbschema
Einbettungen und Popups teilen dieselben drei Optionen, und beide überschreiben das eigene Theme des Formulars innerhalb des Rahmens:
Nutzer entscheidet — der Standard. Das Formular folgt den Betriebssystem- oder Browser-Einstellungen des Besuchers für Dunkel- oder Hellmodus.
Dunkelmodus — erzwingt den Dunkelmodus unabhängig von den Einstellungen des Besuchers.
Hellmodus — erzwingt den Hellmodus unabhängig von den Einstellungen des Besuchers.
Passe das Theme deiner Website an
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 Erscheinungsbild & Design an.