Embed & Share: Formulare einbetten oder per Link teilen
Unter Embed & Share findest du alle Wege, dein Formular live auf Websites zu bringen oder per Link zu teilen. Funnelforms generiert dir den passenden Code-Snippet je Variante, speichert deine Einstellungen pro Formular und lädt das Formular zur Laufzeit über ein zentrales Script (/embed.js) nach. Du musst kein eigenes Hosting aufsetzen und keine Tracking-Logik schreiben.
Die 4 Einbettungs-Varianten im Vergleich
- Inline: Das Formular wird direkt in den Seiteninhalt eingebettet (wie ein Block-Element). Ideal für Landingpages, Kontaktseiten und Blogartikel. Unterstützt Auto-Resize, freie Breite/Höhe und mehrere Instanzen pro Seite.
- Direct Link: Standalone-URL nach dem Schema
deine-domain.tld/l/<form-id-oder-slug>. Kein Embed nötig – perfekt für E-Mail-Signaturen, Social-Bio-Links, QR-Codes oder Werbeanzeigen. Auch im kostenlosen Plan verfügbar. - Popup: Modal-Fenster, das per Auto-Open (Verzögerung), Button-Klick oder Scroll-Tiefe geöffnet wird. Gut für Newsletter-Capture, Exit-Offers oder kontextuelle Anfragen.
- Widget: Chat-Bubble-Style in einer Bildschirmecke (unten-rechts, unten-links, oben-rechts, oben-links). Optionaler Begleittext, vier Animationen (Slide, Fade, Bounce, None). Empfohlen für globale Konversions-Punkte über mehrere Seiten hinweg.
Welche Variante passt wann?
- Lead-Capture im Content: Inline – der Lead ist mental schon im Thema.
- Erste Konversion ohne eigene Website: Direct Link – sofort einsatzbereit, auch im Free-Plan.
- Kampagnen mit klarem Trigger (Exit, Promo): Popup mit Auto-Open oder Scroll-Trigger.
- Persistenter Touchpoint auf der gesamten Website: Widget in der Ecke.
Du kannst Varianten kombinieren – z.B. Inline auf der Landingpage plus Widget global im Footer. Jede Variante hat eigene Einstellungen, die formularspezifisch gespeichert werden.
Plan- & Feature-Verfügbarkeit
Die Embed-Varianten sind über Feature-Flags an den Plan gekoppelt:
- Free-Plan: Es wird ein Paywall-Hinweis statt der Embed-Optionen angezeigt. Lediglich der Direct Link bleibt nutzbar, da er nicht eingebettet, sondern nur geteilt wird.
- Bezahlte Pläne: Inline, Popup und Widget werden je nach Plan-Stufe freigeschaltet. Welche Variante in deinem Plan enthalten ist, siehst du direkt im Editor-Tab; gesperrte Tabs zeigen einen Upgrade-Hinweis.
Vor dem Einbetten: 3 Voraussetzungen
- Formular ist veröffentlicht: Nur Formulare mit Status Published können live ausgeliefert werden. Ist das Formular noch im Entwurf, blendet der Embed-Tab eine gelbe Warnung ein.
- Mindestens eine Domain ist zugewiesen: Für Formulare ab dem 26.01.2026 verpflichtend. Ohne freigegebene Domain liefert die serverseitige Sicherheitsprüfung
403 domain_mismatchund der Embed bleibt leer. Domains weist du im Formular-Editor unter Einstellungen → Domain-Zuweisung zu. - Plan deckt die gewünschte Variante: Wenn der gewünschte Tab gesperrt ist, vorher upgraden.
Wie der Embed-Code funktioniert
Jede Variante liefert einen kleinen Code-Snippet, der aus zwei Teilen besteht: einem <script>-Block, der embed.js nachlädt und die Konfiguration (Formular-ID, Typ, Base-URL) im Window-Objekt registriert, sowie einem HTML-Container mit data-*-Attributen. Beim Laden ersetzt das Embed-Script den Container durch ein iFrame, das dein Formular zeigt. Das iFrame sendet beim Laden die übergeordnete Seiten-URL an Funnelforms – diese fließt in Analytics als Entry URL und in die serverseitige Domain-Validierung.
Wichtig: Der Script-Block muss einmal pro Seite ausreichen. Mehrere Container der gleichen Variante teilen sich denselben Script-Tag.
Sicherheit: Domain-Whitelist
Funnelforms prüft bei jedem Embed-Aufruf serverseitig, ob die einbettende Domain für das Formular freigegeben ist. Ohne Whitelist-Eintrag erscheint kein Formular, sondern eine Fehlermeldung. Das schützt vor: ungewollter Drittnutzung, Lead-Diebstahl durch geklonte Seiten und API-Missbrauch. Globale Admin-Whitelists des Funnelforms-Teams können einzelne Domains zusätzlich generell zulassen — diese Domains funktionieren ohne explizite Owner-Zuweisung. Die Domain-Prüfung läuft mit einem Timeout von rund 8 Sekunden; reagiert die Validierung nicht, wird das Embed sicherheitshalber blockiert (Fail-Closed).
Best Practices
- Verwende für Tests eine Staging-Domain und weise sie zusätzlich zur Production-Domain zu – so brichst du keine Live-Einbettung beim Bearbeiten.
- Setze pro Seite nur den Embed-Typ ein, der zum Kontext passt – Popup + Widget gleichzeitig auf derselben Seite wirkt schnell aufdringlich.
- Prüfe nach jedem Embed-Setup die Vorschau rechts im Tab – sie spiegelt die Live-Auslieferung wider.
- Wenn du mehrere Formulare einbetten willst, kopiere den Embed-Code pro Formular neu – die Formular-ID steckt im Snippet und ist nicht austauschbar.
- Halte Embed-Snippets unverändert im Quelltext: Änderst du
data-form-idoder die Script-URL manuell, kann das Formular nicht mehr geladen werden.
Häufige Stolpersteine
"Form not available" oder leerer Bereich auf meiner Website? Drei Hauptursachen in dieser Reihenfolge prüfen: (1) Ist das Formular veröffentlicht? (2) Ist die einbettende Domain in der Whitelist? (3) Liegt der Script-Block tatsächlich im HTML der Seite (nicht nur in einem JavaScript-Comment)? Im Browser-DevTools-Netzwerk-Tab solltest du den Request an embed.js und das nachgeladene iFrame sehen.
Mehrere Inline-Formulare auf einer Seite – funktioniert das? Ja. Der Script-Block wird einmal eingebunden, danach können beliebig viele <div>-Container mit jeweils eigener data-form-id folgen.
Kann ich Embed-Einstellungen pro Formular unterschiedlich speichern? Ja. Width, Auto-Resize, Popup-Trigger, Widget-Position usw. werden pro Formular in der Datenbank gespeichert und beim Öffnen des Embed-Tabs wieder geladen.
Wo erstelle ich eine Custom-URL für den Direct Link? Im Tab Direct Link kannst du einen eigenen Slug vergeben (Format a-z, 0-9, -). Der Link wird dann zu deine-domain.tld/l/<dein-slug> statt der UUID.
Tipps für die Praxis
- Auto-Resize aktivieren beim Inline-Embed – das Formular wächst mit dem Inhalt und das iFrame unterdrückt eigene Scrollbalken (kein doppelter Scroll).
- Full-Width-Inline-Embed: Damit das Formular die volle Viewport-Breite einnimmt, muss der umgebende Container ohne
max-widthauskommen — sonst beschneidet der Container die Darstellung. - Widget-Farbe an die Marke anpassen statt das Default-Lila zu übernehmen – sorgt für ein integriertes Look-and-Feel.
- Popup-Verzögerung realistisch wählen: 5–15 Sekunden für Engagement-Popups, Scroll-Trigger bei 50–70 % für Content-Seiten.
- QR-Codes für den Direct Link generieren – ideal für Print, Messe, Visitenkarten.