send.webforms.toRead the docs →

WebForms

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.

Get an endpointRead the docs

Setup

  1. Add a global data file

    src/_data/site.js keeps the endpoint in one place.

  2. Write the include

    A Nunjucks partial you can reuse across templates.

  3. Include it

    One line from any page template.

Eleventy examples

Swap in your own endpoint and these run as-is.

src/_data/site.js
module.exports = {
  title: "Example Studio",
  formEndpoint: "https://send.webforms.to/wft_your_key",
  thanksUrl: "https://example.com/thanks/",
};
src/_includes/contact-form.njk
<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>
src/contact.njk
---
layout: base.njk
title: Contact
permalink: /contact/
---

<h1>Get in touch</h1>

{% include "contact-form.njk" %}

Eleventy form FAQ

No. The form posts from the browser to an external endpoint, so the build output stays static and portable.

Related guides

Ready to wire up your Eleventy form?

Free for 300 submissions a month. Endpoint in under a minute, no card required.

Start free