Add a Contact Form to Any Static Website (2025 Guide)

Static websites built with Astro, Hugo, Jekyll, or plain HTML don’t have a backend, so you can’t just write a PHP script to handle form submissions. You need an external service to act as your form handler.

In an earlier tutorial I covered adding a contact form to Astro using OpnForms, but that approach has changed since then (email notifications moved behind a paywall). More options have appeared since then, with multiple free and privacy-first services now available.

This guide covers the simplest free option (FormSubmit.co), its known issues, the best alternatives like Static Forms and Web3Forms, a feature comparison table, privacy considerations, and a self-hosted path for advanced users. Whether you’re building a free blog with Astro and Cloudflare or running any static site, you’ll find a solution that fits.

Why add a contact form to a static website

A contact form adds credibility and trust to any website. Instead of publishing your email address where bots can scrape it, visitors fill out a form and the submission gets forwarded to you. This is especially important for:

• Lead generation: potential clients or collaborators can reach you directly
• User trust: a contact form signals that you’re approachable and professional
• Spam reduction: forms with CAPTCHA are harder to abuse than a raw email address
• Structured data: you get consistent fields (name, email, message) instead of freeform emails

Since static sites have no server-side code, you need a static website form handler: either a third-party service or a lightweight self-hosted backend. There are several free options that require zero backend code.

Method 1: FormSubmit.co (simplest free option)

FormSubmit.co was the go-to recommendation when this article was first published. It’s still the simplest option. No signup required, just point your form’s action attribute to their endpoint. Here’s how it works.

1. Create your HTML form

Design a form using standard HTML elements. Include a name attribute on every field you want to receive data for:

<form id="contact-form">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required />
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required />
  <label for="message">Message:</label>
  <textarea id="message" name="message" required></textarea>
  <button type="submit">Send</button>
</form>

2. Point the form action to FormSubmit

Add the FormSubmit endpoint as your form’s action attribute with your email address:

<form
  id="contact-form"
  action="https://formsubmit.co/your@email.com"
  method="POST"
>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required />
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required />
  <label for="message">Message:</label>
  <textarea id="message" name="message" required></textarea>
  <button type="submit">Send</button>
</form>

3. Verify your email address

Submit the form once (or visit the FormSubmit URL in your browser). You’ll receive a confirmation email with a link. Click it to verify that you own the email address. This is a one-time step.

4. Customize form options

FormSubmit supports several hidden input fields to customize behavior:

Redirect after submission:

<input
  type="hidden"
  name="_next"
  value="https://yourdomain.com/thanks.html"
/>

Carbon copy to additional recipients:

<input
  type="hidden"
  name="_cc"
  value="another@email.com,yetanother@email.com"
/>

Add reCAPTCHA:

<input type="hidden" name="_captcha" value="true" />

You can check all available options in the FormSubmit.co documentation.

FormSubmit.co issues to know about

FormSubmit is easy to set up, but it has real problems you should be aware of before committing to it for a production site.

Spam protection limitations

Users on Reddit report that spam gets through even with reCAPTCHA and honeypot enabled. One user in r/webdev noted: “I had the captcha and honeypot options enabled and still got daily spam messages.” Others report that reCAPTCHA can cause 30+ second load times on form pages, which hurts user experience.

Email address exposed in source code (GDPR risk)

Your email address is baked directly into the HTML source code via the form action URL:

<form action="https://formsubmit.co/your@email.com">

This makes it harvestable by email scraping bots. It’s also a potential GDPR liability. You’re exposing a personal email address in a way that’s trivially easy to collect automatically. If you’re concerned about this, check our guide on how to stop AI crawlers from scraping your website.

Reliability concerns

The FormSubmit.co website was unreachable during multiple test requests. Users on Reddit report inconsistencies and wasted debugging time. Since FormSubmit has no paid plans (it’s “free forever”), there’s a question about long-term sustainability and support.

Best FormSubmit alternatives for static sites

More form backend services have launched since 2024. Several now offer better spam protection, privacy guarantees, dashboards, and sustainable business models, many with generous free tiers. If you’re interested in self-hosted form tools, you might also want to look at OpnForm, an open-source form builder.

Before choosing a service, here’s what to look for:

Static Forms (best free tier, 500/mo)

Static Forms offers the most generous free tier at 500 submissions/month. It supports reCAPTCHA v2, reCAPTCHA v3, Cloudflare Turnstile, and Altcha (privacy-first, GDPR-friendly, no user tracking). You also get webhooks, file uploads, a submission dashboard, and AI-powered auto-replies that draft responses based on a knowledge base.

The setup is similar to FormSubmit, point your form action to their endpoint, but uses an access key instead of your email address. Paid plans start at $7.50/month.

Web3Forms (best for privacy, no email exposure)

Web3Forms uses an access key instead of your email address in the HTML, so your email stays hidden from scrapers. Free tier includes 250 submissions/month. It supports file uploads, reCAPTCHA, and is GDPR compliant by design.

Setup is straightforward. Create an account, get your access key, and add it as a hidden field:

<form action="https://api.web3forms.com/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
  <input type="text" name="name" required />
  <input type="email" name="email" required />
  <textarea name="message" required></textarea>
  <button type="submit">Send</button>
</form>

Formspree (best for integrations)

Formspree has been around since 2014 and is one of the most established players. Free tier is limited to 50 submissions/month, but the $10/month plan adds ML-based spam filtering, a dashboard, and integrations with Slack, Google Sheets, and Zapier. Good choice if you need submissions to flow into your existing workflow tools.

Netlify Forms (best if hosted on Netlify)

If your site is already on Netlify, Netlify Forms is built in. No extra service needed. Free tier includes 100 submissions/month with built-in spam filtering. Add netlify to your form tag and it just works:

<form name="contact" method="POST" data-netlify="true">
  <input type="text" name="name" required />
  <input type="email" name="email" required />
  <textarea name="message" required></textarea>
  <button type="submit">Send</button>
</form>

EmailJS (best for client-side only)

EmailJS lets you send emails directly from client-side JavaScript, with no form action redirect. Free tier includes 200 emails/month. It works with email templates and supports attachments. Good for single-page apps or sites where you want AJAX form submission without a page redirect.

Feature comparison table: free contact form services

*FormSubmit claims unlimited, but users report reliability issues.

Privacy and GDPR considerations for contact forms

If you serve EU visitors (or care about privacy in general), the contact form service you choose has real implications for compliance.

Email exposure in HTML source

FormSubmit embeds your email address directly in the HTML action attribute. This is visible to anyone who views source, and to every bot that crawls your site. Services like Web3Forms, Formspree, Forminit, and Static Forms use access keys or form IDs instead, keeping your email address server-side only.

For broader privacy protection on your site, consider pairing a privacy-respecting form service with Plausible Analytics, a privacy-focused alternative to Google Analytics.

Privacy-first CAPTCHA options

Traditional Google reCAPTCHA tracks users across sites and loads heavy JavaScript. Newer alternatives are more privacy-friendly:

• Cloudflare Turnstile: invisible CAPTCHA that doesn’t require user interaction and doesn’t track users across sites. Static Forms supports it natively.
• Altcha: open-source, GDPR-friendly CAPTCHA with no user tracking. Works by solving a proof-of-work challenge in the browser. Supported by Static Forms.
• Honeypot fields: a hidden form field that bots fill in but humans don’t. Simple and effective against basic spam bots, used by most services.

If privacy is a priority, choose a service that supports Turnstile or Altcha over Google reCAPTCHA.

How to add a contact form in Astro

If you’re using Astro with ViewTransitions, you may hit this error when submitting a form:

Make sure your form has the method=“POST” attribute

This happens because Astro’s ViewTransitions intercept form submissions. The fix is to add the data-astro-reload attribute to your form element. This tells Astro to handle the form submission as a regular page navigation instead of intercepting it.

<form
  id="contact-form"
  action="https://formsubmit.co/your@email.com"
  method="POST"
  data-astro-reload
>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required />
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required />
  <label for="message">Message:</label>
  <textarea id="message" name="message" required></textarea>
  <button type="submit">Send</button>
</form>

If you’re deploying your Astro site, check our guides on how to deploy Astro on Cloudflare or deploy a static Astro website on VPS. You might also find our tutorials on how to display YouTube videos on your Astro blog and add responsive YouTube videos to Astro MDX useful for other parts of your site.

Self-hosted contact form option (advanced)

If you don’t want to depend on a third-party service, or you need full control over your data, you can run your own form backend.

Docker-based Go form backend

The caffsoft/hugo-contact project is a lightweight Go-based contact form backend that runs in Docker using approximately 10MB of RAM. It’s MIT licensed and designed for static sites.

The general approach:

1. Deploy the container on a VPS
2. Point your form action to the container’s URL
3. The backend processes submissions and forwards them via email or stores them

If you need a VPS to run this, affordable VPS from Hetzner starts at around €4/month with excellent performance. Hostinger VPS is another budget option with NVMe storage.

For more self-hosted solutions, see our guide on self-hosted alternatives to popular SaaS tools.

Cloudflare Workers approach

If you’re already on Cloudflare, you can build a serverless form handler using Cloudflare Workers. The approach is:

1. Create a Worker that receives POST requests from your form
2. Forward submissions to your email (via SendGrid or Mailgun) or store them in Airtable/D1
3. Deploy the Worker alongside your Cloudflare Pages site

This gives you a form backend that runs at the edge with zero server management. It’s free for up to 100,000 requests/day on Cloudflare’s free plan.

How to choose the right form service for your site

Different sites have different needs. Here’s a quick decision guide:

<form action="https://formsubmit.co/your@email.com" method="POST">

Frequently asked questions

Conclusion

Adding a contact form to a static website is easier than ever. FormSubmit.co remains the quickest option for a prototype or personal site, just point and go. But for production use, Static Forms and Web3Forms offer better spam protection, privacy guarantees, and dashboards at no cost.

If privacy is your priority, choose a service that uses access keys instead of email addresses (Web3Forms, Static Forms). If you need integrations with Slack or Google Sheets, Formspree is solid. And if you want zero dependencies, a self-hosted Docker backend gives you full control.

If you’re setting up a new Astro site, start with our guide to adding a contact form to Astro. For broader privacy tooling, Plausible Analytics pairs well with a privacy-respecting form service.