Contact form for Eleventy (11ty) websites

Save the snippet as src/_includes/partials/contact-form.njk. Add splitformsKey to your global data (in _data/site.js, reading from process.env.SPLITFORMS_KEY). Then {% include "partials/contact-form.njk" %} from any template.

Yes — both. The form template is plain HTML with Nunjucks/Liquid syntax that hasn't changed across versions. The only v3 gotcha is that your config file must be ESM (.mjs).

Eleventy is static — it can't render dynamic error responses. Two options: (1) use the pure-HTML form and let splitforms render its default error page (configurable in dashboard), or (2) add a small inline <script> that intercepts submit and renders inline errors (see the AJAX page).

Yes. The snippet is in Nunjucks but the same logic in Liquid is one-line different: {% include 'partials/contact-form.liquid' %} and use {{ splitformsKey }} directly (Liquid doesn't need the URL filter). Save the file with .liquid extension.

Build a /thanks Markdown file with your normal layout, then set its absolute URL in Dashboard → Form settings → Redirect. Splitforms sends native form submissions there after success. Submitted redirect fields are ignored.

Yes. The form posts to splitforms.com directly from the static HTML, so it works regardless of whether the page itself was built statically or by Netlify's on-demand builders. No Netlify Function code required.

If you upgraded to Eleventy 3 and your .eleventy.js (CommonJS) silently stopped exposing globals, that's why. Rename to eleventy.config.mjs and use ESM export default. Otherwise addGlobalData('splitformsKey', …) won't reach your templates.

Build the thank-you page as normal Eleventy content, then configure its absolute URL in Dashboard → Form settings → Redirect. Do not add a submitted redirect field to Nunjucks or Liquid templates; splitforms ignores it for security.

If you put your access key in _data/site.json (the obvious place), it ships to your repo. Use _data/site.js and read from process.env.SPLITFORMS_KEY instead — then add .env to gitignore. Eleventy auto-loads .env if you have dotenv installed.

If the thank-you page has permalink: false, it is not built and the URL configured in the splitforms dashboard points at a 404. Ensure both the form and thank-you pages have valid permalinks.

If you reuse the variable name splitformsKey inside a paginated template's data, Eleventy's data cascade has paginated data win over global data. Use a unique-enough name like siteSplitformsKey to avoid the conflict.

If you use eleventy-plugin-serverless to render the contact page on-demand via Netlify Functions, you might assume process.env.SPLITFORMS_KEY is read per-request. It isn't — Eleventy serverless bundles the rendered template into a Netlify Function during build, capturing the env vars from your build environment. Rotating the key in Netlify's dashboard does nothing until the next deploy. Fix: read the key inside the form template via <%= process.env.SPLITFORMS_KEY %> rendered at request time using a Nunjucks {% raw %} escape, or skip serverless rendering for the contact page.

Eleventy is a Node-based static site generator — it produces HTML at build time and ships nothing else. There is no runtime, no /api/contact endpoint, no hooks for handling a form POST. The historical workarounds: (a) deploy to Netlify and use Netlify Forms, (b) write a Cloudflare Worker that handles POST /contact and forwards to your email provider (~4 hours plus ongoing operation), or (c) use a third-party form API (Formspree, Web3Forms, Basin, splitforms). Eleventy's data cascade lets you neatly pull an access key from _data/site.js and use it in a Nunjucks/Liquid include — but the actual delivery layer is always external. Splitforms is the lowest-friction external option.

Eleventy deploys to any static host. The form posts cross-origin to splitforms.com so the host is irrelevant for delivery. Eleventy v3's ESM-only config is the major upgrade gotcha — .eleventy.js (CommonJS) silently stops exposing globals; rename to eleventy.config.mjs. Local dev runs on localhost:8080 — add to splitforms allowed-domains for testing or use a separate dev key. _data/site.js (not .json) lets you read from process.env; keep .env in gitignore. For 11ty + Netlify (the classic combo), Netlify Forms is free and unlimited on current credit plans; splitforms is useful when the endpoint must work on every host.