How to Handle Forms on Static Websites

Static websites are fast, cheap, secure and easy to host. Generators like Astro, Hugo, Eleventy, Jekyll and Next.js static export produce plain files that can live almost anywhere. But there's one thing a static site can't do on its own: process a form.

This guide explains why, and walks through every practical way to handle forms on a static site.

Why static sites can't handle forms

A static host's job is to send files. When a visitor submits a form, the browser sends a POST request that must be handled by running code — validating, storing and emailing the data. Static hosts don't run your code per request, so the POST has nowhere to go (often you'll see a 405 Method Not Allowed error).

The fix is always the same idea: send the form to somewhere that can run code. The options differ in who runs that code.

Option 1: A form backend service

Point the form's action at a hosted endpoint. Works on every static host because it doesn't depend on the host at all.

<form action="https://api.formclick.io/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
  <input type="hidden" name="redirect" value="https://yoursite.com/thanks/">
  <input type="checkbox" name="botcheck" style="display: none;">

  <input name="name" required aria-label="Name">
  <input name="email" type="email" required aria-label="Email">
  <textarea name="message" required aria-label="Message"></textarea>
  <button type="submit">Send</button>
</form>

• Pros: minutes to set up, spam filtering, email notifications, dashboard, integrations, no code to maintain, and you can change host without touching your forms.
• Cons: another service; high volumes need a paid plan.

Option 2: Your host's built-in forms

Some hosts can capture forms deployed with your site — Netlify Forms is the best-known example. You add an attribute, Netlify detects the form at build time and stores submissions.

• Pros: no extra service if you're already on that host.
• Cons: locked to that host; forms rendered only by JavaScript need extra setup to be detected; integrations and limits depend on your hosting plan.

Option 3: A serverless function

Netlify Functions, Vercel Functions and Cloudflare Workers let you deploy small pieces of backend code alongside a static site. You write the handler yourself.

• Pros: complete control; data goes exactly where you want.
• Cons: you build spam protection, validation, email sending (with a proper email provider), storage, error handling and monitoring. See How to Build a Serverless Form Backend.

Option 4: Embedded third-party forms

Google Forms, Typeform or Tally embedded in an iframe. Quick, but the form doesn't use your site's HTML and design, which can feel out of place on a professional site.

Host-by-host notes

Host	Built-in forms	Serverless	Form backend works?
GitHub Pages	No	No	Yes
Netlify	Yes (Netlify Forms)	Netlify Functions	Yes
Vercel	No	Vercel Functions	Yes
Cloudflare Pages	No	Workers / Pages Functions	Yes
AWS S3 / CloudFront	No	Lambda	Yes
Any shared host / CDN	Varies	Varies	Yes

GitHub Pages is the clearest case: there's no server-side option at all, so a form backend is the natural fit.

Static site generator tips

• Put the access key in config (site data, front matter or an environment variable) so you can reuse one form component across pages.
• Add a thank-you page to your site and use it as the redirect target. On Formclick's Free plan it must be on the same website as the form.
• Use a hidden page field filled by your template (e.g. the current URL) to know which page each submission came from.
• Islands architecture (Astro and similar): keep the form as plain HTML; only hydrate it if you need inline success messages.

Example for Astro:

---
const accessKey = import.meta.env.PUBLIC_FORMCLICK_KEY;
const page = Astro.url.pathname;
---
<form action="https://api.formclick.io/submit" method="POST">
  <input type="hidden" name="access_key" value={accessKey} />
  <input type="hidden" name="page" value={page} />
  <input name="email" type="email" required aria-label="Email" />
  <button type="submit">Subscribe</button>
</form>

Which should you choose?

• Most static sites: a form backend. Fast to set up, portable between hosts, nothing to maintain.
• Netlify-only projects with simple needs: Netlify Forms is convenient.
• Unusual processing or strict data residency: a serverless function you own.

Get a static site form working in two minutes with Formclick's free plan, or start from a ready-made template.