Añade un formulario de contacto a GitHub Pages

1. Crea el formulario en embedio

Regístrate (el plan Gratis incluye 500 envíos al mes y no pide tarjeta), crea un formulario y copia su clave. Tiene la forma frm_ seguida de diez caracteres. En todo lo que sigue, cambia frm_your_form_key por la tuya.

La clave del formulario está pensada para ser pública: solo permite enviar a ese formulario, nunca leer nada. Puedes ponerla en código del cliente y en tu repositorio.

2. HTML simple

Pega esto en cualquier página. En un sitio de proyecto (usuario.github.io/repo/), incluye la ruta del repositorio en _redirect, por ejemplo /repo/thanks.html.

<form action="https://api.tryembedio.com/f/frm_your_form_key" method="POST">
  <label for="email">Email</label>
  <input id="email" type="email" name="email" required>

  <label for="message">Message</label>
  <textarea id="message" name="message" required></textarea>

  <!-- Honeypot: hidden from people, filled in by bots -->
  <input type="text" name="_gotcha" tabindex="-1" autocomplete="off" style="display:none">

  <!-- Where to send people after a successful submit (same site) -->
  <input type="hidden" name="_redirect" value="/thanks.html">

  <button type="submit">Send</button>
</form>

3. Con Jekyll

Pon el endpoint en _config.yml y el formulario en un include, y relative_url se ocupa de la ruta del sitio de proyecto.

embedio_endpoint: "https://api.tryembedio.com/f/frm_your_form_key"

<form action="{{ site.embedio_endpoint }}" method="POST">
  <label for="email">Email</label>
  <input id="email" type="email" name="email" required>

  <label for="message">Message</label>
  <textarea id="message" name="message" required></textarea>

  <!-- Honeypot: hidden from people, filled in by bots -->
  <input type="text" name="_gotcha" tabindex="-1" autocomplete="off" style="display:none">

  <!-- Where to send people after a successful submit (same site) -->
  <input type="hidden" name="_redirect" value="{{ '/thanks.html' | relative_url }}">

  <button type="submit">Send</button>
</form>

Úsalo con {% include contact-form.html %} en cualquier página o layout.

4. Opcional: sin recargar la página

Cambia el action por un atributo data-embedio y carga el script de embedio. Envía sin recargar, vacía el formulario y escribe el resultado en cualquier elemento marcado con data-embedio-status.

<form data-embedio="frm_your_form_key">
  <label for="email">Email</label>
  <input id="email" type="email" name="email" required>

  <label for="message">Message</label>
  <textarea id="message" name="message" required></textarea>

  <input type="text" name="_gotcha" tabindex="-1" autocomplete="off" style="display:none">
  <button type="submit">Send</button>
  <p data-embedio-status role="status"></p>
</form>

<script src="https://api.tryembedio.com/sdk.js" defer></script>

Spam y validación

• Honeypot: un campo oculto _gotcha. Las personas nunca lo ven; los bots que lo rellenan reciben un éxito aparente y no se guarda nada.
• Doble clic: un envío idéntico segundos después del primero se descarta en lugar de guardarse dos veces.
• Nivel de confianza: cada formulario tiene un ajuste relajado, equilibrado o estricto para ráfagas y contenido repetido. Los envíos marcados quedan aparte para revisarlos, no se borran.
• Reglas en el servidor: las validaciones como obligatorio, email o longitud máxima se ejecutan en embedio, así que se cumplen aunque alguien se salte tu front end.

Recibir avisos

Cada envío aparece en tu panel al instante. Para recibir además un email por cada uno, añade una conexión de Email al formulario; funciona en todos los planes, incluido Gratis. Slack, Discord, Zapier, webhooks y las demás conexiones vienen con cualquier plan de pago, desde $9/mes.

Errores que puedes ver

Con una petición JSON, cada fallo vuelve como un código de estado más { "error": "..." }. Un envío HTML normal recibe en su lugar una página de error legible.

La lista completa, con los errores propios de cada módulo, está en la referencia de la API.