Add a Contact Form to Your Eleventy Site

Eleventy builds static sites from templates but has no form handling built in. staticq provides the backend — your form submits directly to a staticq endpoint, and you receive submissions via email or the dashboard.

Code example

Add this to a Nunjucks template (e.g., src/contact.njk):

---
layout: base.njk
title: Contact
---

<h1>Contact Us</h1>

<form action="https://api.staticq.app/q/your-form-slug" 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" required></textarea>

  <button type="submit">Send Message</button>
</form>

If you use Liquid, the HTML is identical — only the frontmatter and layout syntax differ. The form markup stays the same regardless of your template language.

Setup steps

1. Create a form in the staticq dashboard. Name it and configure your notification email.
2. Copy the endpoint — it looks like https://api.staticq.app/q/your-form-slug.
3. Paste the endpoint into the action attribute in your template file.
4. Build and test. Run npx @11ty/eleventy --serve, submit the form, and verify the submission shows up in your dashboard.

Get started

staticq is free to start with — no credit card required. Create your first form and have submissions flowing in minutes. See pricing for plan details.