In this tutorial we’re going to look at a hassle-free way of adding dynamic, flexible forms to your static websites.
The Problem
Imagine you’ve just created a website using static pages, whether that be with the aid of Jekyll or simply using some HTML files, but you now want to add a contact form. You can link to an online service, install something prebuilt onto your server, or build something from scratch using PHP. This means you’re either completely restricted on the design, or you’re putting more effort into a single form than you did for the entire site.
The Solution
What if you could use a service that gives you full control over the form, yet doesn’t require you to install anything on your server? Enter Formspree, an online service which gives you the ability to create functional HTML forms without the use of PHP or JavaScript.
Allow me to give you a brief run down of the steps required to get your own form up and running.
Create Your Form
The first thing you’re going to need is a form, which we’ll build from scratch in HTML. My form is going to be a very simple way for people to get in touch with me–I’m going to have a field for their name, email, and their message. Here’s the markup for my form:
<form id="contactform" method="POST"><input type="text" placeholder="Your name"><input type="email" placeholder="Your email"><textarea placeholder="Your message"></textarea><input type="submit" value="Send"></form>
You’ll see that I’ve added a submit input and wrapped all the fields with a <form> element.
We can style this form however we want. There’s no iframe or anything else to restrict what it looks like.
Add Attributes
In order for Formspree to handle your form, you’ll need to add the following action attribute to your <form> element:
<form id="contactform" action="//formspree.io/your@email.com" method="POST">
You’ll need to change “your@email.com” to the email you want to receive submissions with.
The next thing to do is to give each field a name attribute; these will be the labels that appear each time you receive a submission from the form. You can also use special Formspree values which are prefixed with an underscore.
<form id="contactform" action="//formspree.io/your@email.com" method="POST"><input type="text" name="name" placeholder="Your name"><input type="email" name="_replyto" placeholder="Your email"><textarea name="message" placeholder="Your message"></textarea><input type="submit" value="Send"></form>
Note that the Name and Message fields are named appropriately, but I’ve used the special “_replyto” value for the email field. Formspree will recognise this attribute value, and therefore allow me to reply directly to the email that is entered on the form when it’s submitted.
Remember Your Manners
I can also add _next to another hidden input to specify which url I’d like users to be sent to one they’ve submitted the form.
<input type="hidden" name="_next" value="//mywebsite.com/thanks.html" />
Subject
In order for me to know where the submission comes from I’m going to add a subject line. I can do this by adding the following hidden input:
<input type="hidden" name="_subject" value="Website contact" />
This field will not appear when a user views the form, but the value will be used for the subject line when I receive a submission.
Making Your Form Secure
Built into Formspree is a “honeypot” method of spam prevention. The honeypot technique is quite simple; you hide a field inside your form that users don’t see, but spambots do. The spambot will fill in the field, while users won’t. Any submission with this field filled in will be considered spam.
You can use this technique by adding the following to your form:
<input type="text" name="_gotcha" style="display:none" />
It’s important you use a style attribute to hide the field. The users browser will hide the field using CSS, but the spambot will (probably) ignore the CSS altogether and continue to fill in the field. By naming the field “_gotcha”, Formspree will recognise it and ignore any submissions made with this filled in.
For added security you can wrap your email in JavaScript. This will reduce the likelihood that spambots will look through and pick out your email from the HTML. Take a look at what I’ve done below:
<form id="contactform" method="POST"><input type="text" name="name" placeholder="Your name"><input type="email" name="_replyto" placeholder="Your email"><input type="hidden" name="_subject" value="Website contact" /><textarea name="message" placeholder="Your message"></textarea><input type="text" name="_gotcha" style="display:none" /><input type="submit" value="Send"></form><script>
var contactform = document.getElementById('contactform');
contactform.setAttribute('action', '//formspree.io/' + 'your' + '@' + 'email' + '.' + 'com');</script>Here I’ve removed the action attribute from the <form> element, and then used a small piece of JavaScript to set it instead. I’ve also broken down the email string into segments to make it even more obscure to the spambots. Feel free to copy this and replace the segments of the email with your own.
Testing Your Form
The final step is to make sure your form works. Visit the page containing your form in your web browser, fill in the form and submit it as a normal user would. You should receive an email from Formspree asking you to confirm your email.
Click the confirmation link and you’ll be all set!
Note: you’ll need to go through this confirmation process each time you add the form to a new page.
Conclusion
The Formspree API offers an easy and very flexible way of adding forms to a web page. Perfect for static sites!
