How I Set Up a Free Email Contact Form on My Static Website Using Formspree (No Backend Needed!)

By /
How I Set Up a Free Email Contact Form on My Static Website Using Formspree

When I was building a portfolio site for one of my side projects, I needed a contact form that actually worked—that is, it could send me emails when someone filled it out.

The catch?
I didn’t want to spin up a backend, configure a server, or deal with email protocols. I wanted something lightweight, easy to implement, and perfectly compatible with GitHub Pages, since that’s where I host my site.

That’s when I discovered Formspree.io—and let me tell you, it saved me a lot of time and hassle. In this article, I’ll walk you through how I set it up, step by step, and how you can, too.

🧩 What is Formspree?

Formspree is a service that lets you add contact forms to static websites and receive form submissions via email — no server or backend code required. You just connect your HTML form to Formspree, which handles everything for you.

Perfect for:

  • Portfolios
  • Landing pages
  • Marketing sites
  • GitHub Pages projects
  • Any static HTML/JS site

✅ Why I Chose Formspree

  • No backend required
  • Free plan available for personal projects
  • Easy integration (just modify your form’s action attribute)
  • Works great with GitHub Pages and other static hosts
  • Optional spam protection and CAPTCHA
  • You get your form submissions directly to your email inbox

🔧 Step-by-Step Setup Guide

1. Build Your HTML Contact Form

Here’s a basic version of what I used:

<form action="https://formspree.io/f/YOUR_FORM_ID" method="POST">
  <input type="text" name="name" placeholder="Your Name" required>
  <input type="email" name="email" placeholder="Your Email" required>
  <textarea name="message" placeholder="Your Message" rows="5" required></textarea>
  <button type="submit">Send</button>
</form>

✏️ Note: The action attribute is where the magic happens — this is the URL Formspree gives you when you create a form.

2. Sign Up on Formspree.io

Head over to https://formspree.io and create a free account using your email.

After signing up:

  • Go to the Forms section
  • Click “New Project” or “New Form”
  • Give your form a name (like “Contact Form”)
  • Formspree will give you a form endpoint like this:
    https://formspree.io/f/mwkgnqor

Copy that URL — you’ll need it for the next step.

3. Connect Your Form to Formspree

Replace the action in your form with the Formspree URL:

<form action="https://formspree.io/f/mwkgnqor" method="POST">

Now Formspree will listen for submissions from your form and send the info to your inbox.

4. Add Form Field Names

Formspree looks for specific name attributes to know what to include in the email. So your inputs should have name="name", name="email", name="message", etc.

Example:

<input type="text" name="name" placeholder="Your Name">

5. Test Your Form

Once your form is updated, save your changes and open your site in the browser. Try submitting the form.

The first time you do, you’ll probably get a confirmation email from Formspree, asking you to verify the email address where you want to receive submissions.

After confirming, any future form submissions will go straight to your inbox. 🎉

✨ Bonus: Add a Thank-You Page or Redirect

You can redirect users after they submit the form by adding this hidden input:

<input type="hidden" name="_redirect" value="https://yourdomain.com/thank-you.html">

Or, if you want to show a success message without leaving the page, you can do that with a little JavaScript, but that’s totally optional.

🌐 Does It Work on GitHub Pages?

YES. 100%.
My site is hosted on GitHub Pages and it works perfectly.

Since Formspree handles everything externally, you don’t need any backend. You just push your HTML/CSS/JS to GitHub, and your contact form is live and functional with email integration.

🔒 And because you never expose your personal email or credentials in your frontend code, it’s secure too.

💸 What’s Free and What’s Paid?

Formspree offers a free plan which includes:

  • 1 form
  • Up to 50 submissions per month
  • Basic email notifications
  • Optional spam protection

If your needs grow, they offer paid plans with more forms, submission limits, autoresponders, file uploads, and API access.

But for most personal sites and small projects, the free plan is perfect.

🧠 Final Thoughts

If you’re building a static site and want a fully working contact form without running a server, Formspree is honestly one of the easiest and cleanest solutions I’ve found.

It took me less than 15 minutes to:

  • Create an account
  • Set up the form
  • Test it live on GitHub Pages

And now I get contact emails straight to my inbox, just like that.

Related Posts

Scroll to Top