# Adicione um formulário de contato na Netlify sem o Netlify Forms > Rode um formulário de contato num site da Netlify sem o Netlify Forms: sem detecção no build, envios JSON a partir do React e um formulário separado para deploy previews. Publicado em 2026-10-25 · https://ikiform.com/pt-br/guides/contact-form-static-site/netlify Deixe o `data-netlify` fora do formulário e aponte o `action` dele para o seu endpoint do Ikiform; assim a Netlify serve a página e nunca mexe no envio. Formulários em React e Vue não precisam de uma cópia HTML oculta e podem enviar JSON. Defina um id de formulário diferente para os deploy previews no `netlify.toml`, porque os hosts de preview não correspondem ao seu site em **Allowed domains**. ## O que muda na Netlify A Netlify é o único grande host estático com um recurso de formulários embutido. O Netlify Forms lê o HTML publicado depois de cada build, encontra os formulários marcados com `data-netlify` ou `netlify` e aceita envios para o seu próprio site nesses formulários. Todo outro envio para uma página estática falha, e na Netlify ele falha com `404`, não `405`: `Terminal`: ```bash curl -i -X POST -d "message=hello" https://your-site.netlify.app/contact/ ``` `Resposta`: ```http HTTP/2 404 server: Netlify cache-status: "Netlify Edge"; fwd=method; fwd-status=404 content-length: 0 ``` Esse `404` faz as pessoas caçarem uma página faltando que não está faltando. Ele significa que nenhum formulário detectado correspondeu ao envio. Usar ou não o Netlify Forms é outra questão, e a [comparação entre Ikiform e Netlify Forms](https://ikiform.com/alternatives/netlify-forms) responde com honestidade: se o seu site vai ficar para sempre na Netlify e o formulário é HTML simples, o Netlify Forms dá menos trabalho. Esta página é para os outros casos. | Sua situação | Por que o Netlify Forms atrapalha | | --- | --- | | O formulário é renderizado por React, Vue ou Svelte | O build analisa HTML estático, então um formulário renderizado no cliente precisa de uma cópia oculta para a Netlify encontrar | | Você quer enviar JSON com `fetch` | O Netlify Forms só aceita corpos urlencoded e multipart | | O site pode mudar de host | O formulário envia para o seu próprio domínio, então só funciona enquanto a Netlify servir esse domínio | | As mensagens devem chegar a um webhook que você verifica | O Ikiform assina cada entrega com headers do Standard Webhooks e tenta de novo quando falha | Diagrama: Netlify Forms e Ikiform lado a lado no mesmo site da Netlify 1. Com o Netlify Forms, a Netlify analisa o HTML de cada deploy em busca de formulários marcados com data-netlify. 2. Um formulário encontrado aceita envios para o seu próprio site, e a Netlify os armazena. 3. Um formulário não encontrado, como um renderizado por JavaScript sem cópia oculta, recebe 404 em todo envio. 4. Com o Ikiform, nada precisa ser encontrado no build. 5. O formulário envia direto para ikiform.com, como HTML ou JSON, e o Ikiform armazena e manda um e-mail para você. Os dois podem conviver num site. Um formulário com data-netlify vai para a Netlify; um formulário cujo action é um endpoint do Ikiform vai para o Ikiform. ## Tire um formulário do Netlify Forms - Remova `data-netlify` ou `netlify`, `netlify-honeypot` e `data-netlify-recaptcha` do formulário, e qualquer input oculto `form-name`. Se ficar, o `form-name` é armazenado como um campo comum. - Apague a cópia estática oculta de um formulário JavaScript, como a de baixo. A Netlify só precisava dela para detectar o formulário. - Defina o `action`, ou a URL do `fetch`, como o seu endpoint do Ikiform. O antigo `action="/thanks"` vai para a configuração **Redirect after submit** do formulário. - Baixe antes os envios antigos na página **Forms** da Netlify. Eles não migram sozinhos. `index.html, apague isto`: ```html ``` Deixe o **form detection** ligado se outros formulários do site ainda usam o Netlify Forms. A documentação da Netlify diz que desligar a detecção é só para sites que não usam o Netlify Forms. Quando nada mais o usar, desligá-lo economiza uma análise a cada deploy. ### O que substitui as configurações de spam da Netlify A Netlify roda o Akismet nos envios e oferece `netlify-honeypot` e reCAPTCHA. No Ikiform, o honeypot continua funcionando se você definir o **Honeypot field** do formulário com o nome que já usa, como `bot-field`. A pontuação de spam roda em todo envio sem configuração, e o **Spam check** definido como **Ikiform** troca o reCAPTCHA pelo Cloudflare Turnstile, sem chaves. Remova a `div` do reCAPTCHA quando fizer a troca. ## Um formulário React que envia JSON Sem o Netlify Forms no caminho, um formulário renderizado no cliente não precisa de cópia e pode enviar JSON, o que mantém os tipos intactos e permite limpar os valores antes. Este também registra qual contexto da Netlify gerou a página: `src/ContactForm.tsx`: ```tsx import { type FormEvent, useState } from "react"; const ENDPOINT = `https://ikiform.com/f/${import.meta.env.VITE_IKIFORM_FORM_ID}`; interface Message { name: string; email: string; message: string; context: string; } export function ContactForm() { const [sent, setSent] = useState(false); const [error, setError] = useState(""); async function onSubmit(event: FormEvent) { event.preventDefault(); const data = new FormData(event.currentTarget); const body: Message & Record = { name: String(data.get("name") ?? "").trim(), email: String(data.get("email") ?? "").trim(), message: String(data.get("message") ?? "").trim(), context: import.meta.env.VITE_CONTEXT ?? "local", _gotcha: String(data.get("_gotcha") ?? ""), }; setError(""); const response = await fetch(ENDPOINT, { method: "POST", headers: { "Content-Type": "application/json", Accept: "application/json" }, body: JSON.stringify(body), }).catch(() => null); const result = await response?.json().catch(() => null); if (result?.ok) return setSent(true); const fields: Record = result?.error?.fields ?? {}; setError(Object.values(fields)[0]?.[0] ?? result?.error?.message ?? "Couldn't send. Try again."); } if (sent) return

Got it. I'll answer from my own inbox, usually the same day.

; return (