Why it's hard to put a form on a Jekyll site
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?
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
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="✓">
Don't worry about that
exampletoken bit just yet.
2. Ceate 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.
Putting a contact form on your static Jekyll site has never been easier. Why not get started now?