How to Add a Contact Form to Eleventy (11ty)

Create a FormsList form endpoint

Sign up for a free FormsList account and create a new form. Copy the endpoint URL. You will use it as the form action in your Eleventy template.

Create the contact form template

Create a Nunjucks template for your contact page. The form uses a standard HTML POST action pointing to your FormsList endpoint. You can also create this as a reusable Nunjucks include.

{# src/contact.njk #}
---
layout: base.njk
title: Contact Us
permalink: /contact/
---

<h1>{{ title }}</h1>
<p>Get in touch with us using the form below.</p>

<form action="https://formslist.com/f/YOUR_FORM_HASH" method="POST" class="contact-form">
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" id="name" name="name" required />
  </div>

  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" id="email" name="email" required />
  </div>

  <div class="form-group">
    <label for="message">Message</label>
    <textarea id="message" name="message" rows="5" required></textarea>
  </div>

  {# Optional: redirect after submission #}
  <input type="hidden" name="_redirect" value="/thanks/" />

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

Create a reusable include (optional)

For reuse across multiple pages, extract the form into a Nunjucks include file and reference it with the include tag.

{# _includes/contact-form.njk #}
<form action="https://formslist.com/f/YOUR_FORM_HASH" method="POST" class="contact-form">
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" id="name" name="name" required />
  </div>
  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" id="email" name="email" required />
  </div>
  <div class="form-group">
    <label for="message">Message</label>
    <textarea id="message" name="message" rows="5" required></textarea>
  </div>
  <button type="submit">Send Message</button>
</form>

{# Use in any page: #}
{# {% include "contact-form.njk" %} #}