Seamos honestos: los formularios tienen fama de ser lo más sencillo del frontend. Tres campos de entrada, un botón, unas etiquetas. ¿Qué podría salir mal?
Todo. Absolutamente todo puede salir mal.
He visto a devs invertir horas peleando con la lógica de validación, los requisitos de accesibilidad, y ese edge case donde el usuario pega su número de teléfono con paréntesis. Y la cosa es esta: la IA puede manejar la mayoría de eso de maravilla, si sabes cómo pedirlo.
Esta guía te da más de 35 prompts de IA para formularios que funcionan directo con herramientas como Construir con Fardino →, v0, Lovable, o cualquier generador de IA enfocado en React. No son plantillas teóricas. Son prompts probados que producen formularios que la gente puede usar en producción.
Por Qué la Mayoría de Formularios Generados con IA Son un Desastre (Y Cómo Arreglarlo)
Esto es lo que nadie te cuenta sobre generar formularios con IA: el output por defecto casi siempre está incompleto.
Pides "un formulario de contacto" y recibes tres inputs y un botón de enviar. Sin validación. Sin estados de error. Sin indicador de carga. Sin atributos de accesibilidad. Se ve bien en una captura de pantalla y falla en el momento en que un usuario real lo toca.
¿La solución? Especificidad. Cuanto más contexto le des a la IA sobre las reglas de validación, el manejo de errores y los casos extremos, mejores serán tus formularios. Ese es el principio detrás de todos los prompts a continuación.
Si todavía no lo leíste, checa nuestra guía sobre context engineering para código con IA—explica por qué este enfoque funciona tan bien.
Formularios Básicos de Contacto y Newsletter
Empecemos simple. Estos prompts generan los formularios que cualquier sitio web necesita.
Formulario de Contacto Simple
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
Suscripción a Newsletter (Campo Único)
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
Formulario de Contacto con Menú Desplegable de Asunto
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
¿Quieres probarlo tú mismo?
Try this prompt⌘+Enterto launch
Newsletter con Nombre
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
Formulario de Retroalimentación con Calificación
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
Formularios de Login y Autenticación
Los formularios de autenticación tienen mucho que manejar: indicaciones de seguridad, visibilidad de contraseña, flujos de "olvidé mi contraseña" e inicio de sesión social. Así es como logras que la IA los genere correctamente.
Formulario de Login Básico
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 con Manejo de Errores
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
Este es el tipo de prompt que se beneficia de las mejores prácticas de vibe coding que hemos visto—ser explícito sobre cada estado posible del formulario marca toda la diferencia.
Input de Autenticación de Dos Factores
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
Formulario de Restablecimiento de Contraseña
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
Formularios de Registro
Los formularios de registro deben encontrar el equilibrio entre recopilar la información necesaria sin espantar a los usuarios. Estos prompts te ayudan a dar con ese balance.
Formulario de Registro Simple
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
Registro con Foto de Perfil
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
Registro con Múltiples Campos
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
| Elemento del Formulario | Por Qué Está Incluido |
|---|---|
| Teléfono con código de país | Usuarios internacionales, verificación por SMS |
| Selectores desplegables de fecha de nacimiento | Más accesibles que un date picker |
| Indicador de progreso | Establece expectativas y reduce el abandono |
| Validación a nivel de campo | El feedback inmediato mejora la tasa de completado |
Registro con Opciones de Red Social
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"
Registro en Lista de Espera
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
Formularios Multi-Paso y Wizards
Los formularios multi-paso son donde la mayoría de los outputs de IA se desmoronan. La clave está en especificar el contenido de cada paso y el comportamiento de navegación de forma explícita—sin atajos.
Wizard de Onboarding en Tres Pasos
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
¿Quieres probarlo tú mismo?
Try this prompt⌘+Enterto launch
Formulario de Encuesta/Quiz
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
Formulario Multi-Paso Condicional
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
Validación de Formularios y Manejo de Errores
La validación es donde los formularios se ganan o se pierden. Estos prompts se enfocan específicamente en lograr un buen manejo de errores.
Formulario con Validación en Tiempo Real
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)
Formulario con Errores Inline
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
Formulario con Notificaciones Toast
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
Formularios Accesibles y Conformes con ARIA
Opinión directa: la mayoría de los formularios generados con IA no pasan los estándares básicos de accesibilidad. Estos prompts lo corrigen.
Formulario de Contacto Completamente Accesible
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
Formulario Optimizado para Lectores de Pantalla
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"
Si has construido landing pages con IA, sabes que la accesibilidad suele quedarse en el olvido. Los formularios requieren aún más atención en este aspecto.
Formularios de Checkout para E-commerce
Los formularios de checkout son los que más se juegan—si los arruinas, pierdes ventas. Estos prompts manejan toda la complejidad.
Formulario de Dirección de Envío
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
Tip para proyectos en LatAm: Si tu aplicación atiende usuarios de México, Argentina, Colombia o Chile, ajusta el selector de país para que esos países aparezcan primero y adapta el formato de código postal al de cada región. El formato varía bastante entre países.
Formulario de Pago con Entrada de Tarjeta
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
Nota para proyectos en LatAm: Si integras pagos para México, Argentina, Colombia o Chile, Mercado Pago es el equivalente regional de Stripe y tiene nivel gratuito para empezar. Su SDK incluye componentes de tarjeta propios que puedes combinar visualmente con estos prompts como base de diseño.
Flujo Completo de Checkout
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
Al igual que con nuestras plantillas de prompts para dashboards, los formularios de checkout se benefician de dividir la UI compleja en secciones bien definidas.
Tips Pro para Mejores Resultados en Formularios
Después de generar cientos de formularios con IA, estos son los patrones que producen resultados consistentemente mejores:
1. Siempre especifica las reglas de validación de forma explícita. No asumas que la IA sabe qué significa "email válido" para tu aplicación.
2. Incluye todos los estados en tu prompt. Cargando, exitoso, error, deshabilitado—si no lo mencionas, no lo obtendrás.
3. Menciona la librería que quieres usar. React Hook Form con Zod produce código muy diferente al de un estado vanilla de React.
4. Haz referencia a librerías de componentes específicas. Escribir "usa shadcn/ui" te da diseño consistente. Sin esa indicación, recibes estilos aleatorios.
5. Piensa en los edge cases. ¿Qué pasa si el usuario pega texto? ¿Si hace doble clic en enviar? ¿Si tiene JavaScript desactivado?
Tu Turno: Empieza a Construir
Los formularios no tienen que ser un dolor de cabeza. Con los prompts correctos, puedes generar formularios listos para producción en minutos en lugar de horas.
Las plantillas de arriba cubren el 90% de los casos de uso que vas a encontrar. Cópialas, personalízalas y hazlas tuyas. ¿Y cuando el output por defecto no está del todo bien? Agrega más contexto. Especifica el comportamiento exacto que necesitas.
La IA es capaz de generar formularios increíblemente sofisticados—solo necesita que le pidas las cosas correctas.
¿Listo para poner estos prompts de IA para formularios a trabajar? Elige una de las plantillas y dale una oportunidad. Puede que te sorprenda lo cerca de "listo para producción" que está el primer resultado.
Try this prompt⌘+Enterto launch
