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:

  1. Log in to fabform.io
  2. Create a new form
  3. Copy your unique endpoint URL, for example: