Sites & Landing Pages
ChatGPT / GPT-4o
Formulário de Contato com Validação em Tempo Real e Estados Visuais
Componente de formulário (HTML/CSS/JS puro) com validação inline ao digitar, estados de erro/sucesso por campo e envio simulado com loading.
1cópias
0joinhas
0favoritos
O prompt
Crie um componente de formulário de contato em HTML, CSS e JavaScript puro (arquivo único) para {{nome_empresa}}.
Parâmetros:
- Nome da Empresa: {{nome_empresa}}
- Campos Extras além de nome/e-mail/mensagem: {{campos_extras}} (ex.: 'assunto (select), orçamento (range)')
- Cor de Erro / Sucesso: usar vermelho #dc2626 e verde #16a34a
Requisitos:
1. Validação em tempo real ao sair do campo (blur) e revalidação ao digitar após o primeiro erro: nome (mín. 2 palavras), e-mail (regex + formato local@dominio.tld), mensagem (mín. 20 caracteres com contador 'X/20' que fica verde ao completar).
2. Mensagens de erro inline abaixo do campo, associadas via aria-describedby; o input ganha borda vermelha e ícone de alerta — nunca usar alert().
3. Campos extras {{campos_extras}} incluídos com validação adequada (select obrigatório, range com valor visível ao lado).
4. Ao submeter: validar tudo; se ok, botão entra em estado loading (spinner + 'Enviando...') por 1.2s simulado e depois tela de sucesso ('Recebemos sua mensagem! Responderemos em até 1 dia útil.') com opção 'Enviar outra'.
5. Se houver erro no envio simulado (10% de chance para demonstrar), banner vermelho no topo do formulário com retry — o conteúdo digitado nunca se perde.
6. Acessibilidade: labels visíveis, foco visível customizado, erros anunciados por aria-live='polite', contraste AA; layout responsivo (1 coluna mobile).
Como usar
- Substitua {{nome_empresa}}, {{campos_extras}} e mantenha as cores padrão (ou troque os hex no topo do CSS).
- Cole no ChatGPT; salve como contato.html e abra no navegador — teste campos vazios, e-mail inválido e mensagem curta para ver cada estado.
- Para plugar em um backend real, substitua o setTimeout de envio por fetch('/api/contato', {method:'POST'...}) — a IA marca o trecho com o comentário 'AQUI: trocar pelo seu endpoint'.
- O contador da mensagem e os estados de erro/sucesso funcionam sem dependências — seguro para embutir em qualquer página.
Exemplo de saída
contato.html (~280 linhas): validação no blur + revalidação ao digitar (nome 2 palavras, e-mail regex, mensagem ≥20 com contador), erros inline com aria-describedby e borda vermelha, campos extras com validação própria, envio simulado com spinner e tela de sucesso + 'Enviar outra', falha demonstrativa a 10% com banner retry preservando o conteúdo.