Over the past year or so I've been playing around with static site generators. After nearly fifteen years spent building dynamic web applications on the server-side, a simple solution involving a static site generator can be pretty darn appealing. Unfortunately, moving to static means you need to find alternatives for things that simply can't be static. Forms, forums, calendars, etc. I discussed options to handle this problem in my article for modernweb, Moving to Static and Keeping Your Toys. Today I'm going to introduce you to another option I discovered yesterday, FormKeep
FormKeep is a service that provides an end point for form submissions. They basically give you a place to point your forms, handle the processing, and then send your users to another page. It is incredibly simple but very useful. Let's look at a simple example. After signing up, you can quickly create your first form:
As you can see, you are given a form tag and one hidden form field. That's it. There are some suggestions for other fields, but at minimum, you just need those two. Now - to be clear - there is not a "form builder" here. After you copy and paste those two fields you will then need to build the rest of the form yourself. There is also no form checking built into the service. You would handle it client-side. If the end user disables that (and we all know end users can do that, right?) then FormKeep won't be able to prevent invalid submissions.
By default, form submissions will display a FormKeep page as a response:
But you can also easily input a return URL. Since their server simply outputs the URL to the browser to handle, you can use localhost as a test or a domain that resolves to 127.0.0.1 while you test. As an example, I used this: http://localhost/testingzone/trash/test2.html?done=1. That's the URL for my local server and the file I was using to test. Now let's look at the code I used.
<html>
<head>
<style>
input, textarea { width: 250px; }
label { width: 100px; display:inline-block; }
input[type=submit] {
width: 100px;
}
#status {
font-weight: bold;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
if(window.location.search.indexOf("done=1") >= 0) {
document.querySelector("#status").innerHTML = "<p>Thank you for your comments. I care about them a lot.</p>";
}
});
</script>
</head>
<body>
<div id="status"></div>
<form accept-charset="UTF-8" action="https://formkeep.com/f/439b8e051eac" method="POST">
<input type="hidden" name="utf8" value="?">
<label for="email">Email:</label> <input type="email" id="email" name="email" placeholder="Your Email"><br/>
<label for="name">Name:</label> <input type="text" id="name" name="name" placeholder="Your Name"><br/>
<label for="url">Homepage:</label> <input type="url" id="url" name="url" placeholder="Your Website"><br/>
<label for="comments">Comments:</label> <textarea id="comments" name="comments"></textarea><br/>
<input type="submit" value="Send Comments">
</form>
</body>
</html>
My example just mimics a basic contact form. But since FormKeep is returning with something in the query string, I used a bit of JavaScript to handle displaying a thank you message when it exists. FormKeep's FAQ also links to this cool example that does something similar but with CSS alone. As we know though CSS is the work of the devil so I had to use JavaScript instead.
By default form submissions are sent to you via email. This works as you imagine:
You also get a decent little online viewer as well:
To be clear - just sending an email is actually just the simplest thing you can do. You can use a webhook URL to send form data to - well - anything really. That includes things like Salesforce, Campaign Monitor, etc. Email is just the default. If you can find a service that lets you ping data to it via a URL, you can set up FormKeep to hit it with your form data.
Finally, there are two export options as well. You can dump everything out to CSV or to JSON via their "API." I put API in quotes there because right now the API is just "dump the whole thing to JSON", but I'm assuming we'll see more in the future. At minimum it will need to accept date filters.
Payment is kind of interesting. You basically pay what you want and get unlimited usage. Free usage will limit your dashboard view of data to the last ten entries, but that's certainly enough for testing. "Near Free" for personal users sounds like a pretty good deal to me.
So, check it out and let me know what you think in the comments below.