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.
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.
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. 🙂