How to make a contact form with Middleman

Middleman is a static site generator using all the shortcuts and tools in modern web development. Middleman is an open source project with an active community and is used by companies like MailChimp and thoughtbot.

It’s easy to setup caching for a static site. Best of all, because there’s no backend system sites built in Middleman load incredibly fast.

Contact forms are a challenge in Middleman

Static sites built in tools like Middleman are super performant. However, there is one place they all fall short: forms. Since there’s no backend, there’s no place to route your form submission data.

So, how can you keep your site simple and fast but give your users the ability to submit forms? How about setting up email alerts or kicking off automated workflows?

The solution

We built FormKeep to help designers and developers create forms easily.

FormKeep is incredibly fast to setup and provides the form backend for you. Simply set the action attribute on your form tag to FormKeep and you can start accepting submissions. We also have several integrations to help you route data to tools like Trello and Salesforce.

There’s no JavaScript or iframes so you retain complete control over your markup and styles. This makes FormKeep a clear winner over other options like Wufoo.

Here’s how to use FormKeep to add a form to your Middleman site.

Code for a contact form on Middleman

Here’s the process:

1. Paste this code into your Middleman template:

or use the middleman form helpers

<form accept-charset="UTF-8" action="https://formkeep.com/f/exampletoken" method="POST">
  <input type="email" name="email" placeholder="Your Email">
  <input type="text" name="name" placeholder="Your Name">
  <input type="hidden" name="utf8" value="✓">
  <button type="submit">Submit</button>
</form>

You guessed it: exampletoken is just a placeholder.

2. Create an account on FormKeep.

Don’t worry, account creation is super fast.

3. Create your form endpoint on FormKeep.

All that’s required is a name for your form. FormKeep will provide a unique string to identify your form.

4. Copy that unique string in place of exampletoken.

No need to change anything other than the exampletoken bit. You can send us any data you like.

5. Optional: tell FormKeep to email you on every entry, or email your whole team, or create a Trello card, or post in Slack…

If you like, you can simply visit FormKeep when you want to view your entries. Or you can forward them along via email or to one of our many integrations. Whatever works for you.