Home › Blog › Add a contact form to a static site without a backend
Form Catcher Web Development

Add a contact form to a static site without a backend

How hosted form endpoints work, the HTML you need, how to stop spam with a honeypot, and how to redirect people to a thank-you page after they submit.

By · ·2 min read

Bottom line: a static site cannot process a form by itself. Point the form's action at a hosted endpoint, add one hidden honeypot field for spam, and you have a working contact form with email alerts and an inbox. Here is the exact HTML.

Why static sites can't handle forms

Static hosting serves files. A <form> needs something on the other end to receive the POST, store it and tell you. Traditionally that meant a server, a database and a mail setup for a page that gets three submissions a week.

A hosted form endpoint is that "something" as a service. You keep your static site; the form posts to us; we store the submission and email you.

The HTML

Create a form in Form Catcher, copy the endpoint URL, and use it as the form action:

<form action="https://dollarsaasclub.com/f/YOUR_TOKEN" method="POST">
  <input type="text" name="name" placeholder="Your name" required>
  <input type="email" name="email" placeholder="[email protected]" required>
  <textarea name="message" placeholder="How can we help?"></textarea>

  <!-- Spam trap: hidden from humans, filled by bots -->
  <input type="text" name="_gotcha" style="display:none" tabindex="-1" autocomplete="off">

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

Every input name becomes a column in your inbox, so name your fields something you will recognise in a CSV six months from now.

What happens after submit

By default the visitor lands on a branded thank-you page. Two ways to change that:

  • Set a redirect URL on the form in Form Catcher, or
  • add <input type="hidden" name="_redirect" value="https://yoursite.com/thanks"> to the form.

The form-level setting wins if both exist. Redirect targets must be http or https links; anything else is ignored.

Submitting with JavaScript instead

If you want to stay on the page, post JSON and ask for JSON back:

await fetch("https://dollarsaasclub.com/f/YOUR_TOKEN", {
  method: "POST",
  headers: { "Content-Type": "application/json", "Accept": "application/json" },
  body: JSON.stringify({ name: "Ada", email: "[email protected]", message: "Hi!" }),
});

The endpoint allows cross-origin requests, so this works from any domain.

Stopping spam

Bots fill in every field they find. The _gotcha field is invisible to people, so any submission with it filled is a bot; we return a fake success and store nothing. In practice that removes the vast majority of junk. On top of that, each endpoint is limited per sender and capped at 200 submissions a day, and if a URL ever leaks into a spam list you can rotate it from the embed dialog and update your site.

Reading submissions

Open the inbox on the form card to see submissions as a table, delete the junk, or export everything as CSV. If email alerts are on, each submission also arrives in your inbox as a tidy table with the referring page.

That is the whole setup. One dollar a month, no server to babysit.

Frequently asked questions

Does this work with Netlify, Vercel, GitHub Pages and plain HTML?
Yes. Anything that can serve an HTML form can post to a hosted endpoint, including Webflow, Framer and Carrd custom code.
Where do submissions go?
Into an inbox inside Form Catcher and, if you turn it on, to your email address. You can export them as CSV.
Can people see my endpoint URL?
Yes, it is in your page source. That is fine; it is unguessable, rate-limited, and you can rotate it in one click if it ever gets abused.

Every tool on this site is $1/month.

CRM, AI assistant, automations, social scheduling, short links, form endpoints and invoices. Pick only what you need. Cancel in one click.

See the Dollar Menu