Como criar formulário de captura com IA usando Lovable e ChatGPT

Como criar formulário de captura com IA usando Lovable e ChatGPT

Dificuldade: Intermediário | Tempo: 45 minutos | Ferramentas: Lovable.dev, OpenAI API, ChatGPT

O problema que você vai resolver

Você precisa capturar leads no seu site. Até aí, nada de novo. Mas quer algo além do formulário básico que manda um email genérico de "obrigado por entrar em contato".

O ideal seria que cada pessoa recebesse uma resposta personalizada baseada no que ela escreveu. Se alguém pergunta sobre preços, a resposta fala de preços. Se pergunta sobre funcionalidades técnicas, a IA responde com detalhes técnicos. Tudo automático, tudo instantâneo.

O problema é que montar isso do zero envolve frontend, backend, banco de dados, integração com API de email, integração com OpenAI... dá trabalho. Mas com Lovable e um pouco de vibe coding, você faz tudo isso em menos de uma hora.

As ferramentas que vamos usar

Lovable.dev é uma plataforma de desenvolvimento que usa IA para gerar código funcional. Você descreve o que quer em linguagem natural e ela cria a aplicação completa — frontend com React, backend quando necessário, banco de dados integrado. A diferença do Lovable para outras ferramentas de vibe coding é que ela já vem com infraestrutura pronta. Você não precisa configurar servidor, deploy ou hospedagem. Tudo roda direto na plataforma.

A plataforma usa um modelo de conversa onde você vai refinando o projeto. Pediu algo que não ficou bom? É só pedir pra ajustar. Esqueceu uma funcionalidade? Adiciona depois. É desenvolvimento iterativo no melhor estilo vibe coding.

ChatGPT e OpenAI API são a inteligência por trás das respostas automáticas. A API da OpenAI permite que você envie um texto (a mensagem do lead) e receba uma resposta gerada por IA. Você define o comportamento da IA através de prompts — instruções que dizem como ela deve responder, qual tom usar, que informações incluir.

Para usar a API, você precisa de uma chave (API key) da OpenAI. Essa chave funciona como uma senha que autoriza sua aplicação a usar os serviços deles. O uso é pago, mas os primeiros testes custam centavos.

Como funciona a lógica desse sistema

Antes de colocar a mão na massa, entenda o fluxo completo:

1. Usuário preenche o formulário com nome, email e mensagem

2. Frontend envia esses dados para o backend

3. Backend salva os dados no banco (você não perde nenhum lead)

4. Backend manda a mensagem do usuário para a API do ChatGPT

5. ChatGPT gera uma resposta personalizada baseada no contexto

6. Backend envia essa resposta por email para o lead

7. Frontend mostra uma mensagem de sucesso

O segredo está no prompt que você envia para o ChatGPT. É ele que define se a resposta vai parecer genérica ou realmente personalizada. Um prompt bem construído considera o contexto da sua empresa, o tom de voz que você quer usar e as informações que devem aparecer na resposta.

Por exemplo: se você vende um software de gestão, o prompt pode instruir a IA a identificar se a pessoa está perguntando sobre preços, funcionalidades ou suporte técnico, e responder de acordo. A IA consegue fazer isso porque foi treinada para entender contexto e intenção.

Passo a passo completo

1. Configure seu projeto no Lovable

Abra o Lovable e crie um novo projeto. Na primeira conversa com a IA da plataforma, descreva o que você quer:

Crie um formulário de captura de leads com os seguintes campos:

• Nome completo (obrigatório)

• Email (obrigatório, com validação)

• Mensagem (textarea, obrigatório)

