Using Formspree to add Contact Forms to Static Sites

An guide to adding Formspree to your static site for a contact form

So I’ve talked about static sites before, they don’t tend to lend themselves too well to having dynamic content, such as user generated comments and contact forms but there are tools out there that allow you to add this functionality to your site. The one I’m going to cover today is called Formspree and it’s a simple way of adding a contact form to your static Jekyll site.

It’s literally just a form which has a POST action to Formspree.

<form action="https://formspree.io/your@email.com"
    method="POST">
  <input type="text" name="name">
  <input type="email" name="_replyto">
  <input type="text" name="message">
  <input type="submit" value="Send">
</form>

The only bit which you have to edit in this code above is to enter your email where it has your@email.com. This takes the user generated input from this form and sends it to your email via Formspree.

_replyto allows you to directly apply to the email address which the user has provided.

You receive an email from Formspree with the users input. It tells you which form that submission came from (handy if you use Formspree for lots of different projects). It has all the fields which your form has and it also has the date and time which the form was submitted.

Screenshot of an email received from a Formspree form submission, showing the form from which it was submitted, the name, _replyto and message. At the bottom it shows the time and date of submission.

Along with the normal HTML form inputs there are other advanced features which you can use:

_next allows you to redirect the user to an URL page after submitting the form (by default the user is shown the Formspree “Thank You” page).

<input type="hidden" name="_next" value="https://mysite.com/thanks">

_cc allows you to CC in another email address, so you can have multiple admins receiving the contents of the input form.

<input type="hidden" name="_cc" value="another@email.com,yetanother@email.com">

There are a few other advanced features on the Formspree site but I thought these were the most useful. You can also use Formspree via AJAX.

My initial worries with Formspree

I thought that Formspree may have been open to abuse, in that someone could enter my email address into the post request and suddenly I could become overwhelmed with hundreds of emails from input forms. This is not the case with Formspree, they send an email to confirm your email address and they will send this for every new form that is created with that email address.

Screenshot of the email Formspree send to confirm your email address

Another worry is that there is a third party getting your emails and not being sure of where this data is being stored. They do only hold on to the last 100 form submissions if you are an unpaid user.

Apart from in your emails there is no place to access the emails which have come through Formspree (unless you want to pay for them). If you do upgrade you can export the data to CSV or JSON.

There is a limit to form submissions of 1000 per month (which is loads for the project I plan to use it on). You may want to pay for their gold features which give you unlimited form submissions and other features.

Your email is naked in the HTML which could lead to bots or malicious folk picking it up from your code.

Another worry is if the service was to suddenly go away you would lose an important bit of functionality on your site.

Despite these I still think that Formspree is a great tool!

Recent posts View all

MacProductivity

Some Mac Tips

Some settings or tips I've learned over the years to make using your Mac an even nicer experience

Writing Git

How to speed up Rubocop

A small bit of config that could speed up your Rubocop runs