Add a Working Contact Form to a Static Site (3 Ways, All Cheap)
The first wall every static-site builder hits: forms need somewhere to send. Three solutions ranked by effort — form services, a Worker endpoint, and the spam armor every option needs.
HTML can draw a form; it can't deliver one. Submissions need a server to receive them, which is exactly what your static site doesn't have. The fix is borrowing one — and there are three good ways, ranked here from zero-effort to most-control. Every tutorial site project eventually needs this page.
Option 1 — A form service (right answer for most people)
Services like Formspree, Web3Forms, and Getform exist for precisely this: you point your form's action at their URL, they email you each submission. Free tiers cover a personal site's volume (typically ~50 submissions/month).
Add a contact form to my site (file below): name, email, message. It posts to my Formspree endpoint [paste URL from your Formspree dashboard]. Submit via JavaScript fetch so the visitor stays on the page; show inline validation (required fields, sane email format), a sending state on the button, a clear success message, and a readable error if delivery fails. Match my site's existing design. Complete updated file. [paste your HTML]
Option 2 — Your own endpoint on a free Cloudflare Worker
When you outgrow free-tier limits, want submissions in your own storage, or just want no third-party branding: a Worker receives the POST and forwards it to you (via an email-sending API's free tier) or stores it. Ask Claude for 'a Cloudflare Worker that accepts my contact form POST, validates fields, rejects other origins, and emails me via [MailChannels/Resend] — plus step-by-step deployment for a beginner.' Same proxy pattern as the Claude-API tutorial; if you built that, this is familiar territory.
Option 3 — The cop-out that's sometimes correct
A mailto: link costs nothing and never breaks. For a portfolio where one inquiry a month matters, 'email me: you@domain.com' beats a broken form. The honest rule: a visible email with no form outperforms a form you never tested.
The spam section (not optional)
A public form is a bot magnet — expect garbage within days. Layer these, all cheap:
Add spam protection to my form: (1) a honeypot — a hidden field bots fill and humans never see; reject any submission where it's filled; (2) a minimum-time check — reject submissions sent under 3 seconds after page load; (3) basic content rules — reject messages that are only URLs. Keep all of it invisible to real visitors; no CAPTCHAs.
Honeypot plus time-check kills the dumb majority of spam silently. Escalate to Cloudflare Turnstile (free, far gentler than reCAPTCHA) only if real spam volume ever justifies annoying humans slightly.
Where this pattern goes next
A contact form is the simplest member of a family: feedback widgets, RSVP forms, job applications, waitlists. Same delivery options, different fields. For anything where you need to SEE the collected data in a table rather than an inbox, that's the Supabase tutorial — forms writing to a database you query.
Keep going
Need somewhere to put it live? See where to host AI-built sites. Compare tool costs on the pricing tracker (or stick to the free options), then pick your next build.