# Eleventy Integration

# Create a new 11ty site

If you are setting up your site from scratch, Eleventy Base Blog (opens new window) 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.

# Add a Contact Form 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-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>

TIP

Don't forget to change the action attribute to a form endpoint URL with yours.

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

← Gridsome →