DEV Community

Cover image for How to Handle HTML Contact Form Submissions Without a Backend (2025 Guide)
Allen Jones
Allen Jones

Posted on

How to Handle HTML Contact Form Submissions Without a Backend (2025 Guide)

#html #beginners #webdev #tutorial

Introduction

If you’re building a simple landing page, portfolio, or SaaS website, chances are you need a contact form. But here’s the catch:

HTML forms don’t work on their own.
They need a server to receive and process submissions.

For many developers, especially beginners, setting up a backend just to handle a form feels like unnecessary work. And that’s why thousands search for things like “HTML form without backend” every month.

In this guide, you’ll learn exactly how to handle HTML form submissions without building your own backend, using formgrid.dev
Finally, we’ll walk through a step-by-step tutorial (with screenshots) for building a contact form using Formgrid that you can literally copy, paste, and deploy anywhere.

Why Developers Avoid Backends for Simple Forms

Setting up a backend just to collect form submissions comes with a lot of overhead:

  • You need a server (Node, PHP, Python, etc.)

  • You need routing, validation, and spam protection

  • You must configure email notifications

  • You need a database to store submissions

  • You must worry about security and rate limiting

  • You must maintain it forever

All this work, even though you simply want a:

“Receive messages from my website visitors” form.

That’s why many developers prefer using a form submission service instead.

Popular Ways to Handle HTML Forms Without a Backend

Here are the most common solutions developers use today:

Formspree

One of the oldest form-backend alternatives.
Simple and reliable, but paid plans can get expensive quickly.

Netlify Forms

A great free option, but only works if your site is deployed on Netlify.
If you host anywhere else, it doesn’t work.

Formgrid.dev (New & Open-Source)

A newer privacy-first alternative that works with any HTML or JavaScript form.

Features include:

✅ Open-source

✅ Works on any website

✅ Email notifications for every submission

✅ Spam protection (honeypot + rate limiting)

✅ Optional Proof-of-Work CAPTCHA

✅ Free plan: unlimited forms + 50 submissions/month

Why Use Formgrid.dev?

Formgrid is a privacy-first, open-source alternative to services like Formspree. Here’s why it’s a great choice:

  • Instant Email Notifications: Receive submissions immediately.
  • Spam Protection: Built-in honeypot fields, rate limiting, and optional Proof-of-Work CAPTCHA.
  • Self-hostable: Run Formgrid on your own infrastructure using Docker for complete data control.
  • Plug-and-Play Hosted Version: If you don’t want to self-host, use the hosted version instantly.
  • Open Source: Fully customizable with an MIT license, no vendor lock-in.
  • Privacy-Friendly: No hidden tracking or data harvesting.

Whether you’re a solo developer, a small business, or a startup, Formgrid makes handling forms fast, simple, and secure.

Creating the Formgrid Account

Head over to https://formgrid.dev

Sign up using Google or Email.

Formgrid offers free and paid plans.
The free plan includes:

  • Unlimited forms

  • 50 submissions/month

  • Email notifications

Create a New Form

Once logged in, go to your dashboard and click:

➡️ New Form

Then choose a form name like:

  • “Contact Form”

  • “Portfolio Enquiry Form”

  • “Landing Page Contact”

Click Create Form.

Copy Your Endpoint URL

After creating a form, you’ll land on the form’s page.

Go to the Overview tab and copy your endpoint URL.

We’ll use this URL in your HTML form:


<form action="..." method="POST">
Enter fullscreen mode Exit fullscreen mode

Example endpoint (yours will differ):

https://api.formgrid.dev/forms/abcd1234/submissions

Create Your HTML Contact Form

Here’s a clean, copy-paste-ready contact form:


<form action="YOUR_FORMGRID_ENDPOINT_URL" method="POST">
  <label for="name">Your Name</label>
  <input type="text" id="name" name="name" required />

  <label for="email">Email Address</label>
  <input type="email" id="email" name="email" required />

  <label for="message">Your Message</label>
  <textarea id="message" name="message" rows="5" required></textarea>

  <!-- Honeypot field (optional but recommended) -->
  <input type="text" name="_honey" style="display:none" />

  <button type="submit">Send Message</button>
</form>
Enter fullscreen mode Exit fullscreen mode

Replace:

YOUR_FORMGRID_ENDPOINT_URL with your actual endpoint.

Receive Submission Emails Instantly

Whenever someone submits your form, you’ll receive an email with:

  • Name

  • Email

  • Message

  • Timestamp

You can also view all submissions from the dashboard:

When to Use a Form API vs Building Your Own Backend

Use a form API like Formgrid if:

  • You need a simple contact form

  • You don’t want to build or maintain a backend

  • You want instant email notifications

  • You want privacy-focused spam protection

  • You're deploying a static site or landing page

Build your own backend if:

  • You need custom authentication

  • You need advanced validation

  • You want to store data in your own DB

  • You’re building a full SaaS dashboard

For 90% of landing pages, portfolios, and indie projects, a form API is more than enough.

Final Thoughts

Handling an HTML form without a backend used to require hacks, expensive services, or hosting a server you didn’t really need.

  • With tools like Formgrid.dev, you can:

  • Build a form in minutes

  • Receive submissions instantly

  • Avoid backend code

  • Keep privacy + control

  • Self-host if you want

If you want a simple, open-source, privacy-first way to collect form submissions, give Formgrid a try.

👉 Demo: https://formgrid.dev

👉 GitHub: https://github.com/allenarduino/formgrid

Top comments (0)