Static site generators
Add a contact form to Eleventy
Eleventy stays out of your way, which is why it is a good fit for a form that is just HTML. Put the endpoint in a global data file, write one Nunjucks include, and use it from any template. No plugin, no function, no build-time coupling to a particular host.
Setup
Add a global data file
src/_data/site.js keeps the endpoint in one place.
Write the include
A Nunjucks partial you can reuse across templates.
Include it
One line from any page template.
Eleventy examples
Swap in your own endpoint and these run as-is.
module.exports = {
title: "Example Studio",
formEndpoint: "https://send.webforms.to/wft_your_key",
thanksUrl: "https://example.com/thanks/",
};<form action="{{ site.formEndpoint }}" method="POST">
<label for="name">Name</label>
<input type="text" id="name" name="name" required>
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
<label for="message">Message</label>
<textarea id="message" name="message" rows="5" required></textarea>
<input type="hidden" name="_next" value="{{ site.thanksUrl }}">
<input type="hidden" name="_subject" value="New message from {{ site.title }}">
<input type="text" name="_gotcha" tabindex="-1" autocomplete="off"
style="position:absolute;left:-9999px" aria-hidden="true">
<button type="submit">Send</button>
</form>---
layout: base.njk
title: Contact
permalink: /contact/
---
<h1>Get in touch</h1>
{% include "contact-form.njk" %}Eleventy form FAQ
Put it in an include (_includes/contact-form.njk) and pull it in with {% include %}, or make it a shortcode if you want to pass the endpoint per page. Eleventy renders it at build time, so the output is plain HTML with no client JavaScript.
Yes. Put it in _data/site.js reading process.env, then reference site.formEndpoint in the template. The key is a public write-only endpoint, so committing it is not a security problem, but a data file keeps staging and production separate.
No. The form posts from the browser to an external endpoint, so the build output stays static and portable.
Related guides
Where Eleventy submissions can go
The guide above gets the submission to your endpoint. From there it can land anywhere: one destination on Free, several on Pro.
Need the form markup too? The template gallery has complete forms for contact, waitlist, job application and more, and the form generator builds one field by field.
Ready to wire up your Eleventy form?
Free for 300 submissions a month. Endpoint in under a minute, no card required.
Start free