Whenever I present on static site generators, I spend some time discussing how to get "dynamic" features back into the site. One of the most important things people lose when switching to flat files is the ability to process forms. Luckily, there are a variety of different ways to get that feature back (I'll share some alternatives at the end). For my blog, I've gone with Formspree.
Formspree is a simple to use service where you simply point your form at their servers and they handle the rest. They have a free tier that supports up to 1000 emails a month which is more than enough for me. Here is a simple example of how you can make use of the service.
<form action="//formspree.io/raymondcamden@gmail.com" method="POST">
<input type="hidden" name="_next" value="http://www.raymondcamden.com/thankyou">
<input type="hidden" name="_subject" id="_subject" value="Blog Contact Form">
<input type="text" name="_gotcha" style="display:none" />
<label for="contact_name">Name: </label>
<input type="text" name="name" id="contact_name" required><br/>
<label for="email">Email: </label>
<input type="email" name="_replyto" id="email" required><br/>
<label for="contact_comments">Comments: </label><br/>
<textarea name="comments" id="contact_comments" required></textarea><br/>
<p>
<input type="submit" value="Send">
</p>
</form>
To have Formspree send you an email when a form is filled out, you simply set the action of the form to include your email address. The first time someone uses the form, Formspree will ask you to confirm it, but once you do, the emails will be sent to you automatically.
Formspree also supports a few special field names that change how the form behaves. Notice the _subject field. This will set the subject of the email you get. Notice _reply to on the email field. This will let you hit reply in your email program to respond to the person who filled out the form. You can find out more if you read the docs on their site, but in general, it is an incredibly simple service to use and you can have it up and running in minutes.
One issue bugged me though. Notice how my subject is, "Blog Contact Form." When I would get multiple emails from my blog, GMail would thread them all into one thread. This is expected I suppose, but it made it a bit more difficult for me to respond to form submissions. It occurred to me that I could easily use JavaScript to modify the form while it was being filled out. I decided to include the email address in the subject itself. Here is a sample of how you could do that.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
var $sub = $("#_subject");
$("#email").on("input", function() {
$sub.val("Blog Contact Form (" + $(this).val() + ")");
});
});
</script>
<style>
#contactform label {
display: inline-block;
width: 80px;
height:25px;
}
#contactform textarea {
width: 100%;
height: 150px;
}
</style>
<form action="//formspree.io/raymondcamden@gmail.com" method="POST" id="contactform">
<input type="hidden" name="_next" value="{{% siteurl %}}/thankyou">
<input type="hidden" name="_subject" id="_subject" value="Blog Contact Form">
<input type="text" name="_gotcha" style="display:none" />
<label for="contact_name">Name: </label>
<input type="text" name="name" id="contact_name" required><br/>
<label for="email">Email: </label>
<input type="email" name="_replyto" id="email" required><br/>
<label for="contact_comments">Comments: </label><br/>
<textarea name="comments" id="contact_comments" required></textarea><br/>
<p>
<input type="submit" value="Send">
</p>
</form>
Pretty vanilla jQuery code here and it could probably be done nicer, but it works just fine:
As an FYI, I emailed Formspree asking for a feature like this before I figured it out it would be easy in JavaScript. The folks at Formspree replied really quick, and while I didn't end up needing their help, it was great to see how quickly they responded to a support request. (Also note that they said they kinda liked the idea of a dynamic subject like I described and it may end up becoming a feature in the future!)
Alternatives
So while I'm perfectly happy with Formspree, here are a few other alternatives you may consider: