Eleventy

HTML Forms with Eleventy

Eleventy (11ty) generates static HTML from Nunjucks, Liquid, Markdown, or plain HTML templates. Adding a Formward form is as simple as writing the HTML, with no plugins or build steps required.

1. 01Create your form in Formward

   Sign up at formward.eu, create a new form, and copy the endpoint URL (https://formward.eu/f/your-form-id).

2. 02Add the form to a template

   Open (or create) your contact page template (for example src/contact.njk) and add the form markup below. Eleventy passes it through as-is to the generated HTML file.

   ---
   layout: base.njk
   title: Contact
   ---
   
   <main class="page-content">
     <h1>Get in touch</h1>
   
     <form action="https://formward.eu/f/your-form-id" method="POST" class="contact-form">
       <div class="field">
         <label for="name">Name</label>
         <input id="name" type="text" name="name" required />
       </div>
   
       <div class="field">
         <label for="email">Email</label>
         <input id="email" type="email" name="email" required />
       </div>
   
       <div class="field">
         <label for="message">Message</label>
         <textarea id="message" name="message" rows="5" required></textarea>
       </div>
   
       <!-- honeypot: keep hidden -->
       <input type="text" name="_gotcha" style="display:none" tabindex="-1" autocomplete="off" />
   
       <button type="submit">Send</button>
     </form>
   </main>

3. 03Style the form

   Add CSS for .contact-form, .field, label, input, textarea, and button to your global stylesheet (e.g. src/styles/global.css). Eleventy copies the file to the output directory via a passthrough copy rule in .eleventy.js: eleventyConfig.addPassthroughCopy('src/styles').

4. 04Test and view submissions

   Run npx @11ty/eleventy --serve to start the dev server, navigate to /contact, and submit the form. Check the Formward dashboard to confirm the submission arrived. When you deploy the static output to Netlify, Vercel, or any static host, the form continues to work unchanged.