Vou ser direto: formulários são traiçoeiros. Parecem simples à primeira vista. Uns campos de input, um botão, talvez alguns labels. O que poderia dar errado?
Tudo. Absolutamente tudo pode dar errado.
Já vi devs passarem horas brigando com lógica de validação, requisitos de acessibilidade e aquela situação clássica onde o usuário cola o telefone com parênteses, traço e tudo mais. E o detalhe — a IA consegue resolver a maior parte disso muito bem, desde que você saiba como pedir.
Este guia te dá 35+ prompts de IA para formulários que funcionam direto no Build with Fardino →, v0, Lovable ou qualquer gerador de React focado em IA. Não são templates teóricos. São prompts testados na prática, que produzem formulários que usuários reais conseguem usar.
Por que a Maioria dos Formulários Gerados por IA é Problemática (E Como Mudar Isso)
Aqui está o que ninguém te conta sobre gerar formulários com IA: o output padrão é quase sempre incompleto.
Peça "um formulário de contato" e você vai receber três inputs e um botão de enviar. Sem validação. Sem estados de erro. Sem indicador de carregamento. Sem atributos de acessibilidade. Vai parecer ótimo no screenshot e vai quebrar assim que um usuário real tocar nele.
A solução? Especificidade. Quanto mais contexto você der à IA sobre regras de validação, tratamento de erros e casos extremos, melhores serão seus formulários. Esse é o princípio central por trás de todos os prompts abaixo.
Se ainda não leu, dá uma olhada no nosso guia sobre context engineering para IA em código — ele explica por que essa abordagem funciona tão bem.
Formulários Básicos de Contato e Newsletter
Vamos começar pelo básico. Esses prompts geram os formulários que todo site precisa.
Formulário de Contato Simples
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
Cadastro de 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
Formulário de Contato com Dropdown de Assunto
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
Quer testar agora mesmo?
Try this prompt⌘+Enterto launch
Newsletter com Nome
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
Formulário de Feedback com Avaliação
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
Formulários de Login e Autenticação
Formulários de autenticação precisam dar conta de bastante coisa: dicas de segurança, visibilidade de senha, fluxo de "esqueci a senha", login social. Veja como fazer a IA gerá-los corretamente.
Formulário 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 com Tratamento de Erros
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"
Login por Magic Link
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
Esse é o tipo de prompt que se beneficia das boas práticas de vibe coding que já cobrimos aqui — ser explícito sobre cada estado possível do formulário faz toda a diferença no resultado final.
Input de Autenticação em Dois Fatores
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
Formulário de Redefinição de Senha
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
Formulários de Registro e Cadastro
Formulários de registro precisam equilibrar a coleta das informações necessárias com não espantar o usuário logo de cara. Esses prompts ajudam a acertar esse equilíbrio.
Formulário de Cadastro Simples
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
Cadastro com 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 Completo com Múltiplos 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 do Formulário | Por que foi Incluído |
|---|---|
| Telefone com código de país | Usuários internacionais, verificação por SMS |
| Seletores de data de nascimento | Mais acessível do que date picker nativo |
| Indicador de progresso | Define expectativas, reduz abandono |
| Validação por campo | Feedback imediato melhora a conclusão |
Cadastro com Opções Sociais
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"
Cadastro em 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
Formulários Multi-Etapas e Wizards
Formulários multi-etapas são onde a maioria dos outputs de IA desanda. A chave é especificar explicitamente o conteúdo de cada etapa e o comportamento de navegação — sem isso, a IA tende a gerar algo genérico que não conecta os passos direito.
Wizard de Onboarding em 3 Etapas
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
Quer testar agora mesmo?
Try this prompt⌘+Enterto launch
Formulário de Pesquisa/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
Formulário Multi-Etapas 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
Validação de Formulários e Tratamento de Erros
A validação é onde os formulários se salvam ou afundam de vez. Esses prompts focam especificamente em acertar o tratamento de erros — porque um formulário bonito sem validação decente não serve para nada em produção.
Formulário com Validação em Tempo 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)
Formulário com Erros 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
Formulário com Notificações 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
Formulários Acessíveis e com ARIA
Opinião polêmica: a maioria dos formulários gerados por IA reprova nos critérios básicos de acessibilidade. Não é culpa da IA — é que você precisa pedir explicitamente. Esses prompts corrigem isso.
Formulário de Contato Totalmente Acessível
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
Formulário Otimizado para Leitores de Tela
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"
Se você já criou landing pages com IA, sabe que acessibilidade costuma ficar de lado. Em formulários, o cuidado precisa ser ainda maior — é o ponto de contato mais crítico com o usuário.
Formulários de Checkout para E-commerce
Formulários de checkout são os que têm mais a perder — erre aqui e você perde venda na hora. Esses prompts dão conta da complexidade. Para quem desenvolve no Brasil, vale redobrar a atenção: além dos campos padrão, apps nacionais geralmente precisam de validação de CPF/CNPJ, busca automática por CEP e suporte a métodos de pagamento como Pix e boleto bancário — detalhes que fazem toda a diferença na conversão.
Formulário de Endereço de Entrega
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
Formulário de Pagamento com Dados do Cartão
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
Fluxo de Checkout Completo
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
Assim como nos nossos templates de prompts para dashboards, formulários de checkout se beneficiam de dividir UIs complexas em seções bem definidas — tanto para a IA gerar melhor quanto para o usuário entender o fluxo.
Dicas Pro para Resultados Melhores
Depois de gerar centenas de formulários com IA, aqui estão os padrões que consistentemente produzem resultados superiores:
1. Sempre especifique as regras de validação explicitamente. Não assuma que a IA sabe o que "e-mail válido" significa para o seu sistema — ela não sabe.
2. Inclua todos os estados no seu prompt. Carregando, sucesso, erro, desabilitado — se você não mencionar, não vai receber.
3. Diga qual biblioteca você quer usar. React Hook Form com Zod gera um código completamente diferente de React state puro. Seja específico.
4. Referencie bibliotecas de componentes específicas. "Use shadcn/ui" garante consistência visual. Sem isso, você recebe estilos aleatórios que precisarão de ajuste manual.
5. Pense nos casos extremos. O que acontece se o usuário colar texto? Der duplo clique no submit? Estiver com JavaScript desabilitado?
Agora é Sua Vez: Comece a Construir
Formulários não precisam ser uma dor de cabeça. Com os prompts certos, você consegue gerar formulários prontos para produção em minutos, não em horas.
Os templates acima cobrem 90% dos casos de uso de formulários que você vai encontrar no dia a dia. Copie, customize e faça seus. E quando o output padrão não estiver exatamente do jeito que precisa? Adicione mais contexto. Especifique o comportamento exato que você quer.
A IA é capaz de gerar formulários incrivelmente sofisticados — ela só precisa que você peça as coisas certas.
Pronto para colocar esses prompts de IA para formulários em ação? Escolha um dos templates acima e teste agora. Você pode se surpreender com o quanto o primeiro output já chega perto do resultado final.
Try this prompt⌘+Enterto launch
