Eleventy

Eleventy contact form without a backend

Eleventy (11ty) turns templates into static HTML, so a contact form only needs an action that points at Formward. This guide keeps the endpoint in a global data file, puts the form in a Nunjucks include you can drop into any page, and sends visitors to a thanks page on your own site after they submit. There is no plugin, no serverless function and no client-side JavaScript.

1. 01Create your form and store the endpoint

   Sign up at formward.eu, create a new form and copy the endpoint URL (https://forms.formward.eu/f/your-form-id). Save it in a global data file. Eleventy makes each file in the _data folder (inside your input directory) available to every template under the file's name, so this one becomes formward.endpoint.

   // _data/formward.json
   {
     "endpoint": "https://forms.formward.eu/f/your-form-id"
   }

2. 02Put the form in an include

   Create _includes/contact-form.njk with the markup below. The hidden _redirect field tells Formward where to send the visitor after a normal submit. Formward resolves a path against the page the form was posted from, so /thanks/ lands on your own domain. The url filter adds your pathPrefix if the site is served from a subfolder.

   {# _includes/contact-form.njk #}
   <form action="{{ formward.endpoint }}" method="POST" class="contact-form">
     <label for="name">Name</label>
     <input id="name" type="text" name="name" autocomplete="name" required>
   
     <label for="email">Email</label>
     <input id="email" type="email" name="email" autocomplete="email" required>
   
     <label for="message">Message</label>
     <textarea id="message" name="message" rows="5" required></textarea>
   
     {# Where Formward sends the visitor after submitting. #}
     <input type="hidden" name="_redirect" value="{{ '/thanks/' | url }}">
     {# Honeypot: hidden from people, filled by bots. Keep it empty. #}
     <input type="text" name="_gotcha" style="display:none" tabindex="-1" autocomplete="off">
   
     <button type="submit">Send</button>
     <p>We only use your details to reply. <a href="/privacy">Privacy policy</a></p>
   </form>

3. 03Add the contact and thanks pages

   Include the form on a contact page, then add the page Formward redirects to. The layout name is whatever your site already uses. eleventyExcludeFromCollections keeps the thanks page out of collections such as a sitemap built from collections.all.

   ---
   # contact.njk
   layout: base.njk
   title: Contact
   permalink: /contact/
   ---
   <h1>Get in touch</h1>
   {% include "contact-form.njk" %}
   
   ---
   # thanks.njk
   layout: base.njk
   title: Thanks
   permalink: /thanks/
   eleventyExcludeFromCollections: true
   ---
   <h1>Thanks, your message was sent</h1>
   <p>We will reply by email.</p>

4. 04Style and test

   Style .contact-form in your stylesheet and copy it to the output with a passthrough rule in eleventy.config.js, for example eleventyConfig.addPassthroughCopy("css").

   Run npx @11ty/eleventy --serve, open http://localhost:8080/contact/ and send a message. You should land on /thanks/, and the submission should appear in your Formward dashboard and your inbox. The built _site folder works unchanged on any static host, because the POST goes to Formward and never to your site.