Eleventy Guide

Add A Contact Form To Eleventy

Step 1: Create a new form endpoint on Fabform

1. Sign up or Log in: If you haven’t already, sign up or log in to Fabform.
2. Create a New Form: Specify a name for your form. This name will help you identify your form later. Fabform will provide a unique form endpoint URL for your Eleventy form.

Step 2: Prepare your Gatsby contact form for your website

1. Use Boilerplate Code: Fabform provides boilerplate code for a basic contact form with fields for email address, name, and message.

   <form accept-charset="UTF-8" action="https://fabform.io/f/{unique-endpoint-generated-on-step-1}" method="POST">
     <input type="email" name="email" placeholder="Your Email">
     <input type="text" name="name" placeholder="Your Name">
     <input type="text" name="message" placeholder="Your Message">
     <button type="submit">Send</button>
   </form>

Step 3: Create a new blank 11ty site

If you don’t have an existing 11ty site:

1. Clone Eleventy Base Blog: Run the following commands to clone the Eleventy Base Blog repository, navigate into it, and install dependencies:

   git clone https://github.com/11ty/eleventy-base-blog.git my-eleventy-blog
   cd my-eleventy-blog
   npm install

2. Start Eleventy Server: Run Eleventy to serve your site locally:

   npx eleventy --serve

Step 4: Add a Contact Section to your 11ty site

1. Create Contact Section: Create a new folder named contact under the root directory of your site.

2. Create Markdown File: Inside the contact folder, create a new markdown file named index.md. Update its content with the following code block:

   ---
   layout: layouts/post.njk
   title: Contact
   templateClass: tmpl-post
   eleventyNavigation:
     key: Contact
     order: 4
   ---
   
   <form accept-charset="UTF-8" action="https://fabform.io/f/{YOUR_UNIQUE_FORM_ENDPOINT}" method="POST" enctype="multipart/form-data" target="_blank">
       <input type="email" name="email" placeholder="Your Email">
       <input type="text" name="name" placeholder="Your Name">
       <input type="text" name="message" placeholder="Your Message">
       <button type="submit">Send</button>
   </form>

   Important: Replace {YOUR_UNIQUE_FORM_ENDPOINT} with the form endpoint URL provided by Fabform in Step 1.

Step 5: Run your 11ty site locally to finalize setup

1. Serve Eleventy Site: Run the following command to see your Eleventy form in action at localhost:8000/contact/:

   npx eleventy --serve

That’s it! Your 11ty site now integrates with Fabform, allowing you to receive form submissions seamlessly. You can customize the form’s appearance and behavior as needed.

---

This guide should provide a more detailed and comprehensive walkthrough for setting up a contact form in an Eleventy site using Fabform.