Liquid instead of Nunjucks?

Use an include file with the same HTML.

Read process.env.MUX_FORM_ID in eleventy config at build time.

Allow localhost origin for local serve port.

/docs/netlify for preview URLs.

MuxForms on Eleventy registers a shortcode in .eleventy.js that outputs the div and script, used in src/contact.njk. Allow your static host origin after build.

Docs

Eleventy

Eleventy templates compile to static HTML—inject the embed via shortcode so writers never touch script tags.

Eleventy

Piece	Role
.eleventy.js	shortcode muxForm
contact.njk	{{ muxForm() }}
Passthrough	No assets needed
Deploy	Netlify / CF Pages

.eleventy.js

module.exports = function (eleventyConfig) {
  eleventyConfig.addShortcode("muxForm", function () {
    const id = process.env.MUX_FORM_ID || "FORM_UUID";
    return `<div data-form-id="${id}"></div>
<script src="https://www.muxforms.com/embed.js" defer></script>`;
  });
};

src/contact.njk

---
title: Contact
layout: base.njk
---
<h1>Contact</h1>
{% muxForm %}

Common questions

Liquid instead of Nunjucks?: Use an include file with the same HTML.
Form id from data?: Read process.env.MUX_FORM_ID in eleventy config at build time.
Watch mode?: Allow localhost origin for local serve port.
Netlify?: /docs/netlify for preview URLs.

11ty builds, MuxForms collects.

Shortcode once; reuse on support and careers pages.

Upgrade to Pro