Formular auf anderen Websites anzeigen

Mit dem Einbettungscode zeigst du ein Formular deiner WordPress-Website auf einer anderen Website, zum Beispiel auf einer Shop-Seite, einer Landingpage aus einem Baukasten oder einer Website ohne WordPress. Das Formular lädt dabei von deiner WordPress-Website, und die Einträge kommen wie gewohnt bei dir an. Einbettungscodes, die du schon mit Funnelforms 3 auf anderen Websites eingefügt hast, laufen weiter. In den Einstellungen legst du fest, welche Websites deine Formulare anzeigen dürfen.

Voraussetzungen

Funnelforms Pro. In Funnelforms Free ist diese Funktion nicht enthalten. Dort trägt Andere Website im Bereich Einbetten ein Pro-Abzeichen und zeigt nur, was Funnelforms Pro dafür bietet.
Das Formular ist veröffentlicht und läuft mit Funnelforms 5.
Du darfst Formulare bearbeiten (Recht „Formulare bearbeiten“), um den Einbettungscode im Builder zu kopieren.
Du darfst die Einstellungen ändern (Recht „Einstellungen ändern“), um die Liste der erlaubten Websites zu bearbeiten.
Auf der anderen Website kannst du HTML einfügen, zum Beispiel mit einem HTML- oder Code-Block.

Wo finde ich die Funktion?

Einbettungscode: Funnelforms → Formulare → Formular öffnen → oben Einbetten → Andere Website.
Liste der erlaubten Websites: Funnelforms → Einstellungen → Schnittstellen, Karte Formulare auf anderen Websites.
Ob eine Liste gilt: Werkzeuge → Website-Zustand → Bericht, Abschnitt von Funnelforms, Zeile „Websites, die Formulare einbetten dürfen“.

Funktionen im Überblick

Einbettungscode für jedes Formular, das mit Funnelforms 5 läuft, auch für Formulare, die aus Funnelforms 3 übernommen wurden.
Breite und Höhe des Rahmens, in dem das Formular erscheint.
Automatische Höhenanpassung: Der Rahmen wächst und schrumpft mit jedem Schritt des Formulars.
Eine Vorschau neben dem Code zeigt, wo und wie groß das Formular erscheint.
Eine Liste legt fest, welche Websites Formulare anzeigen dürfen. Subdomains sind eingeschlossen. Bleibt die Liste leer, darf jede Website Formulare anzeigen.
Bestehende Einbettungscodes aus Funnelforms 3 zeigen weiter dein Formular, ohne dass du auf der anderen Website etwas änderst.

Schritt-für-Schritt-Anleitung

Einbettungscode holen und einfügen

Öffne das Formular im Builder und veröffentliche es, falls noch nicht geschehen.
Klicke oben auf Einbetten und wähle links Andere Website.
Trage bei Bedarf die Breite ein, zum Beispiel 100%, und die Höhe, zum Beispiel 600px.
Lass Automatische Höhenanpassung eingeschaltet, damit der Rahmen jedem Schritt folgt. Die Höhe gilt dann nur für den Start.
Klicke beim Einbettungscode auf Kopieren.
Füge den Code im HTML der anderen Website dort ein, wo das Formular erscheinen soll, zum Beispiel in einem HTML- oder Code-Block.
Veröffentliche die Seite auf der anderen Website und prüfe das Formular dort.

Websites festlegen

Öffne Funnelforms → Einstellungen → Schnittstellen. Aus dem Builder kommst du mit Liste ändern dorthin, sobald eine Liste besteht.
Gehe zur Karte Formulare auf anderen Websites.
Trage im Feld Websites, die Formulare einbetten dürfen jede erlaubte Website in eine eigene Zeile ein, zum Beispiel example.com.
Klicke auf Speichern.
Prüfe die Einbettung auf der anderen Website, auch auf einer erlaubten Subdomain.

Erklärungen

