Adding a contact form to an Eleventy site
July 24, 2026
Eleventy (11ty) is beloved for its simplicity and performance: it transforms markdown and templates into lightweight, pristine HTML without forcing a client-side JavaScript runtime onto your users.
Adding a contact form shouldn't compromise that philosophy. With NormForms, you can add a fully functional, spam-protected form to your 11ty site using pure HTML—no client JavaScript, no build plugins, and no external serverless functions.
Step 1: Get your form endpoint
Sign up for a free NormForms account. Setup takes 30 seconds with no credit card required. You will receive a private endpoint URL formatted like https://normforms.com/f/YOUR_TOKEN.
Step 2: Add the form to an 11ty include
Create a reusable include at _includes/contact-form.njk (or .liquid, .webc, or plain .html):
<form action="https://normforms.com/f/YOUR_TOKEN" method="POST"> <label for="nf-name">Name</label> <input id="nf-name" type="text" name="name" autocomplete="name" required> <label for="nf-email">Email</label> <input id="nf-email" type="email" name="email" autocomplete="email" required> <label for="nf-message">Message</label> <textarea id="nf-message" name="message" required></textarea> <!-- Invisible honeypot traps spam bots silently --> <input type="text" name="_gotcha" style="display:none" tabindex="-1" autocomplete="off"> <button type="submit">Send Inquiry</button> </form>
Include it in any page or template:
{% include "contact-form.njk" %}
You can add any additional fields your project requires—such as name="budget", name="timeline", or name="company". NormForms automatically captures and formats all custom fields in your notifications without requiring database configuration.
Step 3: Test locally in development
Run your local server (e.g. npx @11ty/eleventy --serve) and submit a test message from localhost:8080.
Submissions from localhost are handled in automatic test mode:
- Notifications arrive in your inbox with a [Test] subject prefix.
- Test submissions consume 0 quota against your monthly plan allowance.
Step 4: Lock to your production domain
When you deploy your site, enter your live domain (e.g. example.com) under Spam & Security in your NormForms dashboard. This ensures only requests originating from your website are accepted, blocking automated bots that attempt to POST directly to endpoints.
Zero page weight, full lead protection
Your 11ty site retains its zero-JavaScript performance advantage. Meanwhile, NormForms protects your inquiries with multi-layer invisible spam filtering and fail-safe database storage, so you never lose a client lead.