Skip to content
FFormhook
← All guides

Guide

Eleventy contact form (no backend needed)

Eleventy renders to static HTML at build time, so an Eleventy contact form is just a plain HTML form in a Nunjucks (or Liquid, or plain HTML) template. The form action points at Formhook, and there's nothing else to do.

The snippet

contact.Eleventy
{# src/contact.njk — Nunjucks template, plain HTML form #}
<form action="https://formhook.app/f/YOUR_API_KEY" method="POST">
  <input type="email" name="email" placeholder="Email" required />
  <textarea name="message" placeholder="Message" required></textarea>
  <input type="text" name="_gotcha" tabindex="-1" autocomplete="off" hidden />
  <input type="hidden" name="_redirect" value="{{ '/thanks' | url }}" />
  <button type="submit">Send</button>
</form>

How it works

The snippet works in any Eleventy template language — Nunjucks (shown), Liquid, Handlebars, plain HTML, JSX. The {{ '/thanks' | url }} filter applies Eleventy's URL transform so the _redirect works correctly with a pathPrefix. Drop the form into a page template or an include — it doesn't matter which.

What happens next

  • Submission lands in your Formhook dashboard within a second.
  • Push notification fires on every device you've enabled it on.
  • Reply directly from the dashboard (Pro and above) — keeps your real inbox out of the form's HTML.

Ship your Eleventy contact form today.

Sign up free, create a form, paste the API key. Five minutes.

Start free

Free tier: 5 forms · 250 submissions/month · No credit card.

Eleventy contact form — FAQ

Does this work with the default Eleventy build pipeline?
Yes. The form is plain markup that survives Eleventy's template transforms. No data files, plugins, or shortcodes required.
Can I use this from a JSX or Liquid template?
Yes. The HTML doesn't change between template languages — only the way you embed any dynamic bits like the redirect URL changes per template syntax.
How do I handle spam without adding a build-time integration?
Spam protection is on Formhook's side: the honeypot field drops bots silently and Cloudflare Turnstile is a per-form toggle. You don't need to wire anything into the Eleventy build.

Guides for other frameworks