Web Development: Quick Tip: Add a Formspree Form to Your Static Sites

Tuesday, March 9, 2021

Quick Tip: Add a Formspree Form to Your Static Sites

In this tutorial we’re going to use Formspree for a hassle-free way of adding dynamic, flexible forms to your static websites.

The Problem: Contact Forms

Imagine you’ve just created a website using static pages, whether that be with the aid of Jekyll, Eleventy, Gatsby or merely 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 way more effort into a single form than you did for the entire website.

The Solution: Formspree

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 Formspree form up and running.

Create an Account

To begin with you’ll need to create a Formspree account.

Formspree Pricing

Formspree provides a range of plans, both free and paid, that cover the various amounts of submissions you may receive on your form. Free plans come with unlimited forms and up to 50 submissions a month.

Once logged in to your Formspree account, navigate to the dashboard and click New Form. Name your new form something memorable and click Create Form.

Formspree form UI with form endpoint showing

Copy the provided endpoint URL. This URL will be used as the value of the action in your form.

Create Your Form

The next 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 straightforward 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.

Connect your form by entering the form endpoint URL that you created in previous step into the code as highlighted below:

<form id="contactform" action="https://formspree.io/xxxxxxxx" method="POST">

Adding Attributes

To format your submissions in an organised manner use the name attribute to apply labels, these will be shown in Formspree and will be used to help format submissions that arrive in your inbox. Formspree also has a series of name spaced name values that will picked up when the submission is received by Formspree.

<form id="contactform" action="https://formspree.io/xxxxxxxx" 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>

For example setting _replyto on the email input will mean that any email entered and submitted can be replied to when replying to the submission that arrives in your inbox.

Remember Your Manners

Adding _next to another hidden input will allow me to set where people will be taken after they've submitted the form.

<input type="hidden" name="_next" value="https://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.

To see a full list of these Formspree values check out their official documentation.

Making Your Form Secure

Built into Formspree is a “honeypot” method of spam prevention. The honeypot technique is as follows; 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 user’s browser will hide the field using CSS, but the spambot will 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.

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 containing the content of your form submission!

Formspree form view showing the submissions and an example submission in full

Congratulations on setting up your own custom web form! 🎉

Static Website Templates on Themeforest

Now you know how to build a simple contact form, you just need a static page to place it on! Check out these collections of premium static website templates, all available on Themeforest.

Conclusion

The Formspree API offers an easy and very flexible way of adding forms to a web page. Perfect for static websites! Check out the official Formspree website for more information.

Web Development