Contact form for Eleventy — no backend required

Eleventy builds files. Form handling is not its job.

Setup

Create a FormHeron form.
Add the form to a Nunjucks/Liquid/HTML template.
Deploy to Netlify, Cloudflare Pages, or any static host.

Working example

_includes/contact-form.njk

<form action="https://formheron.com/f/YOUR_KEY" method="POST">
  <label>
    Email
    <input type="email" name="email" required />
  </label>
  <label>
    Message
    <textarea name="message" required></textarea>
  </label>
  <!-- honeypot: off-screen, not type=hidden -->
  <input type="text" name="_hp" tabindex="-1" autocomplete="off"
         aria-hidden="true" style="position:absolute;left:-9999px" />
  <button type="submit">Send</button>
</form>

Common problems

Netlify forms dual-write

Pick one destination. Dual posts confuse analytics and double-notify.

Template languages

The form is plain HTML — works in Nunjucks, Liquid, or Markdown shortcodes.

Preview deploys

Add preview hostnames to the origin allowlist.

FAQ

How do I add a contact form to Eleventy?

Include a form partial that posts to FormHeron.

Can I export leads?

Pro plans include CSV export with formula-injection escaping.

Where is data stored?

Postgres in Amsterdam. Operator access is from India — both disclosed.

Start free Docs