integraciones · hosting platform

Un formulario en GitHub Pages sin dejar GitHub Pages.

GitHub Pages solo sirve archivos, sin funciones ni rutas. Envía HTML al endpoint externo de mailcontact y recibe en la bandeja con Discord, Slack o email.

Nada que instalar ni compilar. Funciona en index.html, layouts o includes Jekyll y cualquier sitio de gh-pages. Guarda, publica y listo.

Obtienes email real ([email protected]) sin publicar tu correo personal en el repositorio.

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 GitHub Pages.

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.

index.html

<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="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 repositorio con endpoint y email al instante.

Guarda el formulario en el repositorio

Pega en index.html o el include de contacto y publica en tu rama Pages.

Recibe avisos

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

por qué mailcontact

Pensado para funcionar con GitHub Pages.

Dentro de los límites de Pages

GitHub Pages no ejecuta servidor y no hace falta: mailcontact recibe y el repositorio sigue estático.

Sin email en tu repositorio público

mailto expone tu dirección. Un endpoint y [email protected] mantienen tu email personal fuera del repositorio.

Una bandeja por repositorio publicado

Documentación, portfolio o página de proyecto: cada sitio tiene bandeja y dirección propias.

preguntas frecuentes

GitHub Pages + mailcontact: tus preguntas resueltas

¿Puede GitHub Pages recibir formularios por sí solo?

No. GitHub Pages sirve archivos estáticos y no ejecuta servidor ni procesa POST. Los formularios necesitan un endpoint externo como mailcontact.

¿Funciona con Jekyll en GitHub Pages?

Sí. Funciona en layouts, includes o Markdown con HTML. La compilación Jekyll de GitHub no lo altera.

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

Utiliza el script o MailContact.send() para avisos y verificación. CORS abierto permite cualquier github.io o dominio propio. No hay redirección configurable para envíos nativos.

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

Por completo. Tú controlas el código. mailcontact solo proporciona el endpoint. Utiliza tu CSS, las clases de Jekyll o lo que prefieras; no hay widget ni iframe.

relacionado

También funciona con

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