Como criar um formulário de contato em HTML e enviar e-mails sem backend

Você pode criar um formulário de contato em HTML e receber as mensagens por e-mail sem escrever PHP ou manter um servidor próprio. A forma mais simples é usar um serviço de processamento de formulários, como o Formspree, que recebe o envio e encaminha os dados para sua conta.

O método funciona bem para portfólios, páginas feitas no GitHub Pages, landing pages e sites pequenos. Em troca da simplicidade, você passa a depender de uma empresa externa e precisa respeitar os limites do plano, cuidar do spam e informar ao visitante o que acontece com os dados enviados.

O que você precisa antes de começar

• um arquivo HTML publicado ou rodando no computador;
• uma conta no Formspree;
• um endereço de e-mail para receber as notificações;
• um editor de código, como VS Code, ou qualquer editor de texto.

Se você ainda não tem onde publicar a página, veja também o nosso guia para hospedar um site grátis no GitHub Pages. Ele combina bem com este tutorial porque o GitHub Pages publica arquivos estáticos, enquanto o Formspree processa o envio do formulário.

Como criar o formulário de contato em HTML

1. Crie o formulário no Formspree

Acesse o Formspree, crie uma conta e escolha a opção para criar um novo formulário. Depois, abra a área de integração. O painel mostra um endpoint exclusivo, parecido com https://formspree.io/f/SEU_ID.

Esse endereço é o destino do envio. Não copie literalmente SEU_ID: substitua o trecho pelo identificador exibido no seu painel. O próprio serviço orienta criar o formulário, trocar o atributo action pelo endpoint e usar o método post.

2. Cole a estrutura HTML

Crie um arquivo chamado contato.html e use esta estrutura. Troque o endpoint pelo endereço real da sua conta:

<form action="https://formspree.io/f/SEU_ID" method="post">
  <label for="nome">Nome</label>
  <input id="nome" name="nome" type="text" required>

  <label for="email">E-mail</label>
  <input id="email" name="email" type="email" required>

  <label for="mensagem">Mensagem</label>
  <textarea id="mensagem" name="mensagem" rows="6" required></textarea>

  <button type="submit">Enviar mensagem</button>
</form>

Os atributos name são importantes porque identificam os campos enviados. Sem eles, o formulário pode até aparecer corretamente na tela, mas o serviço não terá um nome confiável para associar aos valores. O type="email" e o required ativam uma validação básica do navegador.

3. Adicione um estilo simples

O Formspree não obriga você a usar um visual pronto. O formulário continua sendo HTML normal, então pode receber CSS próprio:

form {
  display: grid;
  gap: 12px;
  max-width: 520px;
}

input,
textarea,
button {
  font: inherit;
  padding: 10px;
}

button {
  cursor: pointer;
}

Isso é uma vantagem para quem usa um site estático: a aparência fica sob seu controle e o serviço entra apenas no processamento. Se o site tiver uma identidade visual, prefira manter cores, espaçamento e mensagens consistentes com o restante da página.

4. Publique e faça um envio de teste

Abra o arquivo no navegador, preencha nome, e-mail e mensagem e clique em enviar. Na primeira utilização, o Formspree pode pedir a confirmação do endereço de recebimento. Depois, confira três lugares: a caixa de entrada, a pasta de spam e o painel de submissões.

Se nada chegar, verifique primeiro se o endpoint foi copiado sem espaços, se o método é post e se cada campo tem name. Também vale testar com outro endereço de e-mail. A validação do navegador ajuda o usuário, mas não substitui verificações no lado do serviço.

Como melhorar o formulário sem complicar

Use mensagens claras

O visitante precisa saber o que acontece depois do clique. Uma frase como “Responderemos em até dois dias úteis” é mais útil do que deixar a pessoa diante de uma tela sem confirmação. Você pode configurar um redirecionamento de agradecimento conforme os recursos disponíveis no painel, ou criar uma página própria no seu site.

Reduza os campos

