Tuesday March 9, 2021 By Dave
Quick Tip: Add a Formspree Form to Your Static Sites

On this tutorial we’re going to make use of Formspree for a hassle-free method of including dynamic, versatile varieties to your static web sites.

The Drawback: Contact Varieties

Think about you’ve simply created a web site utilizing static pages, whether or not that be with the help of JekyllEleventyGatsby or merely utilizing some HTML information, however you now need to add a contact kind. You possibly can hyperlink to an internet service, set up one thing prebuilt onto your server, or construct one thing from scratch utilizing PHP. This implies you’re both fully restricted on the design, otherwise you’re placing far more effort right into a single kind than you probably did for your complete web site.

The Answer: Formspree

What should you may use a service that provides you full management over the shape, but doesn’t require you to put in something in your server? Enter Formspree, an internet service which provides you the flexibility to create purposeful HTML varieties with out using PHP or JavaScript.

Formspree website

Permit me to offer you a short run down of the steps required to get your individual Formspree kind up and working.

Create an Account

To start with you’ll must create a Formspree account.

Formspree Pricing

Formspree supplies a spread of plans, each free and paid, that cowl the varied quantities of submissions it’s possible you’ll obtain in your kind. Free plans include limitless varieties and as much as 50 submissions a month.

As soon as logged in to your Formspree account, navigate to the dashboard and click on New Type. Identify your new kind one thing memorable and click on Create Type.

Formspree form UI with form endpoint showing

Copy the supplied endpoint URL. This URL shall be used as the worth of the motion in your kind.

Create Your Type

The following factor you’re going to want is a kind, which we’ll construct from scratch in HTML. My kind goes to be a really simple method for individuals to get in contact with me–I’m going to have a area for his or her identify, e-mail, and their message. Right here’s the markup for my kind:

You’ll see that I’ve added a submit enter and wrapped all of the fields with a <kind> component. We are able to fashion this type nevertheless we would like. There’s no iframe or anything to limit what it appears like.

Join your kind by coming into the shape endpoint URL that you simply created in earlier step into the code as highlighted beneath:

Including Attributes

To format your submissions in an organised method use the identify attribute to use labels, these shall be proven in Formspree and shall be used to assist format submissions that arrive in your inbox. Formspree additionally has a sequence of identify spaced identify values that can picked up when the submission is acquired by Formspree.

For instance setting _replyto on the e-mail enter will imply that any e-mail entered and submitted might be replied to when replying to the submission that arrives in your inbox.

Bear in mind Your Manners

Including _next to a different hidden enter will enable me to set the place individuals shall be taken after they’ve submitted the shape.


To ensure that me to know the place the submission comes from I’m going so as to add a topic line. I can do that by including the next hidden enter:

This area won’t seem when a person views the shape, however the worth shall be used for the topic line once I obtain a submission.

To see a full listing of those Formspree values take a look at their official documentation.

Making Your Type Safe

Constructed into Formspree is a “honeypot” methodology of spam prevention. The honeypot approach is as follows; you disguise a area inside your kind that customers don’t see, however spambots do. The spambot will fill within the area, whereas customers gained’t. Any submission with this area stuffed in shall be thought of spam.

You should use this method by including the next to your kind:

It’s vital you employ a mode attribute to cover the sector. The person’s browser will disguise the sector utilizing CSS, however the spambot will ignore the CSS altogether and proceed to fill within the area. By naming the sector “_gotcha”, Formspree will recognise it and ignore any submissions made with this stuffed in.

Testing Your Type

The ultimate step is to ensure your kind works. Go to the web page containing your kind in your internet browser, fill within the kind and submit it as a traditional person would. It’s best to obtain an e-mail containing the content material of your kind submission!

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

Congratulations on establishing your individual customized internet kind! 🎉

Static Web site Templates on Themeforest

Now you understand how to construct a easy contact kind, you simply want a static web page to position it on! Take a look at these collections of premium static web site templates, all out there on Themeforest.


The Formspree API provides a simple and really versatile method of including varieties to an online web page. Good for static web sites! Take a look at the official Formspree website for more information.

Source link

Leave a Reply

Your email address will not be published. Required fields are marked *