In Webseite integrieren

Du kannst jedes Formular direkt in Deine bestehende Website einbauen. Deine Besucher füllen es dann aus, ohne Deine Seite zu verlassen. Öffne dazu im Teilen-Dialog Deines Formulars „In Website Einbetten".

Welche Variante passt zu Dir?

Variante	So sieht es aus	Geeignet für
Eingebettet (Script)	Das Formular steht direkt in Deiner Seite, z. B. unter einem Text.	Kontaktseiten, Anfrageformulare, Landingpages
Popup (Script)	Ein Button oder Link öffnet das Formular in einem Fenster über Deiner Seite.	„Jetzt anfragen"-Buttons, Formulare, die nicht dauerhaft sichtbar sein sollen
iFrame	Das Formular steht in einem Rahmen mit fester Höhe.	Nur wenn Dein System keine Scripts erlaubt

Wir empfehlen Dir die Script-Varianten: Nur mit ihnen passt sich die Höhe automatisch an Dein Formular an, und nur sie bieten Popup, Vollbild auf dem Handy und automatisches Scrollen.

Schritt für Schritt

1. Öffne Dein Formular und klicke im Teilen-Dialog auf „In Website Einbetten".
2. Stelle Breite und Mindesthöhe ein und wähle die gewünschten Optionen (siehe unten).
3. Kopiere den Code im Tab „Script" mit „Kopieren".
4. Füge den Code in Deiner Website an der Stelle ein, an der das Formular erscheinen soll.

So fügst Du HTML-Code in gängigen Systemen ein:

• WordPress: Block „Individuelles HTML" im Block-Editor.
• Webflow: Element „Code Embed".
• Wix: „Einbetten" → „Code einbetten".
• Andere Systeme: Suche nach einem Baustein für „HTML" oder „Code". Zu „HTML-Code einfügen" findest Du für alle gängigen Systeme Hilfeartikel.

tipp

Den Code musst Du nur einmal einfügen. Änderungen an Deinem Formular, z. B. neue Felder oder ein anderes Design, erscheinen automatisch auch auf Deiner Website.

Die Optionen im Überblick

Breite und Mindesthöhe

Die Breite richtet sich nach dem umgebenden Element auf Deiner Website. Mit 100% nutzt das Formular die volle verfügbare Breite, Du kannst aber auch einen festen Wert wie 600px angeben.

Die Mindesthöhe bestimmt, wie viel Platz das Formular beim Laden bekommt. Sobald es geladen ist, passt sich die Höhe automatisch an den Inhalt an. So scrollt nur Deine Website und nie das Formular selbst, auch wenn Felder durch Bedingungen erscheinen oder Fehlermeldungen hinzukommen.

Titel und Beschreibung ausblenden

Hat Deine Website schon eine eigene Überschrift über dem Formular, blendest Du mit „Titel und Beschreibung ausblenden" den Titel und die Beschreibung Deines Formulars aus. Deine Besucher sehen dann direkt die Felder. Die Option wirkt beim Script und beim iFrame.

Als Popup öffnen

Mit „Als Popup öffnen" erhältst Du statt des eingebetteten Formulars einen Link. Ein Klick darauf öffnet das Formular in einem Fenster über Deiner Seite. Auf dem Handy fährt es von unten herein und nutzt fast den ganzen Bildschirm.

Deine Besucher schließen das Popup mit dem ×, mit der Esc-Taste oder mit einem Klick neben das Fenster. Die Maximale Breite legt fest, wie breit das Fenster höchstens wird (Standard: 640 Pixel).

Den Linktext „Formular öffnen" kannst Du frei ändern. Statt eines Links funktioniert auch ein Button, den Du passend zu Deiner Website gestaltest:

<button data-form="DEIN-FORMULAR" data-mode="popup">Jetzt anfragen</button>
<script src="https://app.formenio.de/embed.js" async></script>

Du kannst auch mehrere Buttons auf einer Seite haben, die dasselbe oder verschiedene Formulare öffnen.

Auf dem Handy im Vollbild

Mit „Auf dem Handy im Vollbild" bleibt Dein Formular auf großen Bildschirmen ganz normal eingebettet. Auf dem Handy (bis 640 Pixel Breite) zeigt Deine Seite es als Vorschau. Beim ersten Tippen öffnet es sich im Vollbild, sodass Deine Besucher beim Ausfüllen den ganzen Bildschirm zur Verfügung haben. Über das × kehren sie zu Deiner Seite zurück.

Das lohnt sich vor allem bei langen Formularen oder wenn Deine Website auf dem Handy wenig Platz neben dem Formular lässt.

Vorausgefüllte Felder

Hast Du im Teilen-Dialog unter „Felder vorausfüllen" Werte hinterlegt, übernimmt der Einbettungscode sie automatisch. Mehr dazu erfährst Du unter Felder vorausfüllen.

Das passiert automatisch

• Höhe: Das Formular ist immer genau so hoch wie sein Inhalt.
• Scrollen: Wechseln Deine Besucher zur nächsten Seite des Formulars oder senden sie es ab, scrollt Deine Website zum Anfang des Formulars. Fehlt eine Pflichtangabe, scrollt sie direkt zum betroffenen Feld.
• Weiterleitung: Hast Du auf dem Endbildschirm eine automatische Weiterleitung eingerichtet, wechselt Deine ganze Website zur Zieladresse und nicht nur der Formularbereich.
• Ladezeit: Das Formular lädt erst, kurz bevor es in den sichtbaren Bereich kommt. Das hält Deine Seite schnell.
• Mehrere Formulare: Du kannst beliebig viele Formulare auf einer Seite einbetten, auch dasselbe Formular mehrfach.
• Ohne JavaScript: Ist JavaScript bei Deinen Besuchern blockiert, sehen sie stattdessen einen Link, der zum Formular führt.

Weitere Einstellungen im Code

Du kannst den kopierten Code um weitere Attribute ergänzen. Setze sie in das Element mit data-form:

<div
  data-form="DEIN-FORMULAR"
  data-scroll-offset="80"
  data-max-height="700"
></div>

Attribut	Wirkung
data-scroll-offset="80"	Abstand nach oben (in Pixeln) beim automatischen Scrollen. Hat Deine Website eine feste Kopfzeile, trägst Du hier deren Höhe ein, damit das Formular nicht dahinter verschwindet. Standard: 16.
data-max-height="700"	Begrenzt die Höhe. Ist das Formular länger, scrollt es innerhalb dieser Höhe.
data-theme="outline"	Zeigt das Formular mit einem anderen Theme: light, outline, dark, custom oder underlined.
data-lazy="false"	Lädt das Formular sofort und nicht erst, kurz bevor es sichtbar wird.
data-params="utm_source=website"	Hängt zusätzliche Parameter an, z. B. für Deine Auswertungen in Analytics.

Alle Attribute und die Möglichkeiten für Entwickler findest Du unter Einbettung für Entwickler.

Einbetten als iFrame

Erlaubt Dein System keine Scripts, nutzt Du den Code aus dem Tab „iFrame". Beachte dabei:

• Das Formular hat eine feste Höhe. Ist es länger, scrollt es innerhalb des Rahmens. Wähle die Höhe deshalb großzügig.
• Popup, Vollbild auf dem Handy und automatisches Scrollen stehen nicht zur Verfügung.
• „Titel und Beschreibung ausblenden" funktioniert auch hier.

Datenschutz

• Das Script setzt keine Cookies und erfasst keine Daten Deiner Besucher.
• Die Antworten gehen direkt an Formenio. Deine Website erhält keine Antworten, nur die Information, dass ein Formular abgesendet wurde.
• Eingebettete Formulare laufen immer über app.formenio.de, auch wenn Du eine eigene Subdomain nutzt.
• Ob Analytics-Daten erfasst werden, legst Du wie gewohnt in den Einstellungen Deines Formulars fest.

Wenn etwas nicht funktioniert

Das Formular erscheint nicht. Prüfe, ob Dein System den Code vollständig übernommen hat. Manche Editoren entfernen <script>-Zeilen. Nutze dann einen ausdrücklichen HTML- oder Code-Baustein. Blockiert ein Cookie- oder Consent-Tool externe Scripts, gib app.formenio.de dort frei.

Das Formular ist abgeschnitten oder hat eine eigene Scrollleiste. Wahrscheinlich gibt Dein Theme dem umgebenden Element eine feste Höhe. Entferne diese Höhe oder setze sie auf „automatisch". Nutzt Du den iFrame-Code, wechsle zum Script.

Beim Scrollen verschwindet das Formular hinter der Kopfzeile. Ergänze data-scroll-offset mit der Höhe Deiner Kopfzeile (siehe oben).

Deine Website nutzt eine Content Security Policy. Erlaube https://app.formenio.de für script-src und frame-src.

Du brauchst Hilfe?

Wir unterstützen Dich gerne beim Einbinden des Formulars in Deine Website. Kontaktiere uns und wir können Dir sicher weiterhelfen!