Formulário Contato HTML

Formulários de contato que convertem

O formulário de contato costuma ser o ponto de conversão de maior alavancagem em um site pequeno — é por onde leads, suporte e parcerias chegam até você. A matemática é dura: estudos do setor apontam taxas de abandono de formulário entre 67% e 81%, e o melhor preditor consistente é a quantidade de campos. Cortar um campo opcional pode subir conclusões em dois dígitos percentuais. Comece com o formulário mais enxuto possível (nome, email, mensagem) e só adicione campos que você realmente vá usar.

Um baseline HTML5 razoável é assim:

<form action="/contato" method="post">
  <label for="nome">Nome</label>
  <input id="nome" name="nome" required autocomplete="name">
  <label for="email">Email</label>
  <input id="email" name="email" type="email" required autocomplete="email" inputmode="email">
  <label for="msg">Mensagem</label>
  <textarea id="msg" name="mensagem" required minlength="20"></textarea>
  <button type="submit">Enviar</button>
</form>

Para onde o formulário envia

Se você não tem backend, conecte a um serviço de formulário-para-email. Opções populares: Netlify Forms (basta um atributo netlify, zero código), Formspree, Getform, Web3Forms, Basin e Formcarry. Com backend próprio (Express, Rails, Laravel, Route Handler do Next.js), faça POST no seu endpoint e revalide tudo do lado servidor — validação no cliente é UX, validação no servidor é confiança.

Anti-spam sem arruinar a UX

O reCAPTCHA v3 (invisível) é o padrão histórico, mas embute tracking do Google e vem sendo substituído por Cloudflare Turnstile (amigável à privacidade, gratuito) e hCaptcha. Mais simples ainda: um campo honeypot escondido via CSS que bots preenchem e humanos nunca veem, mais checagem de tempo-na-página (menos de 2 segundos = bot). Só essas duas técnicas barram 80–95% do spam automatizado sem nenhum desafio CAPTCHA para usuário legítimo.

Acessibilidade e UX no mobile

• Todo input precisa de <label for> de verdade — placeholder não é label.
• Use aria-required="true" e alterne aria-invalid="true" em erros de validação.
• Configure autocomplete (name, email, tel) — só o autofill já melhora conclusão.
• Defina inputmode="email", inputmode="tel" ou inputmode="numeric" para o teclado mobile certo.
• Mensagens de erro inline logo abaixo do campo, não em lista no topo do formulário.
• Mova o foco para o primeiro erro depois do submit, para que teclado e leitor de tela cheguem nele.

Privacidade, GDPR e LGPD

Exiba uma mensagem curta de consentimento com link para a sua política de privacidade perto do botão de envio. Opt-in de newsletter precisa ser uma caixa separada, desmarcada por padrão — agrupar consentimento de marketing com a solicitação de contato é ilegal sob GDPR e LGPD. O armazenamento do envio cai nas regras de tratamento de dados: deixe claro na política o prazo de retenção e o direito de exclusão do titular.

Perguntas frequentes

Preciso de reCAPTCHA? Não. Honeypot mais tempo-na-página cobre a maior parte do spam; Turnstile ou hCaptcha são melhores que reCAPTCHA quando você realmente precisar de desafio.

Quantos campos são demais? Cada campo extra reduz conversão de forma mensurável. Comece em três (nome, email, mensagem) e só adicione quando remover tornaria seu follow-up impossível.

Opt-in de newsletter é obrigatório? Não — e agrupar com o formulário de contato viola GDPR/LGPD. Mantenha consentimento de marketing como checkbox separado e opt-in.

Devo salvar rascunhos no localStorage? Para formulários longos (5+ campos) sim; para um contato rápido é exagero e pode vazar conteúdo digitado em computadores compartilhados.