How to Add a Working Contact Form to Your Website with Formspree (No Backend Needed)

 Every developer loves a clean contact form but most beginners stop at the design stage.

The real challenge? Making the form actually send messages without using PHP or a backend server.

That’s where Formspree comes in.
Formspree allows you to connect your form directly to your email address no backend, no hosting complications, just clean and simple HTML integration.

In this article, I’ll show you how to build and connect a fully working contact form using HTML, CSS, Bootstrap, and Formspree.
You’ll also get the downloadable source code at the end of this post.

Step 1: Build the Contact Form

Here’s a simple HTML structure for your contact form.
It includes fields for name, email, and message — clean and responsive.

Sample code
<form id="contactForm" action="https://formspree.io/f/your-form-id" method="POST">
  <div class="mb-3">
    <label for="name" class="form-label">Name</label>
    <input type="text" class="form-control" id="name" name="name" required>
  </div>

  <div class="mb-3">
    <label for="email" class="form-label">Email</label>
    <input type="email" class="form-control" id="email" name="_replyto" required>
  </div>

  <div class="mb-3">
    <label for="message" class="form-label">Message</label>
    <textarea class="form-control" id="message" rows="4" name="message" required></textarea>
  </div>

  <button type="submit" class="btn btn-primary">Send Message</button>
</form>

Step 2: Connect It to Formspree

1. Go to 👉 Formspree.io

2. Click Get Started or Sign Up Free

3. Add your email and project name

4. Copy your Form ID (it looks like this: https://formspree.io/f/xayz1234)

5. Replace your-form-id in the action attribute of your HTML form

That’s it your form is now connected!
Any submission from your website will go straight to your inbox.

Step 3: Add Styling and Feedback

You can add a Bootstrap success message and a loading spinner for better user experience.
If you want, you can download my full version here (you’ll upload your file link here).
This version includes a clean layout and a smooth success animation when a message is sent.

Step 4: Test Your Form

Open your site in the browser, fill out the form, and hit “Send Message.”
Check your email you should receive the submission immediately.

If you don’t get it, check:

• The action URL (should have your correct Form ID)

• Email spelling in your Formspree account

• Spam folder (for the first test)

Step 5: Why I Recommend Formspree

• No backend setup required

• Works with static sites (GitHub Pages, Netlify, etc.)

• Sends submissions directly to your email

• Free tier available for small projects

• Supports reCAPTCHA, custom redirects, and spam filtering

Conclusion

Formspree is one of the simplest tools for making your web forms actually work.

Whether you’re a beginner learning HTML or a front-end developer building client websites, this saves you time and setup stress.

You can create a free account here 👉 Join Formspree Now

And if you want to test or learn from my setup, download the full project files here

WATCH THE FULL VIDEO DOWN BELOW