How To Make a Contact Form In Jekyll

Jekyll is a great tool.

Writing posts in Markdown is great. Having your site load incredibly quickly is great. Caching a static site is a dream.

There’s just one place where static sites generated by tools like Jekyll fall flat: forms. With static site, there’s no backend to send your data to.

So, how can you build something like a contact form (or any form, really) in Jekyll? How do you keep your site simple and fast, but still give your users the ability to submit forms?

What’s more, what do you do if you want an email every time the user submits a form? Or if you want every form submit to create a Trello card, post in Slack, or show up in Salesforce?

The solution

This problem is exactly why we built FormKeep.

FormKeep provides form backends to designers and developers like you.

Setup is incredibly fast. Simply set the action attribute on your form tag to FormKeep, and you can start making submissions. It’s pretty ridiculously easy, actually. There’s no JavaScript and no iframes.

Since we’re very technical ourselves, we wanted a place where we could send our form data, but let us retain complete control over our markup and styles. It was this requirement that told us we needed an alternative to Wufoo. Ever tried to style an embedded Wufoo form? Not fun.

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

Code for a contact form on Jekyll

Here’s the process:

1. Paste this code into your Jekyll template:

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

Don’t worry about that exampletoken bit just yet.

2. Create an account on FormKeep.

Don’t worry, account creation is super fast, literally 15 seconds or so.

3. Create your form endpoint on FormKeep.

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

4. Copy that unique string in place of exampletoken.

To be clear, the only thing that needs to change in the html you pasted in step 1 is to replace the exampletoken part in the action attribute of your form.

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.