In this tutorial we’re going to look at a hassle-free way of adding dynamic, flexible forms to your static websites.
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.
Allow me to give you a brief run down of the steps required to get your own form up and running.
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
We can style this form however we want. There’s no
iframe or anything else to restrict what it looks like.
In order for Formspree to handle your form, you’ll need to add the following action attribute to your
<form id="contactform" action="//firstname.lastname@example.org" method="POST">
You’ll need to change “
email@example.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="//firstname.lastname@example.org" 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.
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" />
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.
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.
<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
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.
The Formspree API offers an easy and very flexible way of adding forms to a web page. Perfect for static sites!