integraciones · framework

Formulario para Astro: sin isla, adaptador ni servidor.

Astro no necesita SSR, API ni isla para un formulario. Genera HTML: dirige action a mailcontact y los mensajes llegan a la bandeja, con Discord, Slack, email o webhook.

No envía JavaScript, funciona con salida estática en cualquier alojamiento y sigue al añadir adaptador: es HTML en .astro, no plugin ni ruta.

Crear una cuenta Leer documentación

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 Astro.

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.

src/pages/contact.astro

---
// No frontmatter needed: the form is plain HTML.
---

<form action="https://mailcontact.app/api/forms/your-form-id" method="POST">
  <input type="text" name="name" placeholder="Your name" required />
  <input type="email" name="email" placeholder="[email protected]" required />
  <textarea name="message" placeholder="What's on your mind?" 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.

Crear una bandeja

Una bandeja por proyecto. Dale el nombre del sitio y obtén endpoint y email al instante.

Pega el formulario

Pega el código en cualquier página o componente .astro: src/pages/contact.astro, pie o layout. Tú decides el estilo.

Recibe avisos

Añade Discord, Slack, email o webhook. Los mensajes avisan donde ya estás.

por qué mailcontact

Pensado para funcionar con Astro.

Sin JavaScript ni islas

Sin client:load, componentes ni hidratación. HTML estático, justo lo que Astro sirve mejor.

Sin adaptador SSR

Los endpoints de Astro requieren adaptador y servidor. Un endpoint externo conserva la compilación estática: astro build, subir y listo.

Una bandeja por cada sitio publicado

Astro facilita sitios, documentación y proyectos personales. Cada uno recibe bandeja y dirección propias sin mezclarse con tu correo.

preguntas frecuentes

Astro + mailcontact: tus preguntas resueltas

¿Puede Astro recibir formularios sin servidor?

No por sí solo. Un Astro estático no tiene proceso que reciba POST. Dirige action a mailcontact: sus servidores reciben y tu sitio sigue estático.

¿Funciona en Netlify, Vercel, GitHub Pages o Cloudflare Pages?

Sí. Acepta cualquier dominio y funciona donde alojes el sitio estático. Sin adaptador, funciones ni herramientas propias del proveedor.

¿Cómo muestro el éxito sin abandonar la página?

Utiliza el script o MailContact.send() para envío, verificación y avisos en la página. No hay redirección configurable para envíos nativos.

¿Puedo utilizar Tailwind o estilos locales de Astro?

Yes. It's your markup in your page, so scoped <style> blocks, Tailwind classes, or global CSS all apply as usual. mailcontact only cares about the field names: email and message are required, name and subject are optional; company_website must also be present and empty.

relacionado

También funciona con

Una bandeja por cada proyecto de Astro que publiques.

Formularios y una dirección de email real, juntos, con avisos en tus herramientas. Empieza con una cuenta gratuita.

Crear formulario gratis

Sin tarjeta de crédito. Free incluye un proyecto y 50 mensajes de formulario al mes.