Eleventy (11ty) Forms: HTML Setup

Add a working contact form to an Eleventy site: plain HTML markup that posts to a Formboost endpoint, with a redirect, honeypot and email notifications.

Eleventy (11ty) generates static HTML, so there's no built-in way to receive form submissions. Formboost works perfectly with Eleventy's output — just point your form's action attribute at your Formboost endpoint and you're done.

Prerequisites

A Formboost account (sign up free)
An Eleventy project

Step 1: Create a Formboost Endpoint

https://formboost.app/f/YOUR_ENDPOINT_ID

Step 2: Add the Form

Option A — HTML Template

Add the form directly to any .html or .njk template:

<!-- contact.njk or contact.html -->
---
layout: base.njk
title: Contact
---

<h1>Contact</h1>

<form action="https://formboost.app/f/YOUR_ENDPOINT_ID" method="POST">
  <p>
    <label for="name">Name</label><br />
    <input type="text" id="name" name="name" required />
  </p>
  <p>
    <label for="email">Email</label><br />
    <input type="email" id="email" name="email" required />
  </p>
  <p>
    <label for="message">Message</label><br />
    <textarea id="message" name="message" rows="6"></textarea>
  </p>
  <button type="submit">Send Message</button>
</form>

Option B — Reusable Include (Nunjucks)

Create a reusable partial at _includes/contact-form.njk:

<form action="https://formboost.app/f/{{ endpoint }}" method="POST">
  <p>
    <label for="name">Name</label>
    <input type="text" id="name" name="name" required />
  </p>
  <p>
    <label for="email">Email</label>
    <input type="email" id="email" name="email" required />
  </p>
  <p>
    <label for="message">Message</label>
    <textarea id="message" name="message" rows="6"></textarea>
  </p>
  <button type="submit">Send</button>
</form>

Use it in any page:

{% set endpoint = "YOUR_ENDPOINT_ID" %}
{% include "contact-form.njk" %}

Step 3: Custom Redirect (Optional)

Add a hidden field to redirect after submission:

<input type="hidden" name="_redirect" value="https://yoursite.com/thank-you/" />

Create a thank-you.njk page to complete the experience:

---
layout: base.njk
title: Thank You
---
<h1>Message received!</h1>
<p>We'll get back to you soon.</p>

Step 4: Test It

Run npx @11ty/eleventy --serve and submit the form. Check your Formboost dashboard to confirm the submission arrived.