Netlify Forms: formulário em site React com Vite

Netlify Forms: como receber formulários em React e Vite sem backend

Netlify Forms é um recurso da Netlify que captura envios de formulários HTML do seu site e os guarda no painel, sem você precisar criar um servidor ou uma API. Em um site React com Vite, basta declarar um formulário estático com o atributo data-netlify="true" e enviar os dados por POST. É a forma mais rápida de colocar um formulário de contato em uma landing page publicada na Netlify.

Como o Netlify Forms funciona

A Netlify lê o HTML gerado no momento do deploy e procura por tags <form> com o atributo data-netlify="true". Cada formulário encontrado vira um endpoint que recebe os envios e os mostra na aba Forms do painel do site.

O ponto que confunde quem usa React é este: o bot de deploy só enxerga HTML estático. Como o React monta o formulário no navegador, a Netlify não o detecta sozinha. A solução é ter uma versão estática do formulário no index.html.

Em resumo, o fluxo é este:

1. Você declara um formulário estático oculto com os mesmos campos do formulário real.
2. A Netlify detecta o formulário durante o deploy.
3. O componente React envia os dados por fetch com o campo form-name.
4. O envio aparece no painel e pode disparar notificações.

Passo a passo para configurar em React com Vite

1. Crie o formulário estático no index.html

Dentro do body do index.html (ou em um arquivo estático na pasta public), adicione um formulário oculto:

<form name="contato" data-netlify="true" netlify-honeypot="bot-field" hidden>
  <input type="text" name="nome" />
  <input type="email" name="email" />
  <textarea name="mensagem"></textarea>
</form>

Os nomes dos campos precisam ser idênticos aos do formulário React.

2. Envie os dados pelo componente React

No componente, inclua um campo oculto form-name com o mesmo nome do formulário estático e envie os dados como application/x-www-form-urlencoded:

async function handleSubmit(e) {
  e.preventDefault();
  const dados = new FormData(e.target);
  await fetch("/", {
    method: "POST",
    headers: { "Content-Type": "application/x-www-form-urlencoded" },
    body: new URLSearchParams(dados).toString(),
  });
}

Não esqueça de colocar <input type="hidden" name="form-name" value="contato" /> dentro do formulário React.

3. Faça o deploy e teste

Depois do deploy, abra a aba Forms no painel da Netlify. O formulário contato deve aparecer na lista. Envie um teste pelo site publicado para confirmar o recebimento.

Como evitar spam no Netlify Forms

Formulários públicos atraem robôs. A Netlify oferece camadas de proteção que você pode combinar:

• Honeypot: o atributo netlify-honeypot aponta para um campo escondido que humanos não preenchem. Se o campo vier preenchido, o envio é descartado.
• reCAPTCHA: é possível adicionar o reCAPTCHA 2 com o atributo data-netlify-recaptcha="true" para exigir uma verificação do usuário.
• Filtro de spam: a Netlify aplica filtragem automática e separa envios suspeitos em uma aba própria no painel, segundo a documentação oficial.

Para a maioria das landing pages, o honeypot já resolve bem e não atrapalha a experiência de quem quer entrar em contato.

Receber notificações e integrar com outras ferramentas

Cada envio pode gerar um e-mail de notificação, configurado em Forms, Form notifications. Também é possível chamar um webhook para enviar os dados a ferramentas de automação, a um CRM ou a uma planilha.

Se você precisa gravar os envios no seu próprio banco, uma alternativa é usar uma Netlify Function ou uma Edge Function do Supabase para receber o formulário e salvar na tabela. Isso dá mais controle, mas exige mais código do que o Netlify Forms puro.

Quando o Netlify Forms não é a melhor opção

O Netlify Forms é ideal para formulários simples de contato, orçamento e newsletter. Considere outra abordagem quando:

• você precisa validar regras de negócio no servidor antes de aceitar o envio;
• o volume de envios é alto e pode ultrapassar o limite do seu plano (confira os limites atuais na página de preços da Netlify);
• os dados precisam ir direto para um banco ou sistema próprio.

Perguntas Frequentes

O Netlify Forms funciona com React e Vite? Sim. Basta incluir uma versão estática do formulário no index.html para que a Netlify o detecte no deploy e enviar os dados do componente React por POST com o campo form-name.

Por que meu formulário não aparece no painel da Netlify? Normalmente porque o formulário só existe no JavaScript do React. A Netlify lê apenas o HTML estático no momento do deploy, então é preciso declarar o formulário no index.html.

Como evitar spam no Netlify Forms? Use o atributo netlify-honeypot com um campo escondido e, se necessário, ative o reCAPTCHA 2 com data-netlify-recaptcha="true". A Netlify também separa envios suspeitos automaticamente.

O Netlify Forms é gratuito? Existe uso gratuito com limite de envios, mas as condições mudam com o tempo. Consulte a página de preços e a documentação da Netlify para ver os limites do seu plano.

Posso salvar os envios no Supabase? Sim. Você pode usar um webhook de notificação ou uma função serverless para receber os dados e gravá-los em uma tabela do Supabase.

Conclusão

Para quem publica sites React e Vite na Netlify, o Netlify Forms entrega um formulário de contato funcional em poucos minutos: formulário estático no index.html, envio por fetch, honeypot contra spam e notificação por e-mail. Na Stormcore, criamos sites e landing pages com formulários integrados a automações e sistemas, para que cada contato chegue ao lugar certo sem trabalho manual.