Add a Contact Form to Your Static Site Without a Server

You've built a beautiful static site — maybe with Astro, Hugo, Next.js, or just plain HTML. Everything is fast, secure, and cheap to host. Then someone asks: "Can visitors contact you through the site?" And suddenly you're looking at spinning up a backend server, managing a database, and setting up email delivery just so people can send you a message.

There's a better way. Form submission APIs let you add a fully functional contact form to any static site in minutes — no server, no database, no email infrastructure. Your form submits to an API endpoint, and the service handles storage, notifications, and spam filtering.

The Problem with Forms on Static Sites

Static sites are, by definition, static. They don't have a backend to process form data. When a user fills out a contact form and clicks "Send," the data needs to go somewhere. Your options:

Setting Up a Contact Form in 5 Minutes

Step 1: Build Your HTML Form

Create a standard HTML form. No special attributes needed — just the fields you want:

<form id="contact-form">
  <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>

<div id="form-status"></div>

Step 2: Submit to the API

Add a small script that intercepts the form submission and sends the data to your form API. Here's an example using EdgeSubmit:

<script>
document.getElementById("contact-form")
  .addEventListener("submit", async (e) => {
    e.preventDefault();
    const status = document.getElementById("form-status");

    const formData = new FormData(e.target);
    const data = Object.fromEntries(formData);

    try {
      const response = await fetch(
        "https://edgesubmit.com/api/submit/YOUR_FORM_ID",
        {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(data)
        }
      );

      if (response.ok) {
        status.textContent = "Message sent! We'll get back to you soon.";
        status.className = "success";
        e.target.reset();
      } else {
        throw new Error("Submission failed");
      }
    } catch (err) {
      status.textContent = "Something went wrong. Please try again.";
      status.className = "error";
    }
  });
</script>

Step 3: Get Notified

Configure email notifications in your form API dashboard. Every time someone submits the form, you'll receive an email with all the submission data. Some services also support Slack notifications, webhooks, and integrations with tools like Notion or Google Sheets.

What to Look for in a Form API Service

Not all form backends are equal. Here's what matters:

• Spam protection. Look for built-in spam filtering. Without it, you'll be drowning in bot submissions within weeks.
• Email notifications. You should get an email for every submission, with the form data right in the message body — not a "log in to view" link.
• Submission dashboard. A web dashboard to view, search, and export all submissions. Essential for lead management.
• CORS support. The API must support cross-origin requests from your static site's domain.
• No branding. Some free form services inject their own branding into your form or redirect to their own "thank you" page. Avoid these.
• Speed. Edge-deployed APIs respond in milliseconds. Traditional servers can take 1–3 seconds, which feels sluggish.

Beyond Contact Forms

Once you have a form submission API, the same pattern works for: