Guías por framework

Añade un formulario de contacto a un sitio Hugo

Hugo genera archivos HTML simples, así que en tu hosting no hay nada que reciba un formulario. Un partial que envía a embedio lo resuelve, y guardar la clave en la configuración del sitio hace que un solo cambio actualice todas las páginas que lo usan.

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. Añade la clave a tu configuración

hugo.toml

[params]
  embedioEndpoint = "https://api.tryembedio.com/f/frm_your_form_key"

3. Crea el partial

layouts/partials/contact-form.html

<form action="{{ site.Params.embedioEndpoint }}" 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/" | relURL }}">

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

Inclúyelo desde cualquier plantilla con {{ partial "contact-form.html" . }} y crea content/thanks.md para la página a la que llega la gente después.

4. Opcional: un shortcode para páginas Markdown

Para insertar el formulario en una página Markdown como content/contact.md, envuelve el partial en un shortcode:

layouts/shortcodes/contact-form.html

{{ partial "contact-form.html" .Page }}

Después escribe {{< contact-form >}} donde deba aparecer el formulario.

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.

Estado	error	Qué significa
404	`form_not_found`	La clave es incorrecta o el formulario se borró.
422	`validation_failed`	Falló una regla de validación; `fields` lista `{ field, message }` por cada una.
402	`monthly_limit_reached`	La cuenta agotó sus envíos del mes.
413	`file_too_large`	Un archivo subido supera los 10MB.
400	`invalid_file_type`	El tipo de archivo no se acepta (sí se aceptan imágenes, PDF, documentos de Office, TXT y CSV).
429		Más de 20 envíos por minuto desde una misma IP. Espera y reintenta.

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