AI Studio: Formular auf Landingpage im AI-Studio hinterlegen

Erstellt von Bianca Kurras, Geändert am Do, 30 Apr um 5:06 NACHMITTAGS von Bianca Kurras

Formular erstellen und in die Landingpage einbetten

Zweck

Damit Besucher deiner Landingpage ihre Kontaktdaten eintragen können, brauchst du ein Formular – eingebettet als Pop-up, das sich beim Klick auf einen Button öffnet. Diese SOP zeigt dir, wie du ein Formular in Funnelspot anlegst, individualisierst und per Embed-Code ins AI Studio einbettest.

Zielgruppe

Funnelspot-Nutzer mit einer fertig generierten Landingpage im AI Studio
Technischer Kenntnisstand: Einsteiger / Mittel

Voraussetzungen

Fertige Landingpage im AI Studio (Haupt- und Dankeseite vorhanden)
Veröffentlichte URL der Dankeseite (für die Weiterleitung – wird am Ende benötigt)

Prozessüberblick

Formular-Vorlage in Funnelspot duplizieren
Formular individualisieren
Embed-Code kopieren
Pop-up-Formular im AI Studio einbetten
Weiterleitung zur Dankeseite im Formular hinterlegen

Schritt 1: Formular-Vorlage duplizieren

Gehe in der linken Seitenleiste auf Funnel → Forms.
Wähle eine passende Vorlage (z. B. Webinar-Template oder Leadmagnet-Template).
Klicke auf das Duplicate-Symbol neben der Vorlage.
Vergib einen eindeutigen Namen – z. B. den Namen deines Webinars oder Leadmagnets.
Öffne das duplizierte Formular per Klick.

Wichtig: Immer eine bestehende Vorlage duplizieren – nie direkt in der Originalvorlage arbeiten.

Schritt 2: Formular individualisieren

Prüfe die vorhandenen Felder (Standard: Vorname, E-Mail-Adresse) – passe sie bei Bedarf an.
Klicke auf den Button im Formular, dann auf das Zahnrad-Symbol, um die Button-Einstellungen zu öffnen.
Passe unter Background & Colors die Buttonfarbe mit deinem Hex-Farbcode an.
Gehe auf Content und ändere den Button-Text, z. B. „Jetzt kostenlos anmelden" oder „Kostenlos beitreten".
Ergänze optional eine Headline oberhalb des Formulars, z. B. „Klick hier und sei beim Live-Event dabei."
Passe Schriftgröße und Ausrichtung der Headline an (z. B. zentriert, kleinere Schriftgröße).

Wichtig: Das Formular hat zwei Ansichten – Desktop und Mobil. Passe beide Ansichten separat an, damit das Formular auf allen Geräten sauber aussieht.

Schritt 3: Embed-Code kopieren

Klicke oben rechts auf Speichern.
Prüfe das Formular optional über Vorschau.
Klicke oben auf Integrate.
Wähle Inline als Einbettungsmethode.
Klicke auf Copy Embed Code – der Code wird in deine Zwischenablage kopiert.

Schritt 4: Pop-up-Formular im AI Studio einbetten

Wechsle zurück ins AI Studio und öffne deine Landingpage.
Gib im Ask AI-Chat folgende Anweisung ein:

Bitte implementiere ein Pop-up-Fenster, das erscheint, wenn jemand auf einen Button klickt. In diesem Pop-up-Fenster soll folgendes Formular hinterlegt sein: 
[Embed-Code hier einfügen]

Füge den kopierten Embed-Code direkt in die Anweisung ein.
Schicke die Anweisung ab und warte die Umsetzung ab.

Teste nach der Generierung, ob das Pop-up beim Klick auf den Button erscheint.

Wichtig: Ein Kontakt, der das Formular abschickt, landet direkt im CRM (Kontakte). Die Weiterleitung zur Dankeseite muss jedoch separat im Formular hinterlegt werden – siehe Schritt 5.

Schritt 5: Weiterleitung zur Dankeseite hinterlegen

⚠️ Hinweis: Dieser Schritt kann erst ausgeführt werden, wenn die Dankeseite veröffentlicht wurde und eine öffentliche URL hat.

Rufe die veröffentlichte URL deiner Dankeseite ab (oben in der Browserleiste, wenn die Seite in der Vorschau/Veröffentlichung geöffnet ist).
Gehe zurück zu Funnel → Forms und öffne das Formular, das du eingebettet hast.
Klicke auf Settings.
Trage unter Redirect to URL die URL deiner Dankeseite ein.
Klicke auf Speichern.

Wichtig: Funnelspot leitet nach dem Absenden nicht automatisch weiter. Die Redirect-URL muss manuell hinterlegt werden – sonst bleibt der Nutzer nach dem Absenden auf der Seite ohne Rückmeldung.

Häufige Fehler & Lösungen

Problem	Ursache	Lösung
Pop-up öffnet sich nicht beim Button-Klick	Embed-Code nicht korrekt übergeben	Anweisung im AI Studio wiederholen, Code komplett einfügen
Nach Formular-Absenden passiert nichts	Redirect-URL fehlt oder nicht gespeichert	Formular → Settings → Redirect to URL eintragen und speichern
Weiterleitung funktioniert in der Vorschau nicht	Vorschau-URL statt veröffentlichter URL hinterlegt	Erst Seite veröffentlichen, dann die echte URL hinterlegen
Formular-Design stimmt nicht mit Branding überein	Farben/Button noch nicht angepasst	Im Formular-Editor Button-Farbe per Hex-Code einstellen

Ergebnis-Check

Formular ist als Duplikat angelegt und sinnvoll benannt
Buttonfarbe und -text entsprechen dem Branding
Formular ist auf Desktop und Mobil korrekt dargestellt
Pop-up öffnet sich beim Klick auf den Landingpage-Button
Kontaktdaten landen nach dem Absenden im CRM
Redirect-URL zur Dankeseite ist hinterlegt und gespeichert

Best Practices

Formular immer aus einer bestehenden Vorlage duplizieren – nie die Originalvorlage bearbeiten
Formular nach dem Angebot benennen, nicht generisch (z. B. „Webinar-Mai-2026" statt „Formular 1")
Redirect-URL erst hinterlegen, wenn die Dankeseite veröffentlicht ist – Preview-URLs funktionieren nicht zuverlässig
Desktop- und Mobilansicht im Formular-Editor immer separat prüfen und anpassen

Ergebnis

Deine Landingpage hat jetzt ein funktionierendes Pop-up-Formular. Besucher können ihre Kontaktdaten eintragen, landen automatisch im CRM und werden nach dem Absenden auf deine Dankeseite weitergeleitet. Im nächsten Schritt wird die Seite veröffentlicht.