How to Add a Contact Form to an Eleventy (11ty) Site Using Fabform
Eleventy has earned a loyal following among developers who value simplicity, transparency, and full control over their static sites. It avoids the complexity of heavy frameworks and gives you a clean, predictable build pipeline. But like all static site generators, Eleventy ships HTML — and HTML alone cannot process form submissions.
If you want a contact form, signup form, or any kind of data‑collection workflow, you need a backend. Fabform provides that backend without requiring servers, API routes, or JavaScript. It fits naturally into Eleventy’s minimalist philosophy.
This guide walks through how to integrate a fully functional contact form into any Eleventy project using Fabform.
Why Eleventy Developers Prefer Backendless Form Solutions
Eleventy users tend to value:
- Zero‑runtime deployments
- Minimal dependencies
- Transparent HTML output
- Full control over markup
- Freedom to host anywhere
A form backend aligns perfectly with this mindset. Instead of adding serverless functions, custom endpoints, or third‑party scripts, you simply point your form’s action attribute to a Fabform endpoint. The rest happens automatically.
Fabform handles:
- Submission storage
- Email notifications
- Spam filtering
- File uploads
- Webhooks
- CSV export
All without touching your Eleventy build.
Step 1: Create a Form in Fabform
Start by creating a form endpoint:
- Log in to fabform.io
- Create a new form
- Copy your unique endpoint URL, for example: