Let's be honest: forms are deceptively hard. They look simple. A few input fields, a button, maybe some labels. What could go wrong?
Everything. Everything can go wrong.
I've watched developers spend hours wrestling with validation logic, accessibility requirements, and that one edge case where users paste their phone number with parentheses. And here's the thing—AI can actually handle most of this beautifully, if you know how to ask.
This guide gives you 35+ AI form prompts that work out of the box with tools like Fardino, v0, Lovable, or any React-focused AI generator. These aren't theoretical templates. They're battle-tested prompts that produce forms people can actually use.
Why Most AI-Generated Forms Suck (And How to Fix That)
Here's what nobody tells you about generating forms with AI: the default output is almost always incomplete.
Ask for "a contact form" and you'll get three inputs and a submit button. No validation. No error states. No loading indicator. No accessibility attributes. It'll look fine in a screenshot and break the moment a real user touches it.
The fix? Specificity. The more context you give the AI about validation rules, error handling, and edge cases, the better your forms will be. That's the core principle behind all the prompts below.
If you haven't already, check out our guide on context engineering for AI coding—it explains why this approach works so well.
Basic Contact & Newsletter Forms
Let's start simple. These prompts generate the forms every website needs.
Simple Contact Form
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 Signup (Single Field)
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
Contact Form with Subject 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
Want to try this yourself?
Newsletter with 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
Feedback Form with Rating
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 & Authentication Forms
Authentication forms need to handle a lot: security hints, password visibility, forgot password flows, social logins. Here's how to get AI to generate them properly.
Basic Login Form
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 with Error Handling
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
This is the kind of prompt that benefits from the vibe coding best practices we've covered—being explicit about every state the form can be in.
Two-Factor Authentication Input
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
Password Reset Form
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
Registration & Signup Forms
Registration forms need to balance collecting necessary info with not scaring users away. These prompts help you get that balance right.
Simple Signup Form
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 with Profile Picture
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
Multi-Field Registration
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
| Form Element | Why It's Included |
|---|---|
| Phone with country code | International users, SMS verification |
| Date of birth dropdowns | More accessible than date picker |
| Progress indicator | Sets expectations, reduces abandonment |
| Field-level validation | Immediate feedback improves completion |
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"
Waitlist 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
Multi-Step & Wizard Forms
Multi-step forms are where most AI outputs fall apart. The key is specifying each step's content and the navigation behavior explicitly.
Three-Step 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
Want to try this yourself?
Survey/Quiz Form
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
Conditional Multi-Step Form
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
Form Validation & Error Handling
Validation is where forms live or die. These prompts focus specifically on getting error handling right.
Real-Time Validation Form
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)
Form with Inline Errors
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
Form with Toast Notifications
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
Accessible & ARIA-Compliant Forms
Hot take: most AI-generated forms fail basic accessibility standards. These prompts fix that.
Fully Accessible Contact Form
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
Screen Reader Optimized Form
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"
If you've built landing pages with AI, you know that accessibility often gets overlooked. Forms need even more attention here.
E-commerce Checkout Forms
Checkout forms have the highest stakes—get them wrong and you lose sales. These prompts handle the complexity.
Shipping Address Form
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
Payment Form with Card Input
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
Complete 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
Similar to our dashboard prompt templates, checkout forms benefit from breaking complex UIs into clear sections.
Pro Tips for Better Form Results
After generating hundreds of forms with AI, here are the patterns that consistently produce better results:
1. Always specify validation rules explicitly. Don't assume the AI knows what "valid email" means to your app.
2. Include all states in your prompt. Loading, success, error, disabled—if you don't mention it, you won't get it.
3. Mention the library you want. React Hook Form and Zod produce very different code than vanilla React state.
4. Reference specific component libraries. "Use shadcn/ui" gets you consistent design. Without it, you get random styling.
5. Think about edge cases. What happens if the user pastes text? Double-clicks submit? Has JavaScript disabled?
Your Turn: Start Building
Forms don't have to be painful. With the right prompts, you can generate production-ready forms in minutes instead of hours.
The templates above cover 90% of form use cases you'll encounter. Copy them, customize them, and make them your own. And when the default output isn't quite right? Add more context. Specify the exact behavior you need.
The AI is capable of generating incredibly sophisticated forms—it just needs you to ask for the right things.
Ready to put these AI form prompts to work? Pick one of the templates above and give it a try. You might be surprised how close to "done" the first output gets you.
