Add an Eleventy contact form with global data and an include
An Eleventy contact form needs a Nunjucks include and a global data file for the access key. The site stays static, with no serverless function, because the form posts to FormThunder, which stores each submission and emails you. A global data file can also read the key from the environment, so each deploy context can use its own form.
Updated
The Eleventy code
module.exports = {
url: process.env.URL || "http://localhost:8080",
formthunderKey: process.env.FORMTHUNDER_KEY || "YOUR_ACCESS_KEY",
};<form action="https://formthunder.com/submit" method="POST">
<input type="hidden" name="access_key" value="{{ site.formthunderKey }}">
<input type="hidden" name="redirect" value="{{ site.url }}/thanks/">
<input type="checkbox" name="botcheck" style="display:none" tabindex="-1">
<label>Name <input name="name" required></label>
<label>Email <input name="email" type="email" required></label>
<label>Message <textarea name="message" required></textarea></label>
<button type="submit">Send</button>
</form>---
layout: base.njk
title: Contact
---
{% include "contact-form.njk" %}Replace YOUR_ACCESS_KEY with your free key. It's public by design, so it's safe in client code.
Notes for Eleventy
- On Eleventy 3 with
"type": "module", write_data/site.jsasexport default { ... }. - In a Markdown page, Eleventy preprocesses with Liquid by default. Use
{% include "contact-form.njk" %}in a.njkfile, or settemplateEngineOverride: njk,mdin the page's front matter. process.env.URLis set for you on Netlify. On other hosts, set your own variable so the redirect points to production.
Or have your AI add it
Connect the MCP server, then ask. The agent creates the form and writes the code for you, and it can send a real test when it's done.
Add a FormThunder contact form to this Eleventy site that emails hello@example.com. Send a test when you're done.Questions
Is Eleventy the same as 11ty?
Yes. 11ty is the short name for Eleventy, and this page applies to both spellings of the project.
Do I need the Serverless plugin?
No. Nothing runs on your side at submit time.
Get your Eleventy form sending
The free plan covers 250 submissions a month, with MCP, the CLI and the brand kit included.