Tu sitio en Netlify se ve impecable. Carga rápido, tiene buena estructura y el formulario de contacto luce profesional. Pero cuando alguien lo llena y presiona «Enviar», el mensaje nunca llega. A veces aparece un error. Otras veces simplemente se recarga la página y nada pasa. El problema no está en tu diseño ni en tu HTML. Está en entender cómo funciona Netlify y cuál es la forma correcta de procesar formularios ahí. En esta guía te lo explicamos desde cero.
Netlify y los formularios: lo que muchos no saben antes de empezar
Netlify es una plataforma de alojamiento enfocada en sitios estáticos y aplicaciones frontend. Esto significa que, al igual que GitHub Pages, no ejecuta código del lado del servidor por defecto. Un formulario HTML que use action="enviar.php" o que dependa de un script propio sencillamente no tiene dónde ejecutarse.
Ahora bien, aquí viene un detalle importante que diferencia a Netlify de GitHub Pages: Netlify sí tiene una solución nativa para formularios, llamada Netlify Forms. Funciona sin backend, sin configuración de servidor y procesa los envíos directamente desde su infraestructura. El problema es que requiere una configuración específica que muchos usuarios pasan por alto, y que además tiene limitaciones en el plan gratuito que conviene conocer de antemano.
En esta guía vamos a cubrir las dos opciones reales que tienes:
- Netlify Forms: la solución nativa de Netlify, integrada directamente en tu sitio.
- Formspree: la alternativa externa más usada, más flexible y sin las limitaciones del plan gratuito de Netlify.
Al final podrás decidir cuál se adapta mejor a tu caso con información completa.
Opción 1 — Netlify Forms: la solución nativa que ya viene incluida
Netlify Forms es una funcionalidad propia de Netlify que permite recibir envíos de formularios sin ningún backend propio. Netlify detecta el formulario en tu HTML durante el proceso de despliegue (deploy) y se encarga de procesar los datos cuando alguien lo envía.
El plan gratuito de Netlify incluye hasta 100 envíos de formulario por mes. Para un portafolio personal, una landing page o un sitio de negocio pequeño, esto suele ser suficiente.
Cómo activar Netlify Forms en tu formulario HTML
La activación es sorprendentemente simple. Solo tienes que agregar el atributo netlify (o su equivalente data-netlify="true") a tu etiqueta <form>. Netlify detecta ese atributo durante el deploy y automáticamente activa el procesamiento del formulario.
<form name="contacto" method="POST" data-netlify="true">
<label for="nombre">Nombre</label>
<input type="text" id="nombre" name="nombre" required>
<label for="email">Correo electrónico</label>
<input type="email" id="email" name="email" required>
<label for="mensaje">Mensaje</label>
<textarea id="mensaje" name="mensaje" required></textarea>
<button type="submit">Enviar</button>
</form>Dos detalles críticos que debes incluir sí o sí para que funcione:
- El atributo
nameen la etiqueta<form>(no en los campos, sino en el formulario mismo). Netlify usa ese nombre para identificar el formulario en su panel. - El atributo
data-netlify="true"o simplementenetlifycomo atributo booleano.
Cómo ver los envíos recibidos en Netlify
Una vez configurado y desplegado el sitio, los mensajes que lleguen a través del formulario aparecerán en el panel de control de Netlify, en la sección Forms de tu sitio. Desde ahí puedes verlos todos, exportarlos y configurar notificaciones por correo electrónico para que cada envío llegue también a tu bandeja de entrada.
Para activar las notificaciones de correo ve a: Netlify → tu sitio → Forms → Form notifications → Add notification → Email notification. Escribe la dirección de correo donde quieres recibir los mensajes y guarda.
Anti-spam integrado: reCAPTCHA con Netlify Forms
Netlify Forms incluye protección anti-spam básica. Si quieres activar reCAPTCHA de Google como capa adicional, solo agrega este campo oculto dentro de tu formulario:
<div data-netlify-recaptcha="true"></div>Netlify se encarga del resto automáticamente. No necesitas crear una cuenta de reCAPTCHA ni configurar nada adicional.
La limitación más importante de Netlify Forms que debes conocer
Netlify Forms solo funciona si tu sitio está alojado en Netlify y se despliega mediante su proceso de build. Si tienes el sitio en otro hosting y solo usas Netlify para algún propósito secundario, esta opción no aplica.
Además, si tu sitio usa un framework como React, Vue o Next.js (lo que Netlify llama una SPA o Single Page Application), la detección automática del formulario durante el build puede no funcionar correctamente porque el HTML se genera dinámicamente. En ese caso necesitas una configuración adicional o directamente la opción 2 de esta guía.
Netlify Forms es ideal para sitios HTML estáticos desplegados directamente en Netlify. Para cualquier otra situación, Formspree es más confiable y más fácil de implementar.
Opción 2 — Formspree: más flexible, funciona en cualquier situación
Si tu sitio en Netlify usa un framework de JavaScript, si prefieres no depender de las funciones nativas de Netlify, o si simplemente quieres una solución que también funcione si algún día migras de plataforma, Formspree es la alternativa más sólida.
La lógica es exactamente la misma que con cualquier sitio estático: tu formulario HTML apunta a un endpoint externo de Formspree, ese servicio recibe los datos y te los manda por correo. No importa si tu sitio está en Netlify, GitHub Pages, Webflow o cualquier otro hosting.
Para entender la solución completa con Formspree desde cero —incluyendo cómo crear tu cuenta, obtener tu endpoint y configurar el formulario paso a paso— puedes consultar nuestra guía principal sobre formulario de contacto sin servidor, donde lo explicamos con todo detalle.
Configuración rápida de Formspree en Netlify
El proceso es idéntico al de cualquier sitio estático. Solo necesitas modificar el atributo action de tu formulario:
<form action="https://formspree.io/f/tucodigo" method="POST">
<input type="text" name="nombre" placeholder="Tu nombre" required>
<input type="email" name="email" placeholder="Tu correo" required>
<textarea name="mensaje" placeholder="Tu mensaje" required></textarea>
<button type="submit">Enviar mensaje</button>
</form>Reemplaza tucodigo con el endpoint que Formspree te asigna al crear tu formulario en su panel. Sube los cambios, despliega en Netlify y el formulario estará funcionando.
Netlify Forms vs Formspree: cuándo usar cada uno
| Situación | Recomendación |
|---|---|
| Sitio HTML estático alojado en Netlify | Netlify Forms (más integrado, cero configuración extra) |
| Sitio en React, Vue o Next.js en Netlify | Formspree (más confiable con frameworks JS) |
| Sitio que podría migrar de plataforma pronto | Formspree (funciona en cualquier hosting) |
| Necesitas más de 100 envíos/mes gratis | Formspree no tiene ese límite en el mismo rango |
| Quieres ver los envíos directamente en Netlify | Netlify Forms (panel integrado en el mismo lugar) |
| Necesitas integraciones con Zapier, Slack, Sheets | Formspree (plan de pago con más integraciones) |
Formulario con respuesta asíncrona en Netlify usando JavaScript
Si quieres que después del envío no haya redirección y el mensaje de confirmación aparezca en la misma página, puedes manejar el formulario con JavaScript. Esto funciona tanto con Netlify Forms como con Formspree.
Este ejemplo es para Netlify Forms con fetch:
<form id="formulario-contacto" name="contacto" method="POST" data-netlify="true">
<input type="hidden" name="form-name" value="contacto">
<input type="text" name="nombre" placeholder="Tu nombre" required>
<input type="email" name="email" placeholder="Tu correo" required>
<textarea name="mensaje" placeholder="Tu mensaje" required></textarea>
<button type="submit">Enviar</button>
</form>
<div id="confirmacion" style="display:none;">
¡Mensaje recibido! Te responderé a la brevedad.
</div>
<script>
const form = document.getElementById('formulario-contacto');
form.addEventListener('submit', async function(e) {
e.preventDefault();
const datos = new FormData(form);
const respuesta = await fetch('/', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: new URLSearchParams(datos).toString()
});
if (respuesta.ok) {
form.style.display = 'none';
document.getElementById('confirmacion').style.display = 'block';
}
});
</script>Un detalle crítico cuando usas JavaScript con Netlify Forms: debes incluir el campo oculto <input type="hidden" name="form-name" value="contacto"> dentro del formulario. Sin él, Netlify no puede identificar a qué formulario pertenece el envío cuando se hace de forma asíncrona y los mensajes no llegan.
Errores frecuentes al configurar el formulario de contacto en Netlify
El formulario no aparece en el panel de Netlify Forms
Netlify detecta los formularios durante el proceso de build, no en tiempo real. Si agregaste el atributo data-netlify="true" pero el formulario no aparece en el panel, verifica que hayas hecho un nuevo deploy después de agregar el atributo. Un simple redeploy sin cambios de código resuelve esto en la mayoría de los casos.
Los envíos llegan al panel pero no al correo
Las notificaciones por correo de Netlify Forms no están activadas por defecto. Tienes que configurarlas manualmente desde el panel: Forms → Form notifications → Email notification. Sin ese paso, los mensajes se guardan en Netlify pero no te llega ningún aviso.
Error 404 al enviar el formulario con JavaScript
Cuando usas fetch para enviar el formulario de forma asíncrona a Netlify Forms, la URL de destino debe ser '/' (la raíz de tu sitio), no el endpoint de Netlify directamente. Netlify intercepta esa petición y la procesa internamente. Si apuntas a otra URL o dejas el action vacío, puede generar este error.
El formulario funciona en desarrollo pero no en producción
Netlify Forms solo funciona cuando el sitio está desplegado en los servidores de Netlify. En un entorno de desarrollo local (localhost), los formularios no se procesan. Para pruebas locales, la opción más práctica es temporalmente apuntar el formulario a un endpoint de Formspree, que sí funciona desde localhost.
El formulario en un sitio React no es detectado por Netlify
En sitios con frameworks de JavaScript, Netlify genera el HTML de forma dinámica y no siempre puede detectar los atributos del formulario durante el build. La solución oficial de Netlify para este caso es agregar un archivo index.html estático en la carpeta public con el formulario HTML en blanco (solo como referencia para que Netlify lo detecte) y manejar el envío con JavaScript. Es una solución que funciona pero añade complejidad. En estos casos, usar Formspree directamente es mucho más sencillo.
Preguntas frecuentes sobre formularios en Netlify
¿Netlify Forms es completamente gratuito?
El plan gratuito de Netlify incluye 100 envíos de formulario por mes. Si superas ese límite, Netlify te notificará pero no bloqueará automáticamente los envíos de inmediato: los envíos adicionales pueden generar cargos o requerir actualizar tu plan. Vale la pena revisarlo si esperas volumen alto de mensajes.
¿Puedo tener varios formularios en el mismo sitio?
Sí. Netlify Forms permite múltiples formularios en el mismo sitio sin costo adicional dentro del plan gratuito, siempre que el total de envíos no supere los 100 mensuales entre todos. Cada formulario debe tener un atributo name distinto para que Netlify los diferencie en su panel.
¿Los datos de los formularios son seguros en Netlify?
Netlify transmite y almacena los datos de los formularios en sus servidores cifrados. Para un formulario de contacto estándar (nombre, correo, mensaje) esto es completamente adecuado. Si manejas información sensible o confidencial, deberías revisar la política de privacidad de Netlify antes de usar esta funcionalidad.
¿Puedo exportar los envíos de formulario desde Netlify?
Sí. Desde el panel de Netlify, en la sección Forms, puedes ver todos los envíos y exportarlos en formato CSV. Esto es útil si quieres llevar un registro de todos los mensajes recibidos o importarlos a otra herramienta.
¿Puedo usar Netlify Forms y Formspree al mismo tiempo?
Técnicamente sí, aunque no tiene mucho sentido tenerlos activos en el mismo formulario. Lo que sí es una práctica válida es usar Netlify Forms para algunos formularios de tu sitio y Formspree para otros, dependiendo de los requerimientos específicos de cada uno.
Resumen: cuál elegir según tu situación
Si tu sitio en Netlify es HTML estático y no planeas migrarlo pronto, Netlify Forms es la opción más cómoda: cero dependencias externas, integrado directamente en tu panel y con 100 envíos mensuales gratuitos. Solo necesitas agregar un atributo a tu formulario y configurar la notificación de correo.
Si tu sitio usa React, Vue u otro framework, si quieres una solución que funcione independientemente de la plataforma de hosting, o si buscas más integraciones en el futuro, Formspree es más flexible y se configura igual de rápido sin las complicaciones de la detección en el build.
En cualquiera de los dos casos, tu formulario de contacto en Netlify puede estar funcionando hoy mismo, sin contratar a nadie y sin pagar un servidor. ¿Tienes dudas sobre algún paso en particular o estás usando un framework específico? Déjanos un comentario y te ayudamos con tu caso.