integrations · static site generator

A contact form for Eleventy, with no backend to build.

Eleventy compiles templates to plain HTML, so a contact form is one include away: point a standard <form> at your mailcontact endpoint and submissions land in your project's inbox, with a notification in Discord, Slack, email, or a webhook. No serverless function, no mail service, no plugin.

Because it's plain HTML, the same snippet works unchanged in Nunjucks, Liquid, WebC, markdown, or any other template language 11ty renders. Drop it in _includes once and pull it into any page.

Join the waitlist Read the docs

the snippet

A working form for Eleventy, in one paste.

Point the form at your project's mailcontact endpoint. Submissions land in your project inbox. No server, no API route, no email service to wire up.

_includes/contact-form.njk

<form action="https://mailcontact.app/api/forms/your-form-id" method="POST">
  <label for="name">Name</label>
  <input type="text" id="name" name="name" />

  <label for="email">Email</label>
  <input type="email" id="email" name="email" required />

  <label for="message">Message</label>
  <textarea id="message" name="message" required></textarea>

  <button type="submit">Send</button>
</form>

how it works

Three steps, start to finish.

Create an inbox

One inbox per project. Name it after your site and you get a form endpoint and a project email address immediately.

Add the include

Save the snippet as _includes/contact-form.njk, then {% include "contact-form.njk" %} on your contact page. It's your markup; style it with your site's CSS.

Get notified

Add a Discord, Slack, email, or webhook channel. Every submission pings you where you already are.

why mailcontact

Built to pair well with Eleventy.

Stays a static site

No Netlify Functions, no serverless glue, no eleventy-plugin anything. Your build output is still plain HTML that deploys to any static host.

One snippet, every template language

Nunjucks, Liquid, WebC, markdown: 11ty passes plain HTML through untouched, so the same include works no matter which engine your project uses.

An inbox per 11ty project

Eleventy makes it cheap to spin up small sites. Give each one its own inbox and its own address instead of piping everything into your personal email.

faq

Eleventy + mailcontact, answered

Does an Eleventy contact form need a backend or serverless function?

No. The form posts directly to your mailcontact endpoint, which stores the message and sends your notifications. Your 11ty build stays fully static.

Does this work with any host (GitHub Pages, Netlify, Cloudflare Pages)?

Yes. The endpoint accepts posts from any origin, so it works wherever your Eleventy output is served, including hosts with no form handling of their own like GitHub Pages.

Can I style the form to match my site?

Completely. mailcontact only receives the POST. The markup above is yours, so your existing stylesheet applies. Add classes, rearrange fields, or wrap it in your own layout.

How do I show a success message after someone submits?

Add a few lines of JavaScript that intercept submit and POST the fields with fetch, then swap in a thank-you message (the endpoint returns JSON). A configurable redirect for native form posts is coming with the launch.

One inbox for every Eleventy project you ship.

Forms and a real email address, together, with notifications where you live. Launching soon. Be the first to know.