Build Middleman Forms Powered by Basin

In this guide, we'll show you how to add a contact form to your Middleman project and connect it to Basin.

Basin is a no-code form backend that pairs nicely with static site generators like Middleman.

Middleman is a Ruby-based static site generator that makes building fast, maintainable websites easy. It supports ERB, Haml, Sass, and more out of the box, and generates pure static HTML files that can be deployed anywhere.

Since static sites have no server-side processing, you need an external service to handle form submissions. That's where Basin comes in. By following this guide, you'll have a working contact form that sends you email notifications when visitors submit.

Requirements

You'll need a Basin account, which you can create for free here, and a Middleman project. If you don't already have one, you can create a new project by running:

gem install middleman
middleman init my_project

Then start the local dev server:

cd my_project
middleman server

Step 1 — Create a form endpoint in Basin

After logging in to your Basin account, create a new form endpoint from the Forms index page. Fill out the fields and click "Create Form".

After your new form endpoint is created, it will appear in your My Forms list. Select it to view the Submissions page, where you can see the inbox, check analytics, and configure integrations and mailer settings.

Copy the form endpoint URL — you'll use it in the next step.

Step 2 — Add a contact form to your Middleman project

Create a new page at source/contact.html.erb and add the following:

---
title: Contact
---

<h1>Contact Us</h1>
<form action="https://usebasin.com/f/<YOUR_FORM_ID>" method="POST">
  <div>
    <label for="name">Name</label>
    <input type="text" name="name" id="name" required />
  </div>
  <div>
    <label for="email">Email</label>
    <input type="email" name="email" id="email" required />
  </div>
  <div>
    <label for="message">Message</label>
    <textarea name="message" id="message" rows="5"></textarea>
  </div>
  <button type="submit">Send</button>
</form>

Replace <YOUR_FORM_ID> with the form endpoint ID you copied from Basin.

Navigate to http://localhost:4567/contact to see your new form.

Step 3 — Test and deploy

Fill out the form and submit. You should see Basin's default success page, and the submission will appear in your Basin inbox.

When you're ready to deploy, build your static files with middleman build and deploy the build directory to any static hosting provider — Netlify, Vercel, GitHub Pages, S3, etc. Your Basin form will work anywhere since it's just a standard HTML form with a POST action.

Conclusion

In this guide, you learned how to add a Basin-powered contact form to your Middleman project. Since Middleman generates static HTML, Basin is a perfect companion — it handles submissions, spam filtering, and notifications without any server-side code.

To learn how Basin works with other frameworks and static site generators, check out our other step-by-step installation guides.

Happy form building!