integraciones · static site generator

Un formulario para Eleventy sin crear servidor.

Eleventy compiles templates to plain HTML, so a contact form is one include away: point a standard <form> at your mailcontact endpoint and submissions land in your project's inbox, with a notification in Discord, Slack, email, or a webhook. No serverless function, no mail service, no plugin.

El mismo HTML funciona en Nunjucks, Liquid, WebC, Markdown y otros motores. Guárdalo una vez en _includes y úsalo en cualquier página.

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

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.

_includes/contact-form.njk

<form action="https://mailcontact.app/api/forms/your-form-id" method="POST">
  <label for="name">Name</label>
  <input type="text" id="name" name="name" />

  <label for="email">Email</label>
  <input type="email" id="email" name="email" required />

  <label for="message">Message</label>
  <textarea id="message" name="message" 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.

Añade el include

Guárdalo en _includes/contact-form.njk y usa {% include "contact-form.njk" %} en tu página. Aplica tu CSS.

Recibe avisos

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

por qué mailcontact

Pensado para funcionar con Eleventy.

Sigue siendo un sitio estático

Sin Netlify Functions, serverless ni plugins de Eleventy. La salida sigue siendo HTML para cualquier alojamiento estático.

Un código para cualquier lenguaje de plantillas

11ty conserva el HTML en Nunjucks, Liquid, WebC y Markdown: el include funciona con cualquier motor.

Una bandeja por proyecto de 11ty

Eleventy facilita sitios pequeños. Dales bandeja y dirección propias en vez de mezclar el correo.

preguntas frecuentes

Eleventy + mailcontact: tus preguntas resueltas

¿Necesita un formulario de Eleventy servidor o función serverless?

No. El formulario envía directamente a mailcontact, que guarda y notifica. La compilación 11ty sigue estática.

¿Funciona con cualquier alojamiento (GitHub Pages, Netlify, Cloudflare Pages)?

Sí. Funciona donde sirvas Eleventy, incluido GitHub Pages, aunque no gestione formularios.

¿Puedo adaptar el formulario al diseño de mi sitio?

Por completo. mailcontact solo recibe el POST. El código es tuyo y utiliza tu hoja de estilos. Añade clases, reorganiza los campos o intégralo en tu diseño.

¿Cómo muestro un aviso de éxito tras el envío?

Utiliza el script o MailContact.send() para envío, verificación y avisos (el endpoint devuelve JSON). No hay redirección configurable.

relacionado

También funciona con

Una bandeja por cada proyecto de Eleventy 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.