Sin ataduras al cambiar de alojamiento
Netlify Forms depende de su compilación y migrar exige rehacerlo. El formulario de mailcontact es una URL: no cambia en Vercel ni Cloudflare.
integraciones · hosting platform
Un formulario para Netlify independiente de Netlify.
Netlify Forms conecta data-netlify="true" a su panel, con unos 100 envíos gratuitos al mes al escribir y pago después. Los motivos para cambiar son dependencia del alojamiento, paneles que no consultas y mensajes aislados por sitio.
mailcontact es independiente: HTTPS sin detección de compilación, data-netlify ni form-name. El mismo HTML funciona en Netlify, Vercel, Cloudflare o VPS. También obtienes [email protected] sin DNS y avisos de Discord, Slack, email o webhook.
Una bandeja ligera por proyecto con avisos, sin tickets, SLA ni cambios al migrar de alojamiento.
configuración recomendada
Utiliza el script de MailContact con tu diseño.
Añade este HTML a tu sitio o utiliza el generador de formularios. Sustituye el enlace por el de tu formulario. El script alojado inserta la comprobación oculta, gestiona el envío y la verificación automática y conserva el borrador si hay errores. Tú controlas el HTML y el CSS. Los formularios Free muestran un enlace visible «Processed by mailcontact.app»; Pro y Plus no. Los avisos siguen el idioma del navegador; configura data-mailcontact-language="fr" en el formulario para forzar el francés.
contact.html
<form action="https://mailcontact.app/api/forms/your-form-id" method="POST" data-mailcontact-form lang="es" data-mailcontact-language="es">
<input type="hidden" name="_language" value="es" />
<fieldset>
<legend>Contáctanos</legend>
<label>
Nombre (opcional)
<input name="name" type="text" autocomplete="name" maxlength="200" />
</label>
<label>
Correo electrónico
<input name="email" type="email" autocomplete="email" maxlength="320" required />
</label>
<label>
Mensaje
<textarea name="message" rows="5" maxlength="5000" required></textarea>
</label>
<noscript>
<div aria-hidden="true" style="position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;">
<label>Sitio web
<input name="company_website" type="text" tabindex="-1" autocomplete="off" />
</label>
</div>
</noscript>
<button type="submit">Enviar mensaje</button>
</fieldset>
<p data-contact-status role="status" aria-live="polite" aria-atomic="true"></p>
</form>
<script defer src="https://mailcontact.app/forms/v1.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>Para un componente con su propio controlador de envío, carga el mismo script y utiliza MailContact.prepare(form) y MailContact.send() en lugar del marcador automático. Consulta la referencia de interfaces personalizadas para carga, avisos y atribución de Free.
el código
Alternativa: una integración directa para Netlify.
Este ejemplo envía directamente a la API. Mantén el campo obligatorio company_website presente y vacío. Los envíos nativos abren JSON si tienen éxito o una página de verificación si hace falta. Los scripts sin verificación envían los mensajes sospechosos a Spam; el spam claro también se retiene sin alertas ni consumo de cuota. Una respuesta de éxito confirma recepción, incluida revisión, o el descarte silencioso de una trampa rellenada. Consulta protección contra spam para conocer todo el funcionamiento.
contact.html
<!-- No data-netlify attribute, no hidden form-name field -->
<form action="https://mailcontact.app/api/forms/your-form-id" method="POST">
<input type="text" name="name" placeholder="Your name" />
<input type="email" name="email" placeholder="[email protected]" required />
<textarea name="message" placeholder="How can we help?" required></textarea>
<button type="submit">Send</button>
<input name="company_website" type="text" tabindex="-1" autocomplete="off"
style="position:absolute;left:-10000px" aria-hidden="true" />
</form>cómo funciona
Tres pasos de principio a fin.
01
Crear una bandeja
Una bandeja por proyecto. Dale el nombre del sitio y obtén endpoint y email al instante.
02
Dirige tu formulario al endpoint
Sustituye data-netlify="true" por action y despliega. Sin plugin, detección ni interruptores del panel.
03
Recibe avisos
Añade Discord, Slack, email o webhook para recibir avisos donde ya estás.
por qué mailcontact
Pensado para funcionar con Netlify.
Una dirección de email real, además de un formulario
Netlify solo recibe formularios. mailcontact también ofrece [email protected] y reúne emails y envíos.
Una bandeja para cualquier alojamiento
¿Proyectos en Netlify, Vercel y GitHub Pages? Cada uno tiene bandeja en el mismo lugar, no listas repartidas por proveedores.
preguntas frecuentes
Netlify + mailcontact: tus preguntas resueltas
¿Netlify Forms es gratis?
En el momento de escribir, Netlify Forms ofrece unos 100 envíos gratis al mes y después un complemento de pago. Si permaneces allí y tienes poco volumen, es razonable. La contrapartida es depender del alojamiento.
¿Qué pasa al dejar Netlify?
Con Netlify Forms, los envíos dejan de funcionar al cambiar de alojamiento porque dependen de su compilación. mailcontact usa un endpoint externo: el mismo código sigue funcionando al mudarte.
¿Necesito data-netlify o un campo oculto form-name?
No. mailcontact identifica el formulario por su URL. email y message son obligatorios; name y subject, opcionales; company_website debe existir y estar vacío. CORS abierto permite despliegues de ramas y vistas previas sin ajustes.
¿Cómo muestro un aviso de éxito al enviar?
Utiliza el script o MailContact.send() para permanecer en la página y mostrar el éxito. No hay redirección configurable para envíos nativos.
relacionado
También funciona con
Una bandeja por cada proyecto de Netlify que publiques.
Formularios y una dirección de email real, juntos, con avisos en tus herramientas. Empieza con una cuenta gratuita.
Crear formulario gratisSin tarjeta de crédito. Free incluye un proyecto y 50 mensajes de formulario al mes.