Dynamic Subjects with Formspree

Dynamic Subjects with Formspree

This post is more than 2 years old.

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="{{%{% endraw %} siteurl {% raw %}%}}/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:

Screenshot

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:

  • Wufoo
  • FormKeep
  • Google Docs (you can embed a form)
  • And hell, a mailto: link works too!
Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Alin Pandichi posted on 1/31/2016 at 12:15 PM

Or you can let your users fill in the subject, too. Unless you worry about too many fields to fill in the form.

Comment 2 (In reply to #1) by Raymond Camden posted on 1/31/2016 at 4:04 PM

Yep, that would be an option as well.

Comment 3 by Victor Mendoza posted on 2/5/2016 at 4:47 PM

This is very interesting, I was going to build a quick database to store the form submissions that a customer receives but these alternatives can made the trick.

Comment 4 by Christopher Eaton posted on 4/13/2016 at 8:22 PM

This is great, thanks for v much for this. Was looking for a better way to handle the subject and formspree don't seem to provide anything themselves yet. So helpful - thanks again.

Comment 5 (In reply to #4) by Raymond Camden posted on 4/13/2016 at 8:34 PM

You are most welcome.

Comment 6 by sydbarrett posted on 6/7/2016 at 8:14 PM

any suggestions for making it empty the fields after sending, not reload the page nor forward to another page?

Comment 7 (In reply to #6) by Raymond Camden posted on 6/7/2016 at 8:26 PM

See this post on using Ajax w/ FormSpree: https://www.raymondcamden.c...

You would modify the code to set the values to "" and not forward the page away.

Comment 8 by PhoenixTrottingPark posted on 8/31/2016 at 4:06 AM

I was having the exact same problem with Formspree and Gmail grouping messages together by subject! Your solution was brilliant and easy to implement! Thank you so much for the great post, it worked splendidly.

Comment 9 (In reply to #8) by Raymond Camden posted on 8/31/2016 at 1:03 PM

If I have you to thank for the Paypal donation, thank you! (Either way - glad to help!)

Comment 10 (In reply to #9) by PhoenixTrottingPark posted on 9/1/2016 at 5:58 PM

Yep, that was me! You are most welcome!

Comment 11 by Penyadapphone.com posted on 1/21/2017 at 10:14 AM

not work??? sir .why

Comment 12 (In reply to #11) by Raymond Camden posted on 1/21/2017 at 2:16 PM

You need to explain *how* it didn't work, in other words, what exactly happened. Also - do you see anything in devtools?

Comment 13 by ADMIN posted on 8/4/2017 at 2:48 PM

Hy, Mr. Raymond

How to combine ajax and dynamic subject

var _subject = $('#_subject').val();

$(document).ready(function() {
var $sub = $("#_subject");
$("#email").on("input", function() {
$sub.val("Blog Contact Form (" + $(this).val() + ")");
});
});

=====

data:{
name:name,
_replyto:email,
email:email,
comments:comments,
_subject:'My Form Submission For Dynamic',
}

Thanks

Comment 14 (In reply to #13) by Raymond Camden posted on 8/4/2017 at 4:10 PM

You wound't use my code at all, you would use the Ajax sample and instead of a string for _subject, just do:

_subject:"Blog Contact From (" + $("#email").val() + ")"

Comment 15 by David Darnes posted on 1/20/2021 at 9:46 AM

Just wanted to let anyone arriving here know that Formspree now no longer requires you to expose your email to possible spammers. Signing up for a free account allows you to generate a custom endpoint which can be added to any HTML form. More info can be found in the official Formspree documentation.