Eleventy

Eleventy genera HTML estático, así que el formulario se envía sin JavaScript en el cliente. Un shortcode mantiene el markup en un solo lugar y funciona igual en archivos Nunjucks, Liquid y Markdown.

Configúralo

1. Añade el shortcode

   const escape = (value) => String(value).replace(/[&<>"']/g, (char) => `&#${char.charCodeAt(0)};`);
   
   export default function (eleventyConfig) {
     eleventyConfig.addShortcode("ikiform", (formId, thanks = "", subject = "") =>
       [
         `<form class="ikiform" action="https://ikiform.com/f/${encodeURIComponent(formId)}" method="post">`,
         '<label>Email <input name="email" type="email" autocomplete="email" required></label>',
         '<label>Message <textarea name="message" rows="5"></textarea></label>',
         thanks && `<input type="hidden" name="_redirect" value="${escape(thanks)}">`,
         subject && `<input type="hidden" name="_subject" value="${escape(subject)}">`,
         '<input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden>',
         '<button type="submit">Send</button>',
         "</form>",
       ]
         .filter(Boolean)
         .join("\n"),
     );
   }

   • Las líneas se unen sin líneas en blanco a propósito. En Markdown, una línea en blanco termina un bloque HTML, y el resto del formulario se trataría como texto.
   • Usa la sintaxis de módulos ES. Si tu package.json no tiene "type": "module", llama al archivo eleventy.config.mjs.

2. Guarda el id del formulario en los datos globales

   export default {
     formId: process.env.IKIFORM_FORM_ID ?? "frm_xxxxxxxxxxxxxxxx",
     thanks: "https://example.com/thanks/",
   };

   Los datos globales están disponibles en todas las plantillas como ikiform. La URL de agradecimiento debe ser absoluta y https:, porque Ikiform ignora las demás redirecciones.

3. Úsalo

   ---
   title: Contact
   ---
   
   Questions about pricing? Write to us.
   
   {% ikiform ikiform.formId, ikiform.thanks, "Pricing question" %}

   Los archivos Markdown se procesan con Liquid por defecto, así que la etiqueta funciona tal como está escrita. Déjala en su propia línea y no la sangres con cuatro espacios, o Markdown la mostrará como un bloque de código. La misma etiqueta funciona en archivos .njk y .liquid.

_redirect solo se sigue cuando el formulario tiene dominios permitidos que incluyen tu sitio. Consulta Reglas de _redirect.

Dominios permitidos

Incluye producción y cada host de vista previa. Los sitios de Eleventy suelen desplegarse en Netlify o Cloudflare Pages, que gestionan las vistas previas de forma distinta.

• Nunca añadas netlify.app ni pages.dev solos. Coincidiría cualquier sitio de ese host, incluidos los de otras personas.

Lista de pruebas

1. Ejecuta el servidor de desarrollo y mira el código fuente de la página. El formulario debería ser HTML normal, no estar dentro de un bloque <pre><code>.
2. Envía en local con localhost en los dominios permitidos y confirma que el envío aparece en Ikiform.
3. Despliega una vista previa y vuelve a enviar desde el host de la vista previa.
4. Envía en producción y confirma que llegas a tu página de agradecimiento.

Solución de problemas

Relacionado

• HugoUn partial y un shortcode para los archivos de contenido.
• JekyllUn include y la configuración de GitHub Pages.
• Formularios HTMLRedirecciones, campos reservados y el honeypot.
• Dominios permitidosCómo se comparan los orígenes y qué pasa cuando no coinciden.