How to Add a Contact Form to Your 11ty Site Using Basin

Anthony Penner on Jan 22 2022

Build a basic 11ty site

Let’s get started by following the 11ty Getting Started Guide: https://www.11ty.dev/docs/getting-started/

After we have a working 11ty site, we will hook up our contact form using Basin. If you already have a working 11ty site you can skip to the next section. 

Make a Project Directory
mkdir eleventy-sample 
cd eleventy-sample

Create a Package JSON
npm init -y

Install Eleventy into your package by using npm
npm install --save-dev @11ty/eleventy

Run Eleventy to make sure it is installed properly
npx @11ty/eleventy
Wrote 0 files in 0.03 seconds (v1.0.0)

Add the most basic templates
echo '<!doctype html><html><head><title>Page title</title></head><body><p>Hello World!</p></body></html>' > index.html
echo '# Page header' > README.md

Run Eleventy again in order to compile your site using the new templates.
npx @11ty/eleventy
Writing _site/README/index.html from ./README.md
Writing _site/index.html from ./index.html
Processed 2 files in 0.12 seconds (v1.0.0)

Open your browser and point it to localhost:8080 and you should see the layout we just created. As you can see 11ty is a very powerful and simple static site generator. Very cool!

Basic 11ty example.


Use Basin for your 11ty Contact Form

Start by creating a free Basin account and making your first form. Then copy the basic example from the setup page. This example will include the correct form endpoint for you to use.
Basin Setup Instructions

Now let's add this Example HTML to our index.html by editing it as follows:

<!doctype html>
<html>
<head>
  <title>Page title</title>
</head>

<body>
  <h1>Contact Form</h1>
  <p>Use the form below to contact us, and we'll get back to you ASAP.</p>

  <form action="https://usebasin.com/f/fe96572e74f1" method="POST" enctype="multipart/form-data" id="form">
    <label for="name">Name</label>
    <input type="text" name="name" />
    <br>
    <label for="email">Email</label>
    <input type="email" name="email" required />
    <br>
    <label for="message">Message</label>
    <textarea name="message"></textarea>
    <br>
    <label for="checkbox1">Checkbox</label>
    <input type="checkbox" name="checkbox1" />
    <br>
    <label for="checkbox2">Checkbox</label>
    <input type="checkbox" name="checkbox2" />
    <br>
    <label for="radio1">Radio1</label>
    <input id="radio1" type="radio" name="radio" value="radio1" checked />
    <br>
    <label for="radio2">Radio2</label>
    <input id="radio2" type="radio" name="radio" value="radio2" />
    <br>
    <label for="file-upload">File Upload</label>
    <input type="file" name="file-upload" />
    <br>
    <br>
    <button type="submit">Send</button>
  </form>
</body>
</html>

Now you can see your updated site by refreshing the page. Make sure to use your form endpoint in the example above as I've included my unique endpoint ID.
Contact form added to 11ty Contact Form

Let's try submitting our form.
Basin form success page.

Basin Inbox.

And it emails you a copy as well.
Basin submission email notification.

Bonus points: Deploy this to AWS Amplify or Cloudflare pages and point a domain to it. Done!

Thanks for reading, and happy form building!

Have questions or need help?
Visit our docs or drop us a line at support@usebasin.com.
Anthony Penner

Anthony Penner

Anthony is one of the technical co-founders of Basin. He is an avid programmer and outdoorsman. You can reach him at @AnthonyPenner and anthony@usebasin.com

Get Started with a Free Basin account today!

Discover the benefits of Basin and how it can help streamline your forms. Sign up now and explore our features.

Sign Up for Free

More from Basin

Card image cap
Feb 24 2023

How to Improve Spam Protection with Cloudflare Turnstile

Tom Fast

Card image cap
Jan 26 2024

Building User-Friendly HTML Contact Forms: A Beginner's Guide

Anthony Penner

Card image cap
Feb 4 2022

How to Setup a No Code Contact Form Using Basin and Shifter

Anthony Penner