Eleventy

Eleventy outputs static HTML, so the form posts without any client JavaScript. A shortcode keeps the markup in one place and works the same in Nunjucks, Liquid and Markdown files.

Set it up

1. Add the 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"),
     );
   }

   • The lines are joined without blank lines on purpose. In Markdown, a blank line ends an HTML block, and the rest of the form would be treated as text.
   • This uses ES module syntax. If your package.json doesn't have "type": "module", name the file eleventy.config.mjs.

2. Keep the form id in global data

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

   Global data is available in every template as ikiform. The thank-you URL must be absolute and https:, because Ikiform ignores other redirects.

3. Use it

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

   Markdown files are processed with Liquid by default, so the tag works there as written. Keep it on its own line and don't indent it by four spaces, or Markdown renders it as a code block. The same tag works in .njk and .liquid files.

_redirect is followed only when the form has allowed domains that include your site. See Rules for _redirect.

Allowed domains

List production and each preview host. Eleventy sites are commonly deployed to Netlify or Cloudflare Pages, which handle previews differently.

• Never add netlify.app or pages.dev on its own. Every site on that host would match, including other people's.

Test checklist

1. Run the dev server and view the page source. The form should be plain HTML, not inside a <pre><code> block.
2. Submit locally with localhost in allowed domains and confirm the submission is listed in Ikiform.
3. Deploy a preview and submit again from the preview host.
4. Submit on production and confirm you land on your thank-you page.

Troubleshooting

Related

• HugoA partial and a shortcode for content files.
• JekyllAn include, and GitHub Pages setup.
• HTML formsRedirects, reserved fields and the honeypot.
• Allowed domainsHow origins are matched, and what a mismatch does.