How to add a form to a static site without a backend

Static site generators like Astro, Hugo, Next.js, 11ty, Jekyll, and Gatsby produce fast, secure websites by pre-rendering HTML at build time. The tradeoff is that there is no server to process form submissions.

This guide explains how to add fully functional forms to any static site without writing backend code, serverless functions, or API routes.

Why static sites cannot process forms

A static site serves pre-built HTML files from a CDN or file host. When a visitor submits a form, the browser sends a POST request to the URL in the form’s action attribute. On a traditional server-rendered site, that URL points to a PHP script, Node.js route, or serverless function that processes the data.

On a static site, there is no server to receive that POST request. You need an external service to handle it.

The form backend pattern

A form backend service provides a public API endpoint that receives form submissions. The pattern is simple:

1. Build your form with standard HTML
2. Set the action attribute to the form backend URL
3. Include a public access key to identify your form
4. The service receives the submission, runs spam checks, and delivers the data

1
<form action="https://api.formsfort.com/submit" method="POST">
2
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
3
  <label for="email">Email</label>
4
  <input type="email" id="email" name="email" required />
5
  <label for="message">Message</label>
6
  <textarea id="message" name="message" required></textarea>
7
  <button type="submit">Send</button>
8
</form>

This works on every static site generator because it is plain HTML. No build plugins, no framework-specific code, no serverless functions.

Adding forms to popular static site generators

Astro

Astro generates static HTML by default. Add a form directly in any .astro file:

1
---
2
---
3

4
<form action="https://api.formsfort.com/submit" method="POST">
5
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
6
  <label for="name">Name</label>
7
  <input type="text" id="name" name="name" required />
8
  <label for="email">Email</label>
9
  <input type="email" id="email" name="email" required />
10
  <label for="message">Message</label>
11
  <textarea id="message" name="message" required></textarea>
12
  <button type="submit">Send message</button>
13
</form>

Next.js static export

When using output: "export" in Next.js, your site produces plain HTML files. Add forms using standard HTML in any page component:

1
export default function ContactPage() {
2
  return (
3
    <form action="https://api.formsfort.com/submit" method="POST">
4
      <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
5
      <label htmlFor="email">Email</label>
6
      <input type="email" id="email" name="email" required />
7
      <label htmlFor="message">Message</label>
8
      <textarea id="message" name="message" required />
9
      <button type="submit">Send</button>
10
    </form>
11
  );
12
}

Hugo

Hugo templates support standard HTML. Add a form in any layout or content file:

1
<form action="https://api.formsfort.com/submit" method="POST">
2
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
3
  <label for="name">Name</label>
4
  <input type="text" id="name" name="name" required />
5
  <label for="email">Email</label>
6
  <input type="email" id="email" name="email" required />
7
  <button type="submit">Send</button>
8
</form>

11ty (Eleventy)

Eleventy outputs static HTML. Add forms in Nunjucks, Liquid, or Markdown files:

1
<form action="https://api.formsfort.com/submit" method="POST">
2
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
3
  <label for="email">Email</label>
4
  <input type="email" id="email" name="email" required />
5
  <button type="submit">Subscribe</button>
6
</form>

Jekyll

Jekyll sites hosted on GitHub Pages or any static host can use form backends:

1
<form action="https://api.formsfort.com/submit" method="POST">
2
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
3
  <label for="name">Name</label>
4
  <input type="text" id="name" name="name" required />
5
  <label for="email">Email</label>
6
  <input type="email" id="email" name="email" required />
7
  <label for="message">Message</label>
8
  <textarea id="message" name="message" required></textarea>
9
  <button type="submit">Send</button>
10
</form>

Protecting static site forms from spam

Static site forms are visible to bots that crawl HTML source. Protect them with multiple layers:

Honeypot field

Add a hidden field that bots fill in but humans do not see:

1
<input
2
  type="text"
3
  name="botcheck"
4
  style="position: absolute; left: -9999px; opacity: 0;"
5
  tabindex="-1"
6
  autocomplete="off"
7
/>

Domain restriction

Configure your form backend to only accept submissions from your domain. This prevents other sites from using your form endpoint.

Rate limiting

Form backends enforce rate limits per IP address, preventing a single source from flooding your form with submissions.

CAPTCHA

For high-traffic forms, add a CAPTCHA challenge. Cloudflare Turnstile is a privacy-friendly option that does not require image puzzles:

1
<div class="cf-turnstile" data-sitekey="YOUR_SITE_KEY"></div>
2
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>

Where to deliver submissions

Form backend services support multiple delivery destinations:

Handling success and error states

Redirect after submission

Add a hidden _redirect field to send users to a thank-you page:

1
<input type="hidden" name="_redirect" value="https://example.com/thanks" />

AJAX submission

For a smoother experience without page reloads, use JavaScript:

1
document.querySelector("form").addEventListener("submit", async (e) => {
2
  e.preventDefault();
3
  const form = e.target;
4
  const response = await fetch(form.action, {
5
    method: "POST",
6
    body: new FormData(form),
7
  });
8
  if (response.ok) {
9
    document.getElementById("status").textContent = "Sent successfully.";
10
    form.reset();
11
  }
12
});

Summary

Static sites handle forms by delegating submission processing to a hosted form backend. The pattern is universal across all static site generators: write standard HTML, point the action at a form backend URL, and include an access key. Add spam protection with honeypot fields, domain restrictions, and CAPTCHA. Configure delivery to email, webhooks, Google Sheets, or messaging platforms.

No server-side code, no serverless functions, no build plugins required.