Mit Vibe Coding kannst du Formulare komplett per Texteingabe erstellen lassen. Dabei kannst du der KI genau beschreiben, wie dein Formular aussehen und funktionieren soll.
Mögliche Anwendungsfälle:
Einfache Kontaktformulare
Mehrstufige Funnels
Terminanfragen
Angebotsanfragen
Bewerbungsformulare
Quiz- und Qualifizierungsfunnels
Formulare mit Bedingungen und Logiken
Formulare mit Dankeseite oder Abschlussseite
Alle Anfragen können automatisch an das Onepage CRM übergeben werden. Wichtig ist lediglich, dass du dies im Prompt erwähnst.
Empfehlenswert für jeden Formular-Prompt
Beschreibe möglichst genau:
Welche Felder enthalten sein sollen
Welche Felder Pflichtfelder sind
Ob das Formular mit dem Onepage CRM verbunden werden soll
Ob nach dem Absenden eine Dankeseite geöffnet werden soll oder ob stattdessen ein normaler Abschluss-/Finish-Step angezeigt werden soll
Welche Farben, Effekte oder Animationen gewünscht sind
Nach erfolgreicher Übermittlung werden die Leads automatisch im CRM gespeichert.
Tipp: Nicht alles muss in einen einzigen Prompt
Du musst nicht sämtliche Anforderungen direkt im ersten Prompt unterbringen. Oft ist es sogar sinnvoller, schrittweise vorzugehen. Beispielsweise kannst du zunächst nur die grundsätzliche Idee beschreiben. Zum Beispiel:
"Erstelle einen mehrstufigen Solar-Funnel zur Leadgenerierung."
Anschließend kannst du weitere Wünsche ergänzen:
"Verbinde das Formular mit dem Onepage CRM."
"Füge einen Finish-Step mit einer Dankesnachricht hinzu."
"Übernimm die Farben der Website und verwende moderne Animationen."
"Mache Vorname, Nachname und E-Mail zu Pflichtfeldern."
Durch dieses iterative Vorgehen erhältst du oft bessere Ergebnisse und kannst das Formular Schritt für Schritt an deine Vorstellungen anpassen.
Formular erstellen
Schritt 1: Seite öffnen
Öffne die gewünschte Seite im Editor.
Schritt 2: Vibe-Abschnitt hinzufügen
Klicke auf das Plus-Symbol, zum Beispiel zwischen zwei Abschnitten, und wähle anschließend "Vibe-Abschnitt - Mit KI erstellen" aus:
Schritt 3: Prompt eingeben
Beschreibe der KI möglichst genau, welches Formular du erstellen möchtest.
Beispiel: Einstufiges Kontaktformular
"Erstelle ein modernes Kontaktformular.
Felder:
- Vorname (Pflichtfeld)
- Nachname (Pflichtfeld)
- E-Mail (Pflichtfeld)
- Telefon
- Nachricht (Pflichtfeld)
Verbinde das Formular mit dem Onepage CRM. Zeige nach erfolgreichem Versand einen Finish-Screen mit der Nachricht: "Vielen Dank für deine Anfrage. Wir melden uns zeitnah bei dir". Übernimm die Farben, Schriftarten und den Designstil der bestehenden Seite, sodass sich das Formular nahtlos in das vorhandene Layout einfügt."
Die Pflichtfelder wurden automatisch berücksichtigt. Versucht ein Besucher das Formular abzusenden, ohne diese Felder auszufüllen, erscheint automatisch eine entsprechende Fehlermeldung.
Außerdem wurde der gewünschte Finish-Step nach erfolgreichem Absenden des Formulars erstellt. Das Ergebnis sieht folgendermaßen aus:
Beispiel: Mehrstufiger Funnel
"Erstelle ein modernes mehrstufiges Formular für eine kostenlose Photovoltaik-Beratung.
Schritt 1: Gebäudedaten
Überschrift: "Erzähle uns etwas über dein Gebäude"
Ist das Gebäude:
Einfamilienhaus
Mehrfamilienhaus
Gewerbeobjekt
Eigentümer oder Mieter?
Postleitzahl
Schritt 2: Energieverbrauch
Durchschnittlicher Jahresverbrauch:
Unter 3.000 kWh
3.000–5.000 kWh
5.000–10.000 kWh
Über 10.000 kWh
Besteht bereits eine Solaranlage?
Ja
Nein
Schritt 3: Wünsche & Ziele
Was ist dir wichtig?
Stromkosten senken
Unabhängigkeit vom Stromanbieter
Nachhaltigkeit
Speicherlösung
Interesse an Batteriespeicher?
Ja
Nein
Unsicher
Schritt 4: Kontaktdaten
Vorname (Pflichtfeld)
Nachname (Pflichtfeld)
E-Mail-Adresse (Pflichtfeld)
Telefonnummer (Pflichtfeld)
Schritt 5: Zusammenfassung
Zeige alle eingegebenen Daten übersichtlich an
Button: "Kostenlose Beratung anfordern"
Weitere Anforderungen:
Fortschrittsanzeige oben (z.B. Schritt 1 von 5)
Zurück- und Weiter-Buttons zwischen den Schritten
Validierung aller Pflichtfelder
Moderne Kartenoptik mit sanften Animationen beim Wechsel der Schritte
Voll responsive für Desktop und Mobilgeräte
Nach erfolgreichem Versand Weiterleitung auf eine externe Danke-Seite (URL wird von mir manuell eingetragen).
Formular mit dem Onepage CRM verknüpfen"
Alle Anforderungen wurden erfolgreich umgesetzt. In dem Beispiel musst du allerdings noch die Danke-URL hinterlegen. Das geht wie folgt:
Klicke auf das Vibe-Element und gehe, wie im Chat beschrieben, auf "Absenden & Weiterleitung". Dort kannst du anschließend deine gewünschte URL eintragen.
Das Formular würde dann live folgendermaßen aussehen und funktionieren:
Schritt 4: Überprüfung
Veröffentliche deine Seite und teste dein Formular anschließend selbst.
Fülle es einmal vollständig aus und prüfe dabei, ob alles wie erwartet funktioniert. Achte insbesondere darauf, ob Pflichtfelder korrekt validiert werden und ob der Versand erfolgreich ausgelöst wird.
Rufe anschließend dein CRM auf, dort solltest du deinen Test-Eintrag inklusive aller Formular-Daten sehen.
Änderungen nachträglich vornehmen
Du kannst Änderungen jetzt direkt im Editor über die Controls vornehmen. Klicke dafür einfach auf das Formular. Anschließend kannst du viele Einstellungen direkt bearbeiten:
Farben
Button-Texte
Texte in den einzelnen Schritten
Optionen in den jeweiligen Schritten (entfernen, hinzufügen oder anpassen)
Auch einzelne Formularfelder lassen sich nachträglich bearbeiten
Weitere Änderungen durch die KI durchführen lassen:
Alternativ kannst du jederzeit weitere Anpassungen per Prompt vornehmen.
Beispiel: Design-Änderung
"Verändere den Hintergrund zu einer modernen Solar-Landschaft mit animierten Lichtstrahlen, sanften Farbverläufen in Gelb und Orange sowie einem dezenten Energie-Partikel-Effekt im Hintergrund."
Beispiel: Controls hinzufügen
"Füge weitere Controls hinzu: Ich möchte die Abstände (Padding) selbst einstellen können."
Oder:
"Füge weitere Controls hinzu: Ich hätte gerne die Möglichkeit, bei jedem Feld individuell festzulegen, ob es sich um ein Pflichtfeld handelt oder nicht."
Du kannst die KI jederzeit bitten, weitere Felder, Logiken, Animationen, Controls oder Designanpassungen hinzuzufügen.
Logiken und Bedingungen einbauen
Du kannst die KI auch anweisen, bestimmte Bedingungen oder Logiken in dein Formular einzubauen. Dadurch lassen sich sehr individuelle und intelligente Funnels erstellen.
Beispiel: Eingrenzung nach Region
"Lasse nur Interessenten aus Hamburg zu. Erlaube folgende Postleitzahlbereiche:
20095 bis 20539
21029 bis 21149
22041 bis 22769
Prüfe dabei die eingegebene Postleitzahl. Wenn die Postleitzahl nicht mit den erlaubten Bereichen übereinstimmt, leite den Nutzer zu einem separaten Finish-Step weiter mit der folgenden Meldung: 'Leider bieten wir unsere Leistungen aktuell nur innerhalb Hamburgs an.'"
So würde es dann aussehen, wenn man eine Postleitzahl eingibt, die außerhalb der Postleitzahlbereiche liegt:
Es wird also direkt erkannt und man wird auf einen separaten Schritt weitergeleitet. Bei einer Postleitzahl innerhalb der Postleitzahlbereiche kann das Formular ganz normal weiter ausgefüllt werden.
Auch bei Logiken kannst du Controls hinzufügen lassen, um diese flexibel selbst zu definieren. So lässt sich zum Beispiel eine Prüfung wie bei Postleitzahlen über die Controls abbilden, ohne dass die Logik fest im Code hinterlegt ist.
Du kannst damit selbst steuern, welche Bedingungen gelten sollen und wie das Formular im jeweiligen Fall reagieren soll.
Beispiel: Zusatzprompt
"Hinterlege die Formular-Logik als Control, sodass ich die Bedingungen selbst definieren kann, zum Beispiel wie bei der Postleitzahlprüfung."
Das kannst du dann bei allen beliebigen Feldern hinterlegen lassen.
So lassen sich sehr individuelle Funnels mit intelligenten Abläufen erstellen.
📌 Hinweis: Manchmal benötigt die KI mehrere Anläufe, um das gewünschte Ergebnis zu erzielen. Das ist völlig normal. Versuche daher, deine Anforderungen möglichst klar, präzise und detailliert zu beschreiben.
Weitere Beispiele
Beispiel 1: Interaktiver Test mit Auswertung
Erstelle ein interaktives Formular, bei dem Nutzer mehrere Fragen beantworten und anschließend eine persönliche Auswertung erhalten.
Perfekt für:
Coaching Funnels
Leadgenerierung
Persönlichkeitstests
Gesundheits-/Fitness-Angebote
Beratungsangebote
Was sollte rein?
Ziel des Formulars: Was soll das Formular erreichen? Wie viele Schritte oder Fragen soll es enthalten? Welche Informationen soll der Nutzer am Ende erhalten?
Designwünsche: Welcher Stil wird gewünscht? Welche Farben, Animationen oder Effekte sollen verwendet werden? Soll es eher modern, verspielt, hochwertig oder minimalistisch wirken?
Struktur: Welche Bereiche soll das Formular enthalten? Wie soll der Nutzer durch die einzelnen Schritte geführt werden? Soll es einen Fortschrittsbalken, Zwischenschritte oder Animationen geben?
Ergebnis / Auswertung: Was soll nach Abschluss passieren? Soll eine Bewertung, Punktzahl, Empfehlung oder ein Call-to-Action angezeigt werden? Welche nächsten Schritte soll der Nutzer durchführen können?
Beispielprompt für einen psychologischen Test:
"Erstelle ein modernes interaktives Quiz-Formular für einen psychologischen Persönlichkeitstest.
Ziel: Der Nutzer beantwortet 10 Fragen über sein aktuelles Wohlbefinden und erhält am Ende eine individuelle Auswertung mit Punktzahl.
Design:
- Premium SaaS Look
- dunkler Hintergrund mit blau/violetten Farbverläufen
- moderne Glas-Effekt-Karten (Glassmorphism)
- weiche Schatten
- abgerundete Ecken
- animierte Übergänge zwischen den Fragen
- Fortschrittsbalken oben
- dezente Partikelanimation im Hintergrund
- emotionale aber professionelle Atmosphäre
Struktur:
- Hero-Bereich mit Titel: "Wie geht es dir wirklich?"
- Untertitel: "Beantworte 10 Fragen und erhalte deine persönliche Auswertung."
- Button: "Test starten"
- Zeige anschließend einzelne Fragen nacheinander.
Jede Frage:
- große Überschrift
- 4 Antwortkarten
- Auswahl Animation
- automatische Speicherung der Antworten
- Weiter Button
Fragen:
1. Wie fühlst du dich aktuell?
2. Wie häufig fühlst du dich gestresst?
3. Wie gut schläfst du?
4. Wie zufrieden bist du mit deinem Alltag?
5. Wie viel Energie hast du?
6. Wie gehst du mit Herausforderungen um?
7. Wie oft nimmst du dir Zeit für dich?
8. Wie positiv blickst du in die Zukunft?
9. Wie verbunden fühlst du dich mit anderen?
10. Wie glücklich fühlst du dich aktuell?
Auswertung: Berechne eine Punktzahl.
Zeige danach:
- Ergebnis Score
- Fortschritts-Kreis Animation
- persönliche Interpretation
- passende Empfehlung
- Call-to-Action Button
Füge moderne Micro-Animationen hinzu. Das Ergebnis soll wie eine professionelle Coaching-App wirken."
Ergebnis:
Du kannst das erstellte Formular unter diesem Link testen.
Beispiel 2: Formular mit Tabs
Erstelle ein modernes Formular mit mehreren Tabs, bei dem Nutzer Schritt für Schritt durch verschiedene Bereiche geführt werden. Durch die Tab-Struktur bleiben auch umfangreiche Formulare übersichtlich und einfach bedienbar.
Perfekt geeignet für:
Reisebuchungen
Angebotsanfragen
Bewerbungsprozesse
Produktkonfiguratoren
Kunden-Onboarding
umfangreiche Kontaktformulare
Was sollte rein?
Ziel des Formulars: Was soll der Nutzer über das Formular erledigen? Welche Informationen müssen abgefragt werden? Wie viele Tabs oder Schritte werden benötigt?
Struktur der Tabs: Welche Bereiche sollen eigene Tabs erhalten? In welcher Reihenfolge soll der Nutzer durch das Formular geführt werden? Soll der Nutzer jederzeit zwischen Tabs wechseln können?
Designwünsche: Welcher Look wird gewünscht? Farben, Icons, Animationen und Abstände. Soll das Formular eher modern, hochwertig oder minimalistisch wirken?
Funktionen: Pflichtfelder und optionale Felder, Fortschrittsanzeige, automatische Validierung, Zwischenspeicherung der Eingaben, Zusammenfassung vor dem Absenden
Abschluss / Ergebnis: Was passiert nach dem Absenden? Soll eine Bestätigung angezeigt werden? Soll das Formular mit dem CRM verbunden werden?
Beispielprompt für ein Reisebuchungsformular:
"Erstelle ein modernes Reisebuchungsformular als interaktive Funnel Experience.
Ziel: Der Nutzer soll eine Reise auswählen, konfigurieren und anschließend eine Zusammenfassung erhalten.
Design:
- Premium Reiseportal Design
- große immersive Hintergrundbilder
- moderne Karten
- elegante Animationen
- hochwertiger Look wie eine Luxus-Reiseplattform
- Glasmorphismus-Elemente
- weiche Übergänge
- responsive für Mobile
Aufbau:
Start: Hero Section: "Finde deine perfekte Reise"
Darunter Tabs:
- Spanien
- Griechenland
- Italien
Tab Verhalten: Beim Wechsel der Destination:
- ändere Hintergrundbild mit Smooth Fade Animation
- aktualisiere Reiseangebote
- zeige passende Beschreibung
Spanien:
Bild: Mallorca Strand
Titel: "Mediterrane Auszeit in Spanien"
Preis: ab 699€
Griechenland:
Bild: Santorini Sonnenuntergang
Titel: "Inseltraum Griechenland"
Preis: ab 899€
Italien:
Bild: Amalfiküste
Titel: "Italien entdecken"
Preis: ab 799€
Danach folgende Formularschritte:
1. Reiseziel
2. Reisedatum
3. Anzahl Personen
4. Unterkunftsauswahl
5. Zusammenfassung
Baue ein:
- Fortschrittsanzeige
- animierte Übergänge
- Hover-Effekte
- interaktive Auswahlkarten
- moderne Buttons
- Preisaktualisierung in Echtzeit
Das Formular soll mit dem Onepage CRM verknüpft werden. Die gesamte Erfahrung soll aussehen wie eine Premium-Buchungsplattform."
Ergebnis:
Du kannst das erstellte Formular unter diesem Link testen.
📌 Hinweis: Du kannst auch hier im Anschluss weitere Änderungen über die Controls vornehmen oder der KI zusätzliche Änderungswünsche mitteilen.
Häufig gestellte Fragen (FAQ)
Wie kann ich das Formular umbenennen?
Wie kann ich das Formular umbenennen?
Du kannst der KI einfach sagen, dass das Formular im CRM unter dem gewünschten Namen gespeichert werden soll. Dann wird es entsprechend übernommen. Voraussetzung ist jedoch, dass du der KI zuvor mitgeteilt hast, dass das Formular mit dem CRM verbunden werden soll.
Zum Beispiel:
"Das Formular soll im CRM unter XY gespeichert werden."
Kann ich weiterhin Listen erstellen und sortieren?
Kann ich weiterhin Listen erstellen und sortieren?
Ja, das ist weiterhin möglich. Wie genau das funktioniert, kannst du im folgenden Artikel nachlesen: Onepage-CRM: Leads verwalten, Listen anlegen, Integration nutzen
💡Du hast Feedback zu diesem Hilfe-Artikel? Teile es gerne mit uns über den Live-Chat oder an support@onepage.io, damit wir ihn auf dem neuesten Stand halten können. 🙂