Embed in Builder-Plattformen (Webflow, Framer, WordPress)

Embed-Code einfügen: Webflow, Framer und WordPress verbinden

Dieser Artikel zeigt, wie der Funnelforms-Embed-Code in den gängigen Website-Buildern Webflow, Framer und WordPress eingebunden wird. Der eigentliche Code ist überall identisch — es ändert sich nur, wo er in der jeweiligen Plattform eingefügt wird.

Voraussetzungen

Formular ist veröffentlicht.
Aktives Abonnement oder laufende Testphase.
Die Domain, auf der das Formular eingebettet wird, ist im Formular als zugelassene Domain hinterlegt (Pflicht seit Januar 2026).
Bearbeitungsrecht in der jeweiligen Plattform für Custom-Code- oder Embed-Elemente.

Wo finden

Der Embed-Code wird im Formular-Editor → Einbetten erzeugt. In den Reitern Inline, Popup und Widget stehen jeweils die passenden Snippets — bestehend aus einem Skript-Tag und einem HTML-Container.

Funktionen

Plattform-unabhängiger Code: Der Embed-Code besteht aus reinem HTML/JavaScript und funktioniert in jedem Builder, der Custom-HTML-Blöcke unterstützt.
Domain-Prüfung: Vor dem Anzeigen des Formulars führt das Embed-Skript eine serverseitige Domain-Validierung durch. Ist die Host-Domain nicht zugelassen, wird statt des Formulars eine Hinweismeldung angezeigt.
Lazy Loading: Der eingebettete iframe wird mit loading="lazy" ausgeliefert — gut für Page-Speed in jedem Builder.
Parent-URL-Tracking: Funktioniert in allen drei Plattformen ohne Zusatzkonfiguration.

Schritt-für-Schritt-Anleitung

Webflow

Öffne im Webflow Designer die gewünschte Seite.
Ziehe ein Embed-Element (Add Elements → Components → Embed) an die gewünschte Stelle.
Füge den Embed-Code aus dem Funnelforms-Editor 1:1 ein und speichere.
Publiziere die Seite — das Formular ist auf der Live-Domain sichtbar, sobald diese in den Funnelforms-Einstellungen freigegeben ist.

Framer

Öffne in Framer die Zielseite.
Füge ein Embed-Element (Insert → Embed) ein.
Wähle die Option für HTML-Embed und füge den Code aus dem Funnelforms-Editor ein.
Veröffentliche das Projekt — das Formular wird auf der Live-Domain ausgeliefert.

WordPress (Block-Editor)

Öffne die Seite oder den Beitrag im Block-Editor (Gutenberg).
Füge einen Block vom Typ Eigenes HTML hinzu.
Füge den Embed-Code aus dem Funnelforms-Editor ein und speichere.
Aktualisiere die Seite und prüfe das Formular im Frontend.

WordPress (Classic-Editor)

Wichtig: Der Classic-Editor entfernt im Visuell-Modus Script-Tags. Den Embed-Code zwingend im Text- bzw. Code-Modus einfügen, nicht im visuellen Editor.

Startseite von WordPress.com mit „Anmelden“ und „Jetzt starten“ oben rechts

Öffne den Beitrag und wechsle in den Text- oder Code-Modus.
Füge den Embed-Code an der gewünschten Stelle ein.
Speichere und prüfe das Frontend.

Weitere Hinweise zu den Plattformen