Peça apenas o que realmente será usado. Nome, e-mail e mensagem resolvem a maioria dos contatos. Telefone, empresa, orçamento e outros campos aumentam o atrito e podem reduzir a quantidade de pessoas que concluem o envio.

Proteja-se contra spam

Formulários públicos atraem robôs. O Formspree informa que oferece filtragem automática e opções como CAPTCHA e regras personalizadas, além de recursos específicos para reduzir spam. Ative a proteção disponível para seu plano e acompanhe as primeiras submissões; nenhuma barreira elimina todo abuso.

Evite também colocar seu e-mail diretamente no HTML. Um robô pode coletá-lo e transformar uma página simples em uma fonte de spam. O endpoint do formulário não substitui uma política de segurança, mas já evita expor o endereço de destino no código público.

Limites, preço e privacidade

Na página de planos consultada em 21 de agosto de 2026, o plano gratuito do Formspree aparece com formulários ilimitados e limite de 50 submissões por mês. O número é suficiente para um portfólio ou site pessoal com poucos contatos, mas pode acabar rapidamente em uma campanha, loja ou página de anúncios. Os planos pagos e seus valores podem mudar, então confira a página oficial antes de contratar.

Há outro ponto que costuma ficar escondido na empolgação do “sem backend”: os dados do formulário passam por um terceiro. Se o visitante enviar nome, telefone, documento, informação médica ou dados de clientes, avalie a finalidade, a retenção e os termos do serviço. Em projetos brasileiros, isso também deve entrar na análise de privacidade e da LGPD. Para dados sensíveis, um backend sob seu controle ou uma solução empresarial com contrato adequado pode ser mais apropriado.

Formspree é a melhor opção para qualquer site?

Não. Ele é uma boa escolha quando você quer colocar um contato no ar rapidamente e não precisa de regras complexas. Também combina com páginas estáticas, porque elimina a necessidade de criar uma API apenas para receber três campos.

Procure outra solução se você precisa de autenticação, anexos controlados, automações internas, alto volume, banco de dados próprio ou requisitos fortes de residência e governança dos dados. Nesse cenário, vale comparar um backend próprio, uma função serverless ou um recurso de formulário oferecido pelo seu provedor de hospedagem.

Erros comuns que impedem o envio

• Endpoint incompleto: o endereço precisa conter o ID do formulário criado no painel.
• Campo sem name: o valor pode não aparecer na submissão.
• Uso de method="get": dados podem parar na URL e o fluxo esperado pelo serviço deixa de funcionar.
• Teste apenas no arquivo local: publique a página e confirme o comportamento no domínio real.
• Confiança cega na validação do navegador: atributos HTML são uma primeira barreira, não uma política antifraude.

Perguntas frequentes

Preciso saber PHP para usar o Formspree?

Não. Para um formulário HTML básico, você precisa apenas apontar o action para o endpoint do Formspree e usar method="post". PHP ou outro backend só entra se você precisar de regras e integrações próprias.

O plano gratuito recebe quantas mensagens?

Na consulta feita em 21 de agosto de 2026, o plano gratuito indicava 50 submissões mensais. Como planos e limites podem ser alterados, confira a página oficial antes de publicar uma campanha ou projeto comercial.

O formulário funciona no GitHub Pages?

Sim. O GitHub Pages entrega os arquivos estáticos e o Formspree recebe o envio por fora. Essa combinação não transforma o GitHub Pages em um servidor de aplicação; ela apenas conecta a página a um serviço externo.

Posso enviar arquivos pelo formulário?

O Formspree documenta suporte a uploads em configurações específicas, mas isso depende do recurso e do plano. Se anexos forem indispensáveis, verifique o limite atual e a política de armazenamento antes de liberar o campo.

Em resumo: para um contato simples, o caminho é criar o formulário, copiar o endpoint, adicionar name aos campos e testar no domínio publicado. A parte fácil termina aí; limite, spam e privacidade são o que decide se a solução continua adequada depois do primeiro mês.