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.

    html <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:

    bash 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:

    bash 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:

    ```markdown

    layout: layouts/post.njk title: Contact templateClass: tmpl-post eleventyNavigation: key: Contact order: 4

    ```

    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/:

    bash 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.