# Eleventy

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.

## 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 %}
```

## FAQ

### 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.

---

HTML version: https://www.muxforms.com/docs/eleventy
Source: MuxForms (https://www.muxforms.com)