Mal ehrlich: Formulare sind tückisch. Sie sehen simpel aus. Ein paar Eingabefelder, ein Button, vielleicht ein Label. Was soll da schon schiefgehen?
Alles. Buchstäblich alles.
Ich habe Entwickler stundenlang dabei zugesehen, wie sie mit Validierungslogik, Barrierefreiheitsanforderungen und dem einen Spezialfall kämpfen, bei dem Nutzer ihre Telefonnummer mit Klammern einfügen. Und das Ding ist – KI kann das meiste davon elegant lösen, wenn du weißt, wie du fragen musst.
Dieser Guide gibt dir 35+ KI-Formular-Prompts, die sofort mit Tools wie Mit Fardino bauen →, v0, Lovable oder jedem React-fokussierten KI-Generator funktionieren. Das hier sind keine theoretischen Templates. Es sind praxisbewährte Prompts, die Formulare erzeugen, die echte Nutzer tatsächlich verwenden können.
Warum KI-generierte Formulare meist enttäuschen (und wie du das änderst)
Was dir niemand über das Generieren von Formularen mit KI sagt: Die Standard-Ausgabe ist fast immer unvollständig.
Bitte um „ein Kontaktformular" und du bekommst drei Inputs und einen Submit-Button. Keine Validierung. Keine Fehlerzustände. Kein Ladeindikator. Keine Accessibility-Attribute. Sieht im Screenshot gut aus und bricht zusammen, sobald ein echter Nutzer es anfasst.
Die Lösung? Präzision. Je mehr Kontext du der KI über Validierungsregeln, Fehlerbehandlung und Randfälle gibst, desto besser werden deine Formulare. Das ist das Kernprinzip hinter allen Prompts unten.
Falls du es noch nicht gelesen hast: Unser Guide zum Context Engineering für KI-Coding erklärt, warum dieser Ansatz so gut funktioniert.
Einfache Kontakt- und Newsletter-Formulare
Fangen wir mit den Basics an. Diese Prompts erzeugen die Formulare, die jede Website braucht.
Einfaches Kontaktformular
Create a contact form with name, email, and message fields. Include: - Required field validation with inline error messages - Email format validation - Character limit (500) on message with counter - Loading state on submit button - Success toast notification - Use React Hook Form with Tailwind CSS styling - Accessible labels and ARIA attributes
Newsletter-Anmeldung (einzelnes Feld)
Build a minimal newsletter signup form with just an email input and subscribe button. Include: - Inline email validation - Loading spinner in button during submission - Success state that replaces the form with "Thanks for subscribing!" - Error state for invalid emails - Placeholder text: "Enter your email" - Horizontal layout on desktop, stacked on mobile
Kontaktformular mit Betreff-Dropdown
Create a contact form with name, email, subject dropdown, and message textarea. Requirements: - Subject options: General Inquiry, Technical Support, Sales, Partnership - All fields required with validation - Email format checking - Auto-resize textarea - Submit button disabled until form is valid - Shadcn/ui components with Tailwind styling
Selbst ausprobieren?
Try this prompt⌘+Enterto launch
Newsletter mit Name
Build a newsletter form with first name and email fields side by side. Include: - Subtle placeholder animations - Validation on blur - Compact design suitable for footer placement - Success animation (checkmark) on submit - GDPR checkbox with link to privacy policy
Hinweis für den DACH-Raum: Die DSGVO schreibt vor, dass der Consent für Marketing-E-Mails explizit, freiwillig und dokumentiert erfolgen muss. Die Checkbox im Prompt oben ist kein Nice-to-have – sie ist Pflicht. Ergänze im Prompt ruhig: „DSGVO-konforme Checkbox mit separatem Consent-Text und Link zur Datenschutzerklärung", um einen Text zu erhalten, der deinem Rechtsbeistand gefällt.
Feedback-Formular mit Bewertung
Create a feedback form with 5-star rating component, optional comment textarea, and submit button. Include: - Clickable/hoverable star icons - Rating is required, comment is optional - Thank you message after submission - Character limit on comment (300 chars) - Clean, minimal design
Login- und Authentifizierungsformulare
Auth-Formulare haben eine Menge zu leisten: Sicherheitshinweise, Passwort-Anzeige, Passwort-vergessen-Flows, Social-Logins. So bringst du die KI dazu, sie sauber zu generieren.
Einfaches Login-Formular
Create a login form with email and password fields. Include: - Email validation - Password field with show/hide toggle - "Remember me" checkbox - "Forgot password?" link - Submit button with loading state - Error message area for failed login attempts - Divider with "or" text - Social login buttons (Google, GitHub)
Login mit Fehlerbehandlung
Build a login form that handles these states: - Empty field validation (both fields required) - Invalid email format error - Generic "Invalid credentials" error on submit - Too many attempts lockout message - Password visibility toggle - Loading spinner during authentication - Redirect hint text: "New here? Create an account"
Magic-Link-Login
Create a magic link / passwordless login form. Include: - Email input only - "Send magic link" button - Success state: "Check your email for the login link" - Resend link option with cooldown timer (60 seconds) - Subtle animation on state transitions - Explanation text about magic links
Das ist genau die Art von Prompt, der von den Vibe-Coding-Best-Practices profitiert, die wir bereits behandelt haben – alle möglichen Zustände des Formulars explizit zu benennen.
Zwei-Faktor-Authentifizierung (2FA-Eingabe)
Build a 2FA code input component with 6 separate digit boxes. Include: - Auto-advance to next box on input - Backspace moves to previous box - Paste support (distributes digits across boxes) - Auto-submit when all 6 digits entered - Error shake animation for invalid codes - Resend code link with countdown timer - "Code expires in X:XX" display
Passwort-Zurücksetzen-Formular
Create a password reset form with two password fields. Include: - New password and confirm password inputs - Password strength indicator (weak/medium/strong) - Requirements checklist: 8+ chars, uppercase, number, special char - Match validation between both fields - Show/hide toggle for both fields - Submit disabled until requirements met
Registrierungs- und Signup-Formulare
Registrierungsformulare müssen die Balance finden zwischen ausreichend Daten sammeln und Nutzer nicht zu verschrecken. Diese Prompts helfen dir, genau das hinzukriegen.
Einfaches Signup-Formular
Create a signup form with name, email, and password fields. Include: - Name split into first/last (optional) - Email validation with "already exists" error state - Password with strength meter - Terms & conditions checkbox (required) - Submit button with loading state - "Already have an account? Sign in" link
Signup mit Profilbild
Build a registration form with avatar upload. Include: - Circular image upload area with camera icon - Drag-and-drop support - Image preview after selection - File size limit (2MB) with error message - Crop/zoom modal for uploaded image - Name and email fields below avatar - Skip option for avatar
Umfangreiche Registrierung
Create a comprehensive registration form with: - Full name - Email with availability check - Phone number with country code selector - Password with confirmation - Date of birth (dropdown selectors) - Gender (optional, radio buttons) - Country/Region dropdown - Terms checkbox - Progress indicator at top - Field-level validation messages
| Formular-Element | Warum es sinnvoll ist |
|---|---|
| Telefon mit Ländervorwahl | Internationale Nutzer, SMS-Verifikation |
| Geburtsdatum als Dropdown | Zugänglicher als ein Datepicker |
| Fortschrittsanzeige | Setzt Erwartungen, reduziert Abbrüche |
| Feldgenaue Validierung | Direktes Feedback verbessert die Ausfüllrate |
Social-Signup-Option
Build a signup page with social auth options prominently displayed. Include: - "Continue with Google" button (full width) - "Continue with GitHub" button - "Continue with Apple" button - Divider with "or sign up with email" - Compact email/password form below - Terms text: "By continuing, you agree to our Terms and Privacy Policy"
Wartelisten-Signup
Create a waitlist signup form with: - Email field only - "Join the waitlist" CTA button - Current waitlist count display: "Join 2,847 others" - Success state: "You're #2,848 on the list!" - Social share buttons after signup - Referral link generation hint
Mehrstufige Formulare und Wizards
Mehrstufige Formulare sind der Punkt, an dem KI-Ausgaben am häufigsten scheitern. Der Schlüssel liegt darin, den Inhalt jedes Schritts und das Navigationsverhalten explizit vorzugeben.
Drei-Schritt-Onboarding-Wizard
Create a 3-step onboarding wizard form: Step 1 - Personal Info: - Full name, email, phone - Avatar upload (optional) Step 2 - Preferences: - Industry dropdown - Company size radio buttons - Primary use case checkboxes Step 3 - Setup: - Username selection with availability check - Notification preferences toggles Include: - Progress bar at top (Step 1 of 3) - Previous/Next buttons - Form data persists between steps - Final "Complete Setup" button - Validation before allowing next step
Selbst ausprobieren?
Try this prompt⌘+Enterto launch
Umfrage- / Quiz-Formular
Build a multi-step survey form with 5 questions: 1. Single choice (radio) - "How did you hear about us?" 2. Multiple choice (checkboxes) - "What features interest you?" 3. Rating scale 1-10 - "How likely to recommend?" 4. Open text - "Any additional feedback?" 5. Email capture - "Get results sent to your email" Include: - One question per screen - Progress dots indicator - Skip option on optional questions - Animated transitions between steps - Summary review screen before submit
Bedingtes mehrstufiges Formular
Create a form wizard where steps change based on answers: - Question 1: "Are you a business or individual?" (radio) - If Business → Show company name, size, industry fields - If Individual → Show profession, interests fields - Final step: Contact info (same for both paths) Include: - Smooth transitions - Back button remembers selections - Progress adjusts based on path taken
Formularvalidierung und Fehlerbehandlung
Validierung entscheidet darüber, ob ein Formular taugt oder nicht. Diese Prompts konzentrieren sich gezielt auf eine saubere Fehlerbehandlung.
Echtzeit-Validierungsformular
Create a registration form with real-time validation: - Email: Validate format on blur, check availability on 500ms debounce - Username: Check availability as user types (debounced) - Password: Show requirements checklist, check each in real-time - Confirm password: Validate match on every keystroke Show validation states: - Neutral (default) - Validating (spinner) - Valid (green checkmark) - Invalid (red X with message)
Formular mit Inline-Fehlern
Build a form demonstrating inline error patterns: - Error icon appears inside the input (right side) - Error message appears directly below the field - Invalid fields get red border - Error message clears when user starts typing - Summary of errors at form top on submit attempt - Focus moves to first invalid field on submit
Formular mit Toast-Benachrichtigungen
Create a form that uses toast notifications for feedback: - Success toast (green): "Form submitted successfully!" - Error toast (red): "Please fix the errors below" - Warning toast (yellow): "Some fields are incomplete" - Info toast (blue): "Saving draft..." Toasts should: - Appear in top-right corner - Auto-dismiss after 4 seconds - Be dismissable with X button - Stack if multiple appear
Barrierefreie und ARIA-konforme Formulare
Klare Aussage: Die meisten KI-generierten Formulare scheitern an grundlegenden Barrierefreiheitsstandards. Diese Prompts lösen das Problem.
Vollständig barrierefreies Kontaktformular
Create an accessible contact form following WCAG 2.1 AA standards: - All inputs have associated labels (not just placeholders) - Required fields marked with aria-required="true" - Error messages linked with aria-describedby - Focus visible on all interactive elements - Tab order is logical - Form announces submission status to screen readers - Color is not the only indicator of errors - Touch targets minimum 44x44px
Für Screenreader optimiertes Formular
Build a form optimized for screen readers: - Fieldset and legend for grouped inputs - aria-live region for dynamic error messages - aria-invalid on fields with errors - Descriptive button text (not just "Submit") - Instructions linked to inputs with aria-describedby - Skip link to jump past form if needed - Announce form completion with role="status"
Wenn du bereits Landingpages mit KI gebaut hast, weißt du, dass Barrierefreiheit dabei oft unter den Tisch fällt. Bei Formularen ist das noch kritischer – und im DACH-Raum zunehmend auch rechtlich relevant.
E-Commerce-Checkout-Formulare
Checkout-Formulare haben den höchsten Einsatz – ein Fehler kostet direkt Umsatz. Diese Prompts nehmen die Komplexität in den Griff.
Lieferadressformular
Create a shipping address form with: - Full name - Address line 1 (with autocomplete) - Address line 2 (optional) - City - State/Province dropdown (changes based on country) - ZIP/Postal code with format validation - Country dropdown (default: US) - "Same as billing" checkbox - Save address checkbox Include: - Google Places autocomplete integration hint - Input formatting for postal codes - Required field indicators
Zahlungsformular mit Karteneingabe
Build a payment form with credit card fields: - Card number with formatting (4-4-4-4 spacing) - Card type detection (Visa, Mastercard, Amex icon) - Expiry date (MM/YY with auto-formatting) - CVV (3-4 digits based on card type) - Cardholder name - "Save card for future purchases" checkbox Include: - Card flip animation showing CVV location - Luhn algorithm validation hint - Security badges (PCI compliant, SSL secured) - Loading state during processing
Vollständiger Checkout-Flow
Create a checkout page with three collapsible sections: 1. Shipping Information (address form) 2. Payment Method (card form) 3. Order Review (summary with edit links) Include: - Section completion checkmarks - Edit buttons to modify completed sections - Order total sidebar (sticky on desktop) - Apply coupon code field - Final "Place Order" button with total - Terms checkbox before purchase
Ähnlich wie bei unseren Dashboard-Prompt-Templates profitieren Checkout-Formulare davon, komplexe UIs in klar definierte Abschnitte aufzuteilen.
Profi-Tipps für bessere Formular-Ergebnisse
Nach dem Generieren von Hunderten Formularen mit KI sind das die Muster, die verlässlich bessere Ergebnisse liefern:
1. Validierungsregeln immer explizit angeben. Geh nicht davon aus, dass die KI weiß, was in deiner App eine „gültige E-Mail" bedeutet.
2. Alle Zustände im Prompt aufführen. Laden, Erfolg, Fehler, deaktiviert – was du nicht erwähnst, bekommst du nicht.
3. Die gewünschte Bibliothek nennen. React Hook Form mit Zod produziert deutlich anderen Code als reines React-State-Management.
4. Konkrete Component-Libraries referenzieren. „Verwende shadcn/ui" ergibt ein konsistentes Design. Ohne diese Vorgabe bekommst du ein Stilwirrwarr.
5. Randfälle durchdenken. Was passiert, wenn der Nutzer Text einfügt? Doppelt auf Submit klickt? JavaScript deaktiviert hat?
Jetzt loslegen
Formulare müssen kein Albtraum sein. Mit den richtigen Prompts generierst du produktionsreife Formulare in Minuten statt Stunden.
Die Templates oben decken 90 % der Formularanforderungen ab, die dir begegnen werden. Kopiere sie, passe sie an und mach sie zu deinen eigenen. Wenn das erste Ergebnis noch nicht ganz stimmt – mehr Kontext liefern. Das genaue Verhalten beschreiben, das du brauchst.
Die KI ist in der Lage, erstaunlich ausgefeilte Formulare zu generieren. Sie braucht nur die richtigen Fragen.
Bereit, diese KI-Formular-Prompts einzusetzen? Such dir eines der Templates oben aus und probiere es aus. Du wirst vielleicht überrascht sein, wie nah das erste Ergebnis an „fertig" dran ist.
Try this prompt⌘+Enterto launch
