Step 1 — Create new form endpoint on Getform

All that's required is a name for your form. You specify a name, and Getform will provide a unique form endpoint to identify your Eleventy form.

Step 2 — Prepare your Gatsby contact form for your website

You can use the boilerplate code provided on Getform to create your HTML form. It is a basic contact form with email address, name and message fields:

<form accept-charset="UTF-8" action="https://getform.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 have an 11ty site already setup and running, you can skip to Step 4. If you are setting up your site from scratch, Eleventy Base Blog is a great starting point to setup an 11ty blog. Run the following commands to start setting up your Eleventy Base site.

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

Once you command finished running, access your 11ty site on http://localhost:8000.

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

Create a new folder and name it as contact under the root directory of your site. Create a new markdown file and name it as index.md file, change 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://getform.io/{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: Don't forget to change the action attribute to a form endpoint URL with yours.

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

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

$ npx eleventy --serve

That's it! Your 11ty site is now running Getform.