How to add contact form to 11ty (Eleventy)
What is 11ty (Eleventy)?
Eleventy is a simple, flexible JavaScript-based static site generator. Whether you're building a personal blog,portfolio or documentation, 11ty (Eleventy) handles the heavy lifting of converting your content into clean, performant HTML.
Why add contact form to your 11ty (Eleventy) site?
Adding a contact form lets visitors reach you without exposing your email to spam bots. A good contact form helps you get more messages because people are more likely to fill out a form than send an email. It filters spam automatically so junk stays out of your inbox. All messages land in one place instead of scattered across email threads.
Chirp Form gives you a simple solution that works perfectly with 11ty (Eleventy)'s static architecture while respecting visitor privacy with EU hosting and GDPR compliance.
How Chirp Form works with 11ty (Eleventy)
The <chirp-form> element displays your contact form where visitors write and submit messages. Chirp Form handles everything behind the scenes. It stores submissions, filters spam and sends email notifications while your 11ty (Eleventy) site stays completely static. Submissions are identified through privacy-friendly cryptographic hashing rather than storing IP addresses or personal data directly.
Installation steps
Step 1: Add the Chirp Form script
Add the Chirp Form script to your 11ty (Eleventy) layout file. For most sites this goes in _includes/layouts/base.njk in the <head> section:
<head>
<!-- Your existing head content -->
<script defer src="https://embed.chirpform.com/latest/chirpform.umd.js"></script>
</head>
The defer attribute ensures the script loads without blocking your page content.
Step 2: Add to your contact page
Create a new file called src/contact.njk:
---
layout: _includes/layouts/base.njk
title: Contact
---
<h1>Get in touch</h1>
<p>Have a question or want to work together? Send me a message.</p>
<chirp-form form-id="YOUR_FORM_ID"></chirp-form>
Replace YOUR_FORM_ID with your actual form ID from your Chirp Form dashboard.
Step 3: Configure your form (optional)
You can fully customize your form fields through your Chirp Form dashboard. The form automatically fetches your configuration and renders everything you've set up.
For styling, you can fully customize the appearance using standard CSS. Check the styling documentation for detailed customization options.