FormThunder isn't open yet. This site describes the service as it will run at launch. Find out more

FormThunder
Menu

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

_data/site.js
module.exports = {
  url: process.env.URL || "http://localhost:8080",
  formthunderKey: process.env.FORMTHUNDER_KEY || "YOUR_ACCESS_KEY",
};
_includes/contact-form.njk
<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>
contact.njk
---
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.js as export default { ... }.
  • In a Markdown page, Eleventy preprocesses with Liquid by default. Use {% include "contact-form.njk" %} in a .njk file, or set templateEngineOverride: njk,md in the page's front matter.
  • process.env.URL is 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.

You, to your AI
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.