Wie funktioniert der Einbettungscode?

Der Code besteht aus einem Platzhalter und einem kleinen Skript von deiner Website. Das Skript setzt an die Stelle des Platzhalters einen Rahmen, der die eigene Seite des Formulars von deiner WordPress-Website zeigt, ohne Hintergrund und ohne Abstand. Mit Automatische Höhenanpassung meldet das Formular dem Rahmen seine Höhe bei jedem Schritt. Sonst behält der Rahmen seine Höhe, und längere Schritte scrollen darin. Aus der Website um den Rahmen liest das Skript nichts, und aus dem Rahmen kommt nur die Höhe heraus. Mehrere Formulare auf einer Seite sind möglich: Füge für jedes seinen Code ein.

Welche Werte sind für Breite und Höhe erlaubt?

Die Breite nimmt eine Zahl mit %, px, rem oder vw, die Höhe eine Zahl mit px, %, rem oder vh. Eine Zahl ohne Einheit zählt als Pixel. Ein ungültiger Wert zeigt einen Hinweis unter dem Feld, und der Code nimmt dann den Standard: 100 % Breite und 600 Pixel Höhe. Breiter als die Spalte der anderen Website wird der Rahmen nie.

Was passiert, wenn die Liste Websites enthält?

Der Rahmen darf dann nur auf deiner eigenen Website und auf den gelisteten Websites mit ihren Subdomains erscheinen. Andere Websites zeigen statt des Formulars einen leeren oder vom Browser blockierten Rahmen. Unter dem Einbettungscode im Builder steht dann „Nur diese Websites dürfen deine Formulare zeigen: …“.

Wie darf ich die Websites eintragen?

Du kannst die Adresse mit oder ohne https:// und mit Pfad eintragen, Funnelforms nimmt daraus nur den Namen der Website. Ein vorangestelltes *. wird entfernt. Einträge, die keine gültige Website ergeben, werden beim Speichern verworfen, doppelte Einträge auch. Deine eigene Website ist immer erlaubt, mit und ohne „www“.

Was ist mit Einbettungscodes aus Funnelforms 3?

Einbettungscodes, die du in Funnelforms 3 über Externer Einbettungscode erzeugt hast, laufen weiter und zeigen dein Formular in der neuen Darstellung. Das gilt auch, wenn deine Website den Programmteil von Funnelforms 3 nicht mehr lädt, weil alle Formulare mit Funnelforms 5 laufen. Funnelforms 5 beantwortet die Abrufe dieser Codes dann selbst. Die Liste der erlaubten Websites gilt auch für sie. Für neue Einbettungen nimm den Einbettungscode aus dem Bereich Einbetten.

Wie sicher ist die Beschränkung?

Für den neuen Einbettungscode sagt deine Website dem Browser, auf welchen Websites der Rahmen erscheinen darf. Für alte Einbettungscodes aus Funnelforms 3 stützt sich die Prüfung auf die Herkunftsangabe des Browsers. Beides verhindert, dass fremde Websites dein Formular anzeigen. Skripte außerhalb eines Browsers hält es nicht auf.

Was passiert in Funnelforms Free?

Funnelforms Free hat weder Andere Website noch die Karte Formulare auf anderen Websites. Im Bereich Einbetten steht Andere Website mit Pro-Abzeichen und einer Liste der Möglichkeiten in Funnelforms Pro. Einbettungscodes aus Funnelforms 3 zeigen in Free kein Formular. Zeige das Formular stattdessen auf deiner eigenen Website oder über seine eigene Seite.

Best Practices

Lass Automatische Höhenanpassung eingeschaltet. So entstehen keine Scrollbalken im Formular.
Trage die Websites ein, auf denen deine Formulare erscheinen sollen, sobald du den Einbettungscode nutzt.
Ersetze alte Einbettungscodes aus Funnelforms 3 bei Gelegenheit durch den neuen Code.
Teste die Einbettung nach jeder Änderung der Liste auf der anderen Website.

