HTML Forms with Eleventy

    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

    Step 1: Create a Formboost Endpoint

    Log in to your Formboost dashboard and create a new endpoint. Copy the endpoint URL:

    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:

    1<!-- contact.njk or contact.html -->
2---
3layout: base.njk
4title: Contact
5---
6
7<h1>Contact</h1>
8
9<form action="https://formboost.app/f/YOUR_ENDPOINT_ID" method="POST">
10  <p>
11    <label for="name">Name</label><br />
12    <input type="text" id="name" name="name" required />
13  </p>
14  <p>
15    <label for="email">Email</label><br />
16    <input type="email" id="email" name="email" required />
17  </p>
18  <p>
19    <label for="message">Message</label><br />
20    <textarea id="message" name="message" rows="6"></textarea>
21  </p>
22  <button type="submit">Send Message</button>
23</form>

    Option B — Reusable Include (Nunjucks)

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

    1<form action="https://formboost.app/f/{{ endpoint }}" method="POST">
2  <p>
3    <label for="name">Name</label>
4    <input type="text" id="name" name="name" required />
5  </p>
6  <p>
7    <label for="email">Email</label>
8    <input type="email" id="email" name="email" required />
9  </p>
10  <p>
11    <label for="message">Message</label>
12    <textarea id="message" name="message" rows="6"></textarea>
13  </p>
14  <button type="submit">Send</button>
15</form>

    Use it in any page:

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

    Step 3: Custom Redirect (Optional)

    Add a hidden field to redirect after submission:

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

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

    1---
2layout: base.njk
3title: Thank You
4---
5<h1>Message received!</h1>
6<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.

    Next Steps

    PreviousReact Forms with GatsbyNextHTML Forms with Jekyll