Du baust Formulare in einem spezialisierten Formular-Tool. Jetzt musst du das Formular auf deine Website bringen. Läuft deine Website auf einer anderen Plattform, kannst du den Code nicht einfach kopieren und einfügen. Du bettest es ein. Ein eingebettetes Formular erscheint auf deiner Website, liegt aber woanders.
In diesem Artikel erfährst du, wie du Formulare einbettest, wie iframes funktionieren, wie es um die Sicherheit über Domains hinweg steht und welche Probleme bei eingebetteten Formularen häufig auftreten.
Was ist ein eingebettetes Formular?
Ein eingebettetes Formular liegt auf einem Server, erscheint aber auf einer anderen Website. Das Formular wird auf wemasy.ch gehostet und auf deiner Website per iframe angezeigt, etwa mit <iframe src="https://wemasy.com/form/abc123"></iframe>.
Der iframe schafft ein Fenster in eine andere Seite. Diese Seite enthält das Formular. Für den Nutzer sieht es aus, als läge das Formular auf deiner Website. Technisch ist es eine eigene Seite in einem Container.
So funktionieren iframes
Ein iframe ist ein eingebetteter Rahmen. Er lädt eine völlig eigene Seite innerhalb deiner Seite. Diese Seite hat eigenes HTML, CSS und JavaScript. Sie läuft in einer Sandbox, das heisst, sie kann nicht auf deine Seite zugreifen und umgekehrt.
iframes bieten Sicherheit durch Isolation: Das Formular-Tool kann nicht auf die Daten deiner Seite zugreifen, deine Seite nicht auf die Formulardaten, und stürzt das Formular ab, reisst es deine Seite nicht mit. iframes haben aber auch Nachteile: eingeschränkte direkte Kommunikation zwischen Seite und Formular, mögliche Auswirkungen auf SEO (Google indexiert den Formularinhalt womöglich nicht), längere Ladezeiten und fehlende Unterstützung für Cookies über Domains hinweg.
Ein Formular per iframe einbetten
Die meisten Formular-Builder liefern einen Einbettungscode wie <iframe src="https://wemasy.com/form/abc123" width="100%" height="600"></iframe>. Kopiere diesen Code in das HTML deiner Website, um das Formular im Container anzuzeigen. Ein häufiges Problem: Eine feste Höhe verursacht Scrollprobleme. Ist das Formular länger als die gesetzte Höhe, scrollt es innerhalb des iframes (schlechte Erfahrung). Du müsstest die genaue Höhe des Formulars kennen, aber Formulare wachsen und schrumpfen durch bedingte Logik, die Höhe ist also nicht fest. Die Lösung sind iframes mit automatischer Grössenanpassung, die über postMessage zwischen iframe und übergeordneter Seite kommunizieren. Ändert das Formular seine Grösse, meldet es das der übergeordneten Seite, die den iframe anpasst. Das JavaScript der übergeordneten Seite hört mit window.addEventListener('message', (e) => { if (e.origin !== 'https://wemasy.com') return; if (e.data.type === 'resize') { iframe.height = e.data.height; } }); auf Nachrichten aus dem iframe. Das Formular im iframe sendet seine Höhe mit parent.postMessage({ type: 'resize', height: form.scrollHeight }, '*');, sodass sich der iframe automatisch an den Formularinhalt anpasst.
Sicherheit über Domains hinweg
iframes laufen aus Sicherheitsgründen in einer Sandbox. Das Formular kann nicht auf die Daten deiner Seite zugreifen. Deine Seite kann nicht auf die Daten des Formulars zugreifen. Das ist gut so.
Sei vorsichtig mit dem Attribut sandbox bei <iframe src="https://wemasy.com/form/abc123" sandbox="allow-same-origin allow-scripts allow-forms"></iframe>. Das Attribut sandbox schränkt ein, was der iframe darf. allow-same-origin erlaubt dem iframe Zugriff auf Cookies und Session Storage, allow-scripts erlaubt die Ausführung von JavaScript und allow-forms erlaubt das Absenden des Formulars. Aktiviere nur die Sandbox-Rechte, die du wirklich brauchst. Der Standard (alle Rechte verweigert) ist am sichersten, bricht aber die meisten Formulare.
Formularübermittlung bei eingebetteten Formularen
Sendet der Nutzer ein Formular im iframe ab, geschieht das innerhalb des iframes, und das Formular schickt die Daten an den Server des Formular-Builders (nicht an deinen). Dein Server sieht die Formulardaten nie. Das Formular-Tool speichert sie, und du rufst sie später per API oder E-Mail-Benachrichtigung ab. Brauchst du mehr Kontrolle, musst du die Übermittlung abfangen. Dafür muss das Formular-Tool per window.parent.postMessage({ type: 'submit', data: formData }, origin); eine postMessage an die übergeordnete Seite senden. Die übergeordnete Seite kann dann etwas mit den Daten tun (an deinen Server schicken, eine eigene Dankeseite zeigen usw.).
Eingebettete Formulare auf dem Smartphone
Auf dem Smartphone können iframes problematisch sein. Das Formular ist kleiner und schwerer zu bedienen. Der iframe passt sich womöglich nicht richtig an, wenn er keine automatische Grössenanpassung unterstützt.
Besser ist auf dem Smartphone ein Link auf ein Formular in voller Seitengrösse statt eines iframes. Erkenne die Viewport-Grösse und zeige auf dem Smartphone einen Link-Button, am Desktop bettest du ein, mit if (window.innerWidth < 768) { document.getElementById('form-container').innerHTML = '<a href="...">Open form</a>'; } else { // embed the iframe }.
Leistungsauswirkungen eingebetteter Formulare
iframes verursachen Mehraufwand. Jeder iframe ist eine eigene HTTP-Anfrage. Er lädt eigenes HTML, CSS und JavaScript. Das verlangsamt deine Seite.
Lade den iframe verzögert, also erst, wenn der Nutzer in seine Nähe scrollt, mit <iframe data-src="https://..." style="display: none"></iframe> und window.addEventListener('scroll', () => { if (iframe in viewport && !iframe.src) { iframe.src = iframe.dataset.src; } });. Der iframe lädt nur, wenn der Nutzer ihn gleich sehen wird.
Wann eingebettete Formulare, wann Alternativen?
Nutze eingebettete Formulare, wenn du deine Website nicht anpassen kannst (zum Beispiel bei einem geschlossenen, gehosteten Website-Builder) oder wenn du das Formular-Tool getrennt von deiner Website halten willst.
Nutze native Formulare, wenn du deine Website kontrollierst und Wert auf Leistung legst. Ein Formular auf deinem eigenen Technik-Stack lädt schneller und lässt sich besser integrieren.
Nutze gehostete (eigenständige) Formulare, wenn du es einfach willst. Ein Formular auf der Domain des Builders ist am leichtesten einzurichten, wirkt aber weniger professionell.
So geht WEMASY mit eingebetteten Formularen um
WEMASY-Formulare lassen sich per iframe mit automatischer Grössenanpassung auf externen Seiten einbetten. Formulare sind für alle Gerätegrössen optimiert. Einsendungen erhältst du in deinem WEMASY-Dashboard, per E-Mail oder über Webhooks.
Sieh dir die Einbettungsoptionen in deinem WEMASY-Tarif an.