How to Add a Contact Form to Your Static Website Without a Backend

The Problem: Static Sites Cannot Process Forms

Static websites are fantastic. They are fast, secure, cheap to host, and easy to deploy. Platforms like GitHub Pages, Netlify, Vercel, and Cloudflare Pages make it trivially easy to put a website online. You write HTML, CSS, and maybe a little JavaScript, push to a repository, and your site is live.

But there is one major limitation: static sites cannot run server-side code. When a user fills out a contact form and clicks “Submit,” there is no backend to receive the data, store it, or send an email notification. The browser sends a POST request, and there is nothing on the other end to handle it.

This means that every developer who builds a static site eventually faces the same question: how do I add a working contact form without spinning up a server?

Common Solutions (And Their Trade-offs)

There are several approaches developers typically consider. Let us walk through each one, along with its pros and cons.

1. Mailto Links

The simplest approach is using a mailto: link. When a user clicks it, their default email client opens with a pre-filled email. This is not really a form — it is a link. It does not work on devices without an email client configured, it provides a terrible user experience, and you cannot control the format of the data you receive.

Verdict: Avoid for anything beyond the most basic use case.

2. Google Forms Embed

You can embed a Google Form in an iframe on your page. This works, but the form looks like a Google Form — not like part of your website. You cannot style it to match your brand, and the user experience feels disjointed. On the positive side, it is free and submissions go straight to Google Sheets.

Verdict: Acceptable for internal tools, but not ideal for a public-facing website where branding matters.

3. Serverless Functions

You can write a serverless function on AWS Lambda, Vercel Serverless Functions, or Netlify Functions that receives the form data, stores it, and sends an email. This gives you full control but requires writing, deploying, and maintaining backend code. You also need to handle validation, spam protection, error handling, and email delivery (which itself requires a service like SendGrid or SES).

Verdict: Powerful but defeats the purpose of keeping things simple. You wanted a static site to avoid backend complexity.

4. Form Backend Services

This is the sweet spot for most developers. A form backend service gives you an API endpoint URL. You set this URL as your HTML form's action attribute. When a user submits the form, the data goes to the service, which stores it, sends you an email notification, and optionally redirects the user to a thank-you page.

No server code. No infrastructure. Just HTML.

Verdict: Best balance of simplicity, control, and features for static site forms.

The FormCatch Solution

FormCatch is a form backend service designed specifically for developers who want the simplest possible way to add form handling to their websites. Here is how it works in three steps.

Step 1: Create a FormCatch Account

Go to formcatch.vercel.app/login and sign up. It is free — no credit card required. Once you are logged in, you will see your dashboard where you can create form endpoints.

Step 2: Create a Form Endpoint

Click “Create Endpoint” and give it a name (e.g., “Contact Form”). You will immediately get a unique endpoint URL that looks like this:

https://formcatch.vercel.app/s/your-unique-form-id

Step 3: Point Your HTML Form

Now, set your form's action attribute to your FormCatch endpoint URL and set the method to POST. That is it. Here is a complete example:

<form action="https://formcatch.vercel.app/s/your-form-id" method="POST">
  <label for="name">Name</label>
  <input type="text" id="name" name="name" required />

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

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

  <button type="submit">Send Message</button>
</form>

When someone submits this form, the data is sent to FormCatch. You will see the submission in your dashboard and receive an email notification. The user will be redirected to a default thank-you page (which you can customize).

Adding Spam Protection

FormCatch includes built-in honeypot spam protection. To enable it, simply add a hidden field named _gotcha to your form:

<!-- Add this hidden field inside your form -->
<input type="text" name="_gotcha" style="display:none" />

Bots will fill in this hidden field. When FormCatch detects a value in _gotcha, it silently discards the submission. Real users never see the field, so their submissions go through normally.

Customizing the Redirect

By default, after a successful submission, users see a FormCatch thank-you page. If you want to redirect them to your own page, add a hidden _redirect field:

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

Using AJAX Instead of Form Submission

If you prefer to handle the form submission with JavaScript (for a single-page app feel, or to show a success message without navigating away), you can POST to the same endpoint using fetch:

const form = document.querySelector('form');

form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const data = new FormData(form);

  const res = await fetch('https://formcatch.vercel.app/s/your-form-id', {
    method: 'POST',
    body: data,
  });

  if (res.ok) {
    alert('Message sent!');
    form.reset();
  } else {
    alert('Something went wrong. Please try again.');
  }
});

FormCatch supports full CORS headers, so you can POST from any domain. This makes it compatible with any frontend framework including React, Vue, Svelte, and vanilla JavaScript.

Complete Example: GitHub Pages Contact Form

Here is a complete, copy-paste-ready example for a contact form on a GitHub Pages site. Save this as contact.html in your repository:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contact Us</title>
  <style>
    body { font-family: sans-serif; max-width: 600px; margin: 40px auto; padding: 0 20px; }
    label { display: block; margin-top: 16px; font-weight: bold; }
    input, textarea { width: 100%; padding: 10px; margin-top: 4px; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box; }
    button { margin-top: 20px; padding: 12px 24px; background: #2563eb; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 16px; }
    button:hover { background: #1d4ed8; }
  </style>
</head>
<body>
  <h1>Contact Us</h1>
  <form action="https://formcatch.vercel.app/s/your-form-id" method="POST">
    <input type="text" name="_gotcha" style="display:none" />
    <input type="hidden" name="_redirect" value="https://yoursite.github.io/thank-you" />

    <label for="name">Name</label>
    <input type="text" id="name" name="name" required />

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

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

    <button type="submit">Send Message</button>
  </form>
</body>
</html>

Why FormCatch Over Alternatives?

• Free tier: 1 endpoint and 50 submissions per month — enough for most personal sites
• No JavaScript required: Works with plain HTML forms
• Instant email notifications: Know when someone submits a form
• Spam protection: Built-in honeypot fields
• CSV export: Download all your submissions anytime
• CORS support: Works with React, Vue, Svelte, and any frontend framework
• Dashboard: View and manage all submissions in one place

Check the pricing page for a full comparison of plans.

Frequently Asked Questions