# Añade un formulario de contacto en Netlify sin Netlify Forms > Usa un formulario de contacto en un sitio de Netlify sin Netlify Forms: sin detección en el build, envíos JSON desde React y un formulario aparte para las deploy previews. Publicado el 2026-10-25 · https://ikiform.com/es/guides/contact-form-static-site/netlify Quita `data-netlify` del formulario y apunta su `action` a tu endpoint de Ikiform; así Netlify sirve la página y nunca toca el envío. Los formularios de React y Vue no necesitan una copia oculta en HTML y pueden enviar JSON. Define otro id de formulario para las deploy previews en `netlify.toml`, porque los hosts de preview no coinciden con tu sitio en **Allowed domains**. ## Qué cambia en Netlify Netlify es el único gran host estático con una función de formularios integrada. Netlify Forms lee tu HTML desplegado después de cada build, encuentra los formularios marcados con `data-netlify` o `netlify` y acepta envíos a tu propio sitio para esos formularios. Cualquier otro envío a una página estática falla, y en Netlify falla con `404`, no con `405`: `Terminal`: ```bash curl -i -X POST -d "message=hello" https://your-site.netlify.app/contact/ ``` `Respuesta`: ```http HTTP/2 404 server: Netlify cache-status: "Netlify Edge"; fwd=method; fwd-status=404 content-length: 0 ``` Ese `404` hace que la gente busque una página que falta y que no falta. Significa que ningún formulario detectado coincidió con el envío. Si usar Netlify Forms o no es otra cuestión, y la [comparativa entre Ikiform y Netlify Forms](https://ikiform.com/alternatives/netlify-forms) la responde con honestidad: si tu sitio va a vivir siempre en Netlify y el formulario es HTML plano, Netlify Forms da menos trabajo. Esta página es para los demás casos. | Tu situación | Por qué estorba Netlify Forms | | --- | --- | | El formulario lo renderiza React, Vue o Svelte | El build analiza HTML estático, así que un formulario renderizado en el cliente necesita un duplicado oculto para que Netlify lo encuentre | | Quieres enviar JSON desde `fetch` | Netlify Forms solo acepta cuerpos urlencoded y multipart | | Puede que el sitio se mude a otro host | El formulario envía a tu propio dominio, así que solo funciona mientras Netlify sirva ese dominio | | Los mensajes deben llegar a un webhook que verificas | Ikiform firma cada entrega con cabeceras de Standard Webhooks y la reintenta | Diagrama: Netlify Forms e Ikiform lado a lado en el mismo sitio de Netlify 1. Con Netlify Forms, Netlify analiza el HTML de cada despliegue en busca de formularios marcados con data-netlify. 2. Un formulario que encontró acepta envíos a tu propio sitio, y Netlify los guarda. 3. Un formulario que no encontró, como uno renderizado con JavaScript sin copia oculta, recibe 404 en cada envío. 4. Con Ikiform, no hay nada que encontrar en el build. 5. El formulario envía directamente a ikiform.com, como HTML o JSON, e Ikiform lo guarda y te envía un email. Ambos pueden convivir en un sitio. Un formulario con data-netlify va a Netlify; un formulario cuyo action es un endpoint de Ikiform va a Ikiform. ## Saca un formulario de Netlify Forms - Quita del formulario `data-netlify` o `netlify`, `netlify-honeypot` y `data-netlify-recaptcha`, y cualquier input oculto `form-name`. Si lo dejas, `form-name` se guarda como un campo más. - Borra la copia estática oculta de un formulario de JavaScript, como la de abajo. Netlify solo la necesitaba para detectar el formulario. - Pon tu endpoint de Ikiform en el `action`, o en la URL del `fetch`. El antiguo `action="/thanks"` pasa al ajuste **Redirect after submit** del formulario. - Descarga primero los envíos anteriores desde la página **Forms** de Netlify. No se mueven solos. `index.html, borra esto`: ```html ``` Deja **form detection** activado si otros formularios del sitio siguen usando Netlify Forms. La documentación de Netlify dice que desactivar la detección es solo para sitios que no usan Netlify Forms. Cuando ya nada lo use, desactivarlo te ahorra un análisis en cada despliegue. ### Qué sustituye a los ajustes antispam de Netlify Netlify pasa Akismet por los envíos y ofrece `netlify-honeypot` y reCAPTCHA. En Ikiform, el honeypot sigue funcionando si pones en **Honeypot field** del formulario el nombre que ya usas, como `bot-field`. La puntuación de spam se aplica a cada envío sin configurar nada, y **Spam check** en **Ikiform** sustituye reCAPTCHA por Cloudflare Turnstile sin claves. Quita el `div` de reCAPTCHA al cambiar. ## Un formulario de React que envía JSON Sin Netlify Forms de por medio, un formulario renderizado en el cliente no necesita duplicado y puede enviar JSON, lo que conserva los tipos y te permite limpiar los valores antes. Este además registra qué contexto de Netlify generó la 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 (