Ein Kontaktformular, das nur auf einer eigenständigen Seite existiert, ist eine verpasste Chance. Die effektivsten Kontaktformulare erscheinen dort, wo sich Besucher bereits befinden – auf Produktseiten, Blogbeiträgen, Landingpages, Seitenleisten und Fußzeilen – ohne dass Besucher zuerst zu einer separaten Kontaktseite navigieren müssen.
Dieser Leitfaden behandelt die zwei wichtigsten Einbettungsmethoden (JavaScript-Snippet und iFrame), wann welche zu verwenden ist und wie sie auf den gängigsten Website-Plattformen korrekt implementiert werden.
Zwei Einbettungsmethoden: JS-Snippet vs. iFrame
JavaScript-Snippet (Für die meisten Fälle empfohlen)
Eine JavaScript-Einbettung ist ein einzelnes <script>-Tag, das Sie in Ihr HTML einfügen. Das Skript läuft im Browser des Besuchers und rendert das Formular direkt auf der Seite, wobei es dem Seitenlayout entspricht oder sich anpasst.
Vorteile:
- Kann die Schriftarten und den allgemeinen Stil der umgebenden Seite anpassen
- Kann ohne vollständiges Neuladen der Seite absenden (bessere UX)
- Kann die Höhe dynamisch basierend auf dem Formularstatus vergrößern oder verkleinern
- Kann mit der übergeordneten Seite kommunizieren (Analysen, Konversionsverfolgung)
- Generell schneller zu laden als ein iFrame, da kein separater Browsing-Kontext erstellt wird
Einschränkungen:
- Erfordert, dass die Host-Website externe Skripte zulässt (die meisten tun das)
- JavaScript muss im Browser des Besuchers aktiviert sein
- Erfordert sorgfältige Tests, um sicherzustellen, dass das Formular nicht mit bestehenden Seitenskripten in Konflikt gerät
iFrame
Ein iFrame bettet das Kontaktformular als separates „Fenster" in Ihre Seite ein. Das Formular läuft in einem vollständig isolierten Kontext.
Vorteile:
- Keinerlei Konflikt mit dem CSS oder JavaScript der Host-Website – vollständig isoliert
- Funktioniert auf Plattformen, die externe Skripte einschränken (einige CMS-Umgebungen)
- Kein JavaScript auf der Host-Seite erforderlich
Einschränkungen:
- Die Höhe muss fest eingestellt oder mit JavaScript verwaltet werden; iFrames passen ihre Größe nicht automatisch basierend auf dem Inhalt an
- Das Styling ist isoliert – das Formular übernimmt keine Schriftarten oder Farben der übergeordneten Seite, es sei denn, dies ist im Formular-Tool konfiguriert
- Einige Analyse-Verfolgungen sind über iFrame-Grenzen hinweg schwieriger
- Kann optisch von der umgebenden Seite losgelöst wirken
Wann iFrame verwenden:
- Die hosting-Plattform schränkt externes JavaScript ein
- Sie betten auf einer Plattform ein, auf der Skriptkonflikte häufig und schwer zu debuggen sind
- Das Formular wird in eine E-Mail oder eine Umgebung eingebettet, die JavaScript nicht ausführen kann
Einbetten in WordPress
Methode 1: HTML-Block mit JS-Snippet
Im WordPress-Block-Editor (Gutenberg):
- Klicken Sie auf +, um einen neuen Block hinzuzufügen
- Suchen Sie nach Benutzerdefiniertes HTML und wählen Sie es aus
- Fügen Sie Ihren JavaScript-Einbettungscode in den Block ein
Das funktioniert zuverlässig für die meisten WordPress-Websites. Das Skript wird beim Laden der Seite ausgeführt und rendert das Formular an der Stelle des Blocks.
Wichtig: Wenn Ihre WordPress-Website ein Caching-Plugin verwendet (WP Rocket, W3 Total Cache usw.), fügen Sie die Formularseite zur Cache-Ausschlussliste hinzu. Gecachte Seiten führen eingebettete Skripte nach einem Formularabsenden möglicherweise nicht korrekt aus.
Methode 2: iFrame-Block
Im Block-Editor:
- Fügen Sie einen Benutzerdefiniertes HTML-Block hinzu
- Fügen Sie den iFrame-Code ein:
<iframe src="https://yourform.url" width="100%" height="600" frameborder="0"></iframe>
Passen Sie das height-Attribut basierend auf der tatsächlichen Höhe Ihres Formulars an. Wenn das Formular Validierungsfehler aufweist, die die sichtbare Höhe des Formulars vergrößern, zeigt der iFrame eine Scrollleiste im eingebetteten Fenster an – was defekt aussieht. Testen Sie alle Formularstatus (leer, Fehler, Erfolg) und stellen Sie die Höhe auf den höchsten Status ein.
Methode 3: Widget-Bereich oder Fußzeile
Für ein Kontaktformular in der Fußzeile oder Seitenleiste verwenden Sie ein Text-Widget:
- Gehen Sie zu Darstellung → Widgets
- Fügen Sie ein Benutzerdefiniertes HTML-Widget zu Ihrer Seitenleiste oder Fußzeile hinzu
- Fügen Sie den Einbettungscode ein
Einbetten in Webflow
Die native Embed-Komponente von Webflow unterstützt JavaScript:
- Ziehen Sie im Webflow-Designer eine Embed-Komponente auf Ihre Seite
- Klicken Sie auf die Komponente und öffnen Sie den Embed-Code-Editor
- Fügen Sie Ihr JavaScript-Snippet ein
- Klicken Sie auf Speichern & Schließen
- Veröffentlichen Sie die Seite
Für iFrame-Einbettungen gilt dasselbe Verfahren – fügen Sie den iFrame-Tag in die Embed-Komponente ein.
Webflow-Hinweis: Der Vorschaumodus von Webflow im Designer führt externe Skripte möglicherweise nicht aus. Veröffentlichen Sie auf Ihrer Staging- oder Produktionsdomain, um das Formular zu testen.
Einbetten in Squarespace, Wix und ähnlichen Baukästen
Die meisten Website-Baukästen haben einen „Benutzerdefinierter Code"- oder „HTML-Einbettungs"-Block:
- Squarespace: Fügen Sie einen Code-Block zu einer beliebigen Seite hinzu und fügen Sie das Einbettungs-Snippet ein
- Wix: Fügen Sie ein HTML-iFrame-Element ein (über Hinzufügen → Einbetten → HTML-iFrame) und fügen Sie Ihren iFrame- oder JS-Code ein
- Showit: Verwenden Sie ein HTML-Widget auf der Design-Leinwand
Hinweis zu Wix: Der Einbettungscontainer von Wix ist technisch gesehen ein iFrame, auch wenn Sie ein JavaScript-Snippet einfügen. Externe Skripte innerhalb einer Wix-HTML-Einbettung laufen in einem isolierten iFrame-Kontext. Das bedeutet, dass das Formular funktioniert, aber die seitenübergreifende Analyse-Integration eingeschränkt ist.
Einbetten in eine benutzerdefinierte HTML-Website
Für einfache HTML/CSS-Websites oder Websites, die mit einem statischen Generator erstellt wurden (Hugo, Jekyll, Eleventy):
JavaScript-Snippet: Fügen Sie den <script>-Tag kurz vor </body> auf jeder Seite ein, auf der das Formular erscheinen soll. Fügen Sie einen Platzhalter <div id="contact-form"></div> hinzu, wo das Formular gerendert werden soll, falls das Skript ein Zielelement benötigt.
iFrame: Fügen Sie den <iframe>-Tag direkt in das HTML der Seite an der Stelle ein, an der das Formular erscheinen soll.
Überlegungen zur Ladeperformance
Ein eingebettetes Kontaktformular sollte Ihre Seite nicht verlangsamen. Achten Sie auf:
Asynchrones Laden: Das Script-Tag sollte das async-Attribut enthalten, damit es das Laden des Hauptinhalts der Seite nicht blockiert.
<script src="https://cdn.example.com/form.js" data-key="your-key" async></script>
Lazy Loading: Für Formulare unterhalb des sichtbaren Bereichs unterstützen einige Einbettungssysteme Lazy Loading – das Formular-Skript wird erst geladen, wenn der Besucher in die Nähe des Formulars scrollt. Das verbessert die anfängliche Seitenladezeit.
CDN-Auslieferung: Das Formular-JavaScript sollte von einem Content Delivery Network (CDN) mit globalen Edge-Punkten ausgeliefert werden, damit die Ladezeit für Besucher unabhängig von ihrem Standort schnell ist.
Konversionsverfolgung nach der Einbettung
Wenn Sie Google Analytics, Meta Pixel oder ein anderes Analyse-Tool verwenden, konfigurieren Sie die Formular-Einsende-Verfolgung so, dass sie ausgelöst wird, wenn das eingebettete Formular erfolgreich abgesendet wurde.
Für JavaScript-Einbettungen sollte der Formularanbieter einen Callback oder ein Ereignis unterstützen, das bei erfolgreichem Absenden ausgelöst wird:
// Beispiel — tatsächliche Syntax variiert je nach Anbieter
onContactFormSubmit(function() {
gtag('event', 'contact_form_submit', { event_category: 'engagement' });
});
Für iFrame-Einbettungen verwenden Sie window.postMessage, um das Einsende-Ereignis vom iFrame an die übergeordnete Seite zu übermitteln, und lösen dann das Analyse-Ereignis auf der übergeordneten Seite aus. Das ist technisch aufwendiger – prüfen Sie, ob Ihr Formularanbieter dies nativ unterstützt.
Testen Ihres eingebetteten Formulars
Testen Sie vor der Veröffentlichung:
- Leeres Absenden – bestätigen Sie, dass die Pflichtfeld-Validierung korrekt ausgelöst wird
- Ungültige E-Mail – bestätigen Sie, dass das E-Mail-Feld einen Validierungsfehler anzeigt
- Erfolgreiches Absenden – bestätigen Sie, dass der Erfolgsstatus erscheint und die Einsendung empfangen wurde
- Mobil – öffnen Sie die Seite auf einem echten Telefon und testen Sie Tipp-Ziele, Tastaturverhalten und Formular-Scrollen
- Mit aktiviertem Caching – wenn Ihre Website einen Cache verwendet, testen Sie, ob das Formular auf einer gecachten Seitenladung funktioniert
- Mit einer Browser-Erweiterung – einige Werbeblocker blockieren externe Skripte; testen Sie in einem sauberen Browser-Profil
Wie Nura24 die Kontaktformular-Einbettung bereitstellt
Das Kontaktseiten-Modul von Nura24 generiert sowohl ein JavaScript-Einbettungs-Snippet als auch einen iFrame-Einbettungscode aus dem Dashboard, der ohne Programmierung in jede Website eingefügt werden kann. Das Widget-Skript lädt asynchron und wird von einem CDN ausgeliefert. Visuelle Einstellungen – Farbe, Schriftart, Rahmenradius, Dunkel-/Hellmodus – werden im Nura24-Dashboard konfiguriert und automatisch auf das eingebettete Formular angewendet, sodass eine Aktualisierung des Brandings an einer Stelle es überall aktualisiert, wo das Formular eingebettet ist. Einsendungen werden an das Nura24-Ticket-System weitergeleitet und lösen optional E-Mail-Benachrichtigungen für Mitarbeiter und automatische Antwort-E-Mails an den Besucher aus.