O formulário deve ter design moderno e responsivo, com cores azul escuro (#1e3a8a) e branco. Adicione validação em tempo real e feedback visual quando o usuário preenche os campos.

O Lovable vai gerar a interface completa. Você verá o formulário funcionando em tempo real no preview. Se não gostar de algo, é só pedir ajustes. Por exemplo:

Mude a cor do botão para verde (#10b981) e adicione um ícone de envio. Deixe o botão desabilitado enquanto os campos obrigatórios não estiverem preenchidos.

2. Adicione o banco de dados

Agora você precisa salvar os leads. O Lovable já vem com Supabase integrado, então não precisa configurar nada manualmente:

Crie uma tabela no banco de dados chamada "leads" com as colunas:

• id (uuid, primary key, auto-gerado)

• nome (text)

• email (text)

• mensagem (text)

• resposta_ia (text, pode ser null)

• created_at (timestamp, auto-gerado)

Quando o formulário for enviado, salve os dados nessa tabela.

O Lovable vai criar a tabela e configurar a conexão automaticamente. Você pode ver a estrutura do banco direto na interface da plataforma.

3. Integre a API da OpenAI

Agora vem a parte da IA. Você vai precisar da sua chave da OpenAI. Depois de obter a chave, adicione ela nas variáveis de ambiente do Lovable (tem uma seção específica pra isso nas configurações do projeto).

Nome da variável: OPENAI_API_KEY Valor: sua chave

Agora peça para o Lovable criar a integração:

Crie uma função no backend que:

1. Recebe os dados do formulário (nome, email, mensagem)

2. Salva esses dados na tabela "leads"

3. Envia a mensagem do usuário para a API da OpenAI (modelo gpt-4o-mini)

4. Usa o seguinte prompt de sistema:

"Você é um assistente de atendimento da [SUA EMPRESA]. Analise a mensagem do lead e gere uma resposta personalizada, profissional e amigável. Se a pessoa perguntou sobre preços, mencione que um consultor entrará em contato em até 24h. Se perguntou sobre funcionalidades, destaque os principais recursos do produto. Mantenha o tom conversacional e útil. Assine como 'Equipe [SUA EMPRESA]'."

5. Salva a resposta gerada no campo "resposta_ia" da tabela

6. Retorna a resposta para o frontend

Substitua [SUA EMPRESA] pelo nome real da sua empresa. Esse prompt é o cérebro do sistema — ele define como a IA vai se comportar.

4. Configure o envio de email

A resposta da IA precisa chegar no email do lead. O Lovable pode integrar com serviços de email, mas para simplificar, vamos usar a funcionalidade de email do Supabase:

Adicione envio de email usando Supabase Edge Functions. Quando a resposta da IA for gerada:

1. Envie um email para o endereço fornecido pelo lead

2. Assunto: "Recebemos sua mensagem, [NOME]!"

3. Corpo: a resposta personalizada gerada pela IA

4. Formato HTML com a identidade visual da empresa

Se você quiser algo mais robusto, pode integrar com Resend, SendGrid ou Mailgun. Mas para começar, o email do Supabase resolve.

5. Adicione feedback visual no frontend

O usuário precisa saber que deu certo. Peça ao Lovable:

Quando o formulário for enviado com sucesso:

1. Mostre uma mensagem de confirmação animada

2. Exiba um resumo: "Obrigado, [NOME]! Enviamos uma resposta personalizada para [EMAIL]. Confira sua caixa de entrada."

3. Limpe os campos do formulário

4. Se houver erro, mostre mensagem clara explicando o problema

Isso melhora a experiência e deixa claro que o sistema está funcionando.

6. Teste o fluxo completo

Agora teste tudo:

• Preencha o formulário com dados reais (use seu email)

• Envie uma mensagem como: "Quero saber mais sobre os preços e planos disponíveis"

• Verifique se os dados foram salvos no banco (você vê isso no painel do Supabase dentro do Lovable)

• Confira seu email — a resposta da IA deve chegar em alguns segundos

Se algo não funcionar, o Lovable mostra os erros no console. É só copiar a mensagem de erro e pedir pra IA corrigir.

7. Refine o prompt da IA

A primeira versão do prompt raramente é perfeita. Faça testes com diferentes tipos de mensagem:

• Pergunta sobre preços

• Pergunta técnica sobre funcionalidades

• Mensagem genérica tipo "quero saber mais"

• Reclamação ou problema

Para cada tipo, veja se a resposta faz sentido. Se não fizer, ajuste o prompt. Por exemplo, se as respostas estão muito longas:

Atualize o prompt de sistema para:

"Você é um assistente de atendimento da [SUA EMPRESA]. Analise a mensagem do lead e gere uma resposta personalizada em no máximo 150 palavras. Seja direto e objetivo. Se a pessoa perguntou sobre preços, mencione que um consultor entrará em contato em até 24h com uma proposta personalizada. Se perguntou sobre funcionalidades, cite 2-3 recursos principais que resolvem a dor mencionada. Se for uma mensagem genérica, pergunte como podemos ajudar especificamente. Mantenha tom profissional mas amigável. Assine como 'Equipe [SUA EMPRESA]'."

Perceba que agora tem limite de palavras e instruções mais específicas para cada cenário.

8. Adicione analytics básico

É útil saber quantos leads você está capturando. Peça ao Lovable:

Crie uma página de admin protegida por senha que mostra:

• Total de leads capturados

• Lista dos últimos 50 leads com nome, email, data e preview da mensagem

• Possibilidade de ver a resposta que a IA gerou para cada um

• Filtro por data

Isso te dá visibilidade do que está acontecendo sem precisar entrar no banco de dados.

Melhorias e variações

Agora que o básico está funcionando, você pode evoluir o sistema. Aqui estão algumas ideias com os prompts prontos.

Adicionar categorização automática:

Modifique a função do backend para incluir categorização. Antes de gerar a resposta, use a API da OpenAI para classificar a mensagem em uma dessas categorias: "dúvida_preço", "dúvida_técnica", "suporte", "parceria", "outro". Salve essa categoria em uma nova coluna na tabela "leads". Use este prompt para classificação:

"Classifique a seguinte mensagem de lead em UMA dessas categorias: dúvida_preço, dúvida_técnica, suporte, parceria, outro. Responda APENAS com a categoria, sem explicação:

[MENSAGEM DO LEAD]"

Adicionar follow-up automático:

Crie uma função que roda diariamente (usando Supabase Cron Jobs) e:

1. Busca leads que não receberam follow-up há 3 dias

2. Gera um email de follow-up personalizado usando ChatGPT

3. Envia o email

4. Marca que o follow-up foi enviado

Prompt para o follow-up: "Gere um email curto e amigável de follow-up para [NOME], que nos enviou esta mensagem há 3 dias: '[MENSAGEM]'. Pergunte se a resposta anterior foi útil e se há algo mais em que podemos ajudar. Mantenha tom leve, não seja insistente."

Adicionar contexto da empresa dinamicamente:

Crie uma tabela "contexto_empresa" com campos:

• secao (text): "precos", "funcionalidades", "suporte"

• conteudo (text): informações sobre essa seção

Quando a IA for gerar a resposta, primeiro classifique a mensagem, depois busque o contexto relevante dessa seção e inclua no prompt:

"Você é um assistente da [SUA EMPRESA]. Use estas informações para responder: [CONTEXTO DA SEÇÃO RELEVANTE]. Mensagem do lead: [MENSAGEM]. Gere uma resposta personalizada usando as informações fornecidas."

Isso permite que você atualize as informações sem mexer no código — só editando a tabela.

Adicionar detecção de urgência:

Modifique o prompt principal para incluir detecção de urgência:

"Você é um assistente da [SUA EMPRESA]. Primeiro, analise se a mensagem indica urgência (palavras como 'urgente', 'rápido', 'hoje', 'agora'). Se for urgente, mencione que priorizaremos o atendimento e um consultor entrará em contato nas próximas 2 horas. Se não for urgente, mencione contato em até 24h. [RESTO DO PROMPT ORIGINAL]"

Integrar com CRM:

Se você usa um CRM como Pipedrive, HubSpot ou RD Station, pode enviar os leads automaticamente:

Adicione uma chamada à API do [SEU CRM] depois de salvar o lead no banco. Envie:

• Nome

• Email

• Mensagem original

• Categoria identificada pela IA

• Resposta gerada

Use a documentação da API do CRM para configurar os endpoints corretos.

O que você aprendeu

Você acabou de construir um sistema completo de captura e resposta automática. Mais importante que o código, você entendeu alguns conceitos fundamentais:

Vibe coding não é só gerar código — é construir sistemas funcionais rapidamente, iterando até ficar bom. O Lovable permite que você teste ideias em minutos, não em semanas.

Prompts são o novo código — a qualidade da resposta da IA depende 100% de como você instrui ela. Um prompt bem pensado considera contexto, tom, limite de tamanho e casos específicos.

Integração de serviços ficou simples — antigamente você precisaria configurar servidor, banco, API, email, deploy... tudo separado. Hoje, plataformas como Lovable abstraem essa complexidade. Você foca no produto, não na infraestrutura.

IA generativa vai além de chatbots — usar ChatGPT para gerar respostas personalizadas em escala é só um exemplo. A mesma lógica serve para gerar relatórios, resumir informações, categorizar dados, criar conteúdo...

Dados estruturados importam — salvar tudo no banco (mensagem original, resposta da IA, categoria, timestamps) permite análises futuras. Você pode identificar padrões, melhorar respostas, treinar modelos personalizados.

Próximos passos

Agora que você tem o sistema básico rodando, aqui estão evoluções naturais:

Crie um chatbot embutido — em vez de formulário, adicione um widget de chat no canto da página. O usuário conversa com a IA em tempo real, e só no final você pede email para enviar um resumo da conversa.

Treine um modelo customizado — depois de coletar 100-200 interações, você pode usar esses dados para fazer fine-tuning de um modelo GPT. Ele vai responder ainda mais alinhado com o seu negócio.

Adicione qualificação de leads — use a IA para dar uma nota de 0-10 para cada lead baseado em critérios que você definir (tamanho da empresa, urgência, budget mencionado). Leads com nota alta vão para um fluxo prioritário.

Implemente A/B testing de prompts — crie variações do prompt e teste qual gera mais conversões. Você pode fazer isso dividindo o tráfego: 50% recebe resposta do prompt A, 50% do prompt B. Depois de uma semana, vê qual performou melhor.

Adicione multiidioma — use a API da OpenAI para detectar o idioma da mensagem e responder na mesma língua. Isso é especialmente útil se você atende mercado internacional.

Crie um sistema de aprovação — antes de enviar a resposta automática, salve ela como rascunho e notifique alguém da equipe para revisar. Útil quando você está começando e quer garantir qualidade.

O sistema que você construiu é a base. A partir daqui, as possibilidades são infinitas — e com vibe coding, testar cada uma delas leva minutos.

---

Construiu seu formulário com IA? Comenta aí como foi a experiência e que melhorias você adicionou. Se travou em alguma parte, a comunidade de vibe coders está aí pra ajudar.