Troubleshooting

Problem	Ursache	Lösung
Im Builder steht „Dieses Formular läuft noch mit Funnelforms 3. Der Einbettungscode zeigt es, sobald es den neuen Renderer nutzt.“	Das Formular wird noch mit Funnelforms 3 ausgeliefert	Prüfe auf der Seite Funnelforms → Umzug, warum das Formular noch nicht mit Funnelforms 5 läuft
Im Builder steht „Das Formular ist noch nicht veröffentlicht. …“	Das Formular wurde noch nie veröffentlicht	Klicke auf Veröffentlichen
Im Rahmen steht „Formular nicht gefunden“	Das Formular ist nicht veröffentlicht, läuft noch mit Funnelforms 3, oder der Code gehört zu einem gelöschten Formular	Veröffentliche das Formular und kopiere den Code neu aus Einbetten → Andere Website
Auf der anderen Website erscheint kein Formular, der Rahmen bleibt leer	Die Website steht nicht in der Liste, oder die Liste enthält eine falsche Schreibweise	Trage die Website unter Formulare auf anderen Websites ein und speichere
Der Rahmen ist abgeschnitten oder hat einen Scrollbalken	Automatische Höhenanpassung ist aus, oder die Höhe ist zu klein	Schalte Automatische Höhenanpassung ein, kopiere den Code neu und ersetze ihn auf der anderen Website
Unter Breite oder Höhe steht „Eine Zahl mit …“	Der Wert hat keine erlaubte Einheit	Trage zum Beispiel `100%` oder `600px` ein
„Der Einbettungscode für andere Websites ist auf dieser Website nicht verfügbar.“	Der Programmteil für die Einbettung fehlt in dieser Kopie des Plugins	Installiere Funnelforms Pro neu aus der ZIP-Datei deines Kontos
Ein alter Einbettungscode zeigt kein Formular	Die Website steht nicht in der Liste, oder das Formular ist nicht veröffentlicht	Prüfe Liste und Formular. Ersetze den Code am besten durch den neuen Einbettungscode
Ein Datei-Upload funktioniert mit einem alten Einbettungscode nicht	Mit dem Einbettungscode von Funnelforms 3 ist der Fragetyp „Datei-Upload“ aus Sicherheitsgründen nicht möglich	Nutze den neuen Einbettungscode, der die eigene Seite des Formulars zeigt
Das Captcha erscheint mit einem alten Einbettungscode nicht	Der Schlüssel des Captcha-Anbieters erlaubt die andere Website nicht	Erlaube die Website im Konto des Captcha-Anbieters, oder nutze den neuen Einbettungscode
Eine Subdomain wird nicht erkannt	Die Hauptdomain fehlt in der Liste	Trage die Hauptdomain ein, zum Beispiel `example.com`; Subdomains sind eingeschlossen

Tipps

Der Rahmen zeigt die eigene Seite des Formulars. Darum laden darin dieselben Skripte und Einwilligungs-Tools deiner Website wie auf dieser Seite.
Änderungen am Formular erscheinen nach dem Veröffentlichen auch auf der anderen Website. Den Code musst du dafür nicht neu einfügen.

FAQ

Muss ich den Einbettungscode aus Funnelforms 3 auf der anderen Website ändern? Nein. Er zeigt das Formular weiter, jetzt mit der neuen Darstellung, auch wenn deine Website Funnelforms 3 nicht mehr lädt.

Kann ich Formulare aus dem neuen Builder auf anderen Websites einbetten? Ja. Kopiere den Code unter Einbetten → Andere Website.

Gilt die Liste auch für Subdomains? Ja. Trägst du example.com ein, darf auch shop.example.com das Formular zeigen.

Was passiert, wenn ich die Liste leer lasse? Jede Website darf deine Formulare anzeigen, wie in Funnelforms 3.