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 either add a hidden redirect field to the template pointing at its URL (works on every plan, and wins over the dashboard setting), or set a default absolute URL in Dashboard → Form settings → Redirect.

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 either add a hidden redirect field to the Nunjucks or Liquid template pointing at its URL (works on every plan, and wins over the dashboard setting), or configure a default absolute URL in Dashboard → Form settings → Redirect.

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.