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
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 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.
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">
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
_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" />
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!
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.
- Bootstrap25+ Amazing Bootstrap Templates to Try in 2021Paula Borowska
- HTML25 Top Gaming Website Templates (HTML)Brenda Barron
- Web Design20+ Best One Page Website Templates With Responsive Designs for 2021Brenda Barron
- Resumes23 Best HTML Resume Templates to Make Personal Profile CV Websites (2021)Brenda Barron
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.
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post