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

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.

Try Basin today for free

Setup a powerful, no code form backend with just a few clicks.

Create your account