VCA

Build a contact form that collects email

A static site has no backend — so who receives what visitors submit? Three $0 ways, plus the basics to keep bots from flooding it.

Published Updated Reviewed 2 min readEditorial policy#Guide#Forms#Frontend

In one sentence

Collecting messages looks simple; the hard part is that a static site has no backend — this covers who receives the message and how to prevent abuse.

What you'll build

A contact form that actually delivers messages, and clarity on which receiving method a static site should use and what abuse protection to add.

Why a form isn't that simple

Building an input box is easy; the hard part is "where does the message go after they hit submit." A static site is just the front end — it has no backend and can't process submissions itself. So the real question isn't what the form looks like, it's who receives it.

Three $0 ways to receive it

  1. A form service: point the form's submit target at a third-party service (most have a free tier); it collects and forwards messages to your inbox. Fastest, no backend code.
  2. Cloudflare Pages Functions: add a small backend function alongside your site to receive submissions, then email or store them. Within the free tier, no third party.
  3. A mailto link: the bare minimum — clicking opens the user's email app. Zero backend, but a poor experience and prone to spam filtering.

Beginners who want the quickest launch pick a form service; those who want control and a future database pick Pages Functions.

Abuse protection you must add

A public form will get noticed by bots. At minimum:

  • Field validation: email format, required fields, length caps — block on the front end, then block again on the receiving end (front-end validation can be bypassed).
  • A honeypot field: a hidden field humans never see but bots fill in; if it's filled, drop the submission.
  • Rate limiting: cap submissions per source over a short window so it can't be flooded.
  • Don't hard-code the destination inbox in the front end: keep it in the backend / service config, or you're publishing your email to scrapers.

Tell the AI this

Spell out the receiving method, the fields you need, and "add a honeypot + validation + rate limiting," then have it implement. Don't just say "make a contact form" — that usually gives you a front end with nobody receiving and no abuse protection.

Next steps

Frequently asked questions

Can a static site really have a contact form?

Yes. The form’s UI is fine on a static site; what’s missing is "who receives the submission." Point the submit target at a form service or your own small Cloudflare Pages Function — the static page renders, and a service or function receives.

If the front end validated it, why validate again on the backend?

Because front-end validation can be bypassed. An attacker doesn’t have to use your page — they can send arbitrary data straight to your receiver. Front-end validation is for UX (instant feedback); the real gate must happen again on the receiving end — the "never trust client input" rule.

References

  1. <form> — MDN Web Docs — Mozilla
  2. Cloudflare Pages Functions — Cloudflare