Webflow: Der Embed-Code muss in ein Embed-Element (max. 10 000 Zeichen) — der Funnelforms-Snippet liegt weit darunter. Bei Auto-Resize sollte der umgebende Container overflow: visible behalten, sonst wird der wachsende iFrame abgeschnitten.
Framer: Im Embed-Component den HTML-Modus verwenden, nicht den URL-Modus. Letzterer rendert die Adresse in einem zusätzlichen iFrame und bricht das Auto-Resizing.
WordPress Page-Builder (Elementor, Divi etc.): Statt des Standardblocks das jeweilige HTML- bzw. Custom-Code-Widget verwenden. Sicherheits-Plugins wie Wordfence oder iThemes können Script-Tags filtern oder über Content-Security-Policy blockieren — in dem Fall den Embed-Code im Plugin freigeben.
Auto-Resize bei animierten Seiten: Builder, die Inhalte nachträglich animieren (Framer-Page-Transitions, WordPress-Lazy-Load), können beim ersten Messen eine falsche Höhe melden. Abhilfe: eine sinnvolle min-height auf den Embed-Container setzen.
HTTPS-Pflicht: Der Embed-Snippet darf nur auf HTTPS-Seiten geladen werden — auf reinen HTTP-Seiten blockieren Browser das Script als Mixed Content.

Best Practices

Vor dem Einbau die Domain unter Domains in Funnelforms freischalten — sonst wird das Formular blockiert.
Skript-Tag pro Seite nur einmal laden, auch wenn mehrere Formulare auf einer Seite stehen.
In Webflow und Framer Inline-Embeds in einen Container ohne feste Pixelbreite legen — so funktioniert die responsive Skalierung.
Popup- und Widget-Embeds bevorzugt im globalen Header oder Footer der Plattform einfügen, damit sie auf allen Unterseiten verfügbar sind.

Häufige Stolpersteine

„Domain Restricted"-Meldung statt Formular: Die Live-Domain ist in den Funnelforms-Einstellungen nicht freigeschaltet. Domain hinzufügen, ggf. Subdomain und Stagingdomain separat eintragen.
Webflow überschreibt den Embed-Container: Das Embed-Element darf nicht in einen Container mit fester Pixelhöhe gepackt werden, wenn Auto-Resize aktiv ist.
WordPress entfernt das Skript-Tag: Manche Sicherheits-Plugins filtern Skript-Tags aus dem HTML-Block. Das Plugin temporär deaktivieren oder Skript-Tag whitelisten.
Framer-Vorschau zeigt das Formular nicht: Die Embed-Vorschau im Editor ist sandboxed. Erst die veröffentlichte Live-Seite zeigt das echte Formular.
Caching-Plugins (WP Rocket, LiteSpeed, Cloudflare): Nach einer Embed-Code-Änderung den Plattform- bzw. CDN-Cache leeren, sonst wird die alte Version weiter ausgeliefert.

Tipps & Hinweise

Tipp: Wer einen separaten WordPress-Plugin-Ansatz nutzt (Funnelforms Plugin für WordPress), benötigt den HTML-Embed-Code dort nicht — das Plugin liefert eigene Shortcode-Mechanik. Eine Vermischung beider Wege auf derselben Seite ist nicht nötig.

Achtung: Builder-spezifische Caching-Layer können Änderungen am Embed-Code verzögert ausspielen. Nach Anpassungen den Cache der Plattform leeren.

Häufige Fragen

Brauche ich für Webflow oder Framer eine spezielle Integration?

Nein. Der HTML-Embed-Code aus dem Funnelforms-Editor reicht aus.

Funktioniert der Embed auch in Shopify oder anderen Buildern?

Ja, in jedem System, das Custom-HTML-Blöcke unterstützt. Der Code bleibt derselbe.

Was passiert, wenn die Stagingdomain nicht freigegeben ist?

Das Embed-Skript zeigt eine „Domain Restricted"-Meldung. Staging- und Live-Domain getrennt freischalten.

Kann ich mehrere Formulare auf einer Seite einbetten?

Ja. Den Container (<div data-form-id="...">) mehrfach einfügen, das Skript-Tag aber nur einmal pro Seite laden.

Wirkt sich das Embed auf den Page-Speed aus?

Der iframe lädt verzögert (loading="lazy"). Das Embed-Skript ist klein und blockiert das Rendering der Seite nicht.