DEV Community

Cover image for Add a working contact form to your static site in 30 seconds (no backend, no serverless)
formhook.app
formhook.app

Posted on

Add a working contact form to your static site in 30 seconds (no backend, no serverless)

#webdev #html #tutorial #staticsites

Static sites are having a moment again. Astro, plain HTML, Next.js static exports, Hugo - fast, cheap to host, nothing to patch at 2 AM. There's exactly one feature that keeps dragging people back to servers: the contact form.

The usual escalation goes like this. You ship a beautiful static site, the client asks "where do the enquiries go?", and suddenly you're evaluating serverless functions, SMTP credentials, and spam filtering for what should be three input fields.

Here's the entire integration with a form backend instead:

<form action="https://formhook.app/f/your-form-id" method="POST">
  <input type="email" name="email" required />
  <textarea name="message" required></textarea>
  <button type="submit">Send</button>
</form>
Enter fullscreen mode Exit fullscreen mode

That's it. No JavaScript required. The form POSTs to an endpoint, the endpoint stores the submission, and you get a push notification on your phone. Works identically whether the page is hand-written HTML on a €3 VPS or an Astro build on Cloudflare Pages.

The same thing in Astro and Next.js

Because it's a plain HTML form, framework doesn't matter - but if you want the AJAX version so the page doesn't navigate away:

async function handleSubmit(e) {
  e.preventDefault();
  const res = await fetch("https://formhook.app/f/your-form-id", {
    method: "POST",
    body: new FormData(e.target),
    headers: { Accept: "application/json" },
  });
  if (res.ok) setStatus("sent");
}
Enter fullscreen mode Exit fullscreen mode

Wrap that in whatever component model you use. There's no SDK to install, which I consider a feature: one less dependency to update, and the integration survives every framework migration you'll ever do.

What about spam?

This is where DIY solutions usually fall over. A naked endpoint gets hammered by bots within days. A decent form backend gives you layers:

  • Honeypot fields - invisible inputs that only bots fill in
  • Rate limiting - per-IP throttling at the endpoint
  • Cloudflare Turnstile - when you need a real challenge, without making humans click traffic lights

With FormHook the first two are on by default and Turnstile is a checkbox. You can see all three working in the live demo on the homepage - submit the form and watch it land in the dashboard.

What to check before you pick any form backend

I build static sites for clients, and I built FormHook (disclosure: it's my product) after getting burned by the fine print on existing services. Whatever you choose, check these four things:

  1. What's the free tier actually for? Some providers position free plans explicitly for testing and development, not production. If you're wiring up a real client site, read that line carefully.
  2. How long are submissions kept? Retention limits are the quietest gotcha in this category. A lead that auto-deletes after 30 days is a lead your client loses. FormHook keeps submissions forever on every tier, including free - but whoever you pick, find their retention policy in writing.
  3. Where does the data live? If you or your clients are in the EU, a US-hosted form processor means your contact form depends on the EU–US Data Privacy Framework staying valid. EU-resident hosting makes that whole question disappear.
  4. Can you export? If leaving requires begging support for a data dump, don't enter.

The 30 seconds, measured

  1. Sign up, create a form, copy the endpoint (≈20 seconds)
  2. Paste it into your action attribute (≈10 seconds)
  3. Deploy

The free tier (250 submissions/month) covers a typical portfolio or small business site with room to spare. And because the integration is one attribute, switching providers later - to us or away from us - is a one-line diff. That's how this category should work.

Questions about static site forms? Happy to answer in the comments - I've wired these into everything from hand-rolled HTML to Next.js 15 static exports.

Top comments (0)