Contact Form Alternatives for Static Sites
Asad Ali
Founder & Lead Developer · Former WordPress Core Contributor
Contact Form Alternatives for Static Sites
"But how do I add a contact form?"
This is one of the first questions when moving away from WordPress. Static sites don't have a backend, so where do form submissions go?
The answer: dedicated form services. And they're actually easier than WordPress.
The Problem (and Solution)
WordPress forms:
1. Install Contact Form 7 or similar
2. Configure SMTP plugin
3. Hope emails don't go to spam
4. Manage spam submissions
5. Keep plugins updated
Static site forms:
1. Add form HTML
2. Point to form service
3. Done
Form services handle validation, spam filtering, notifications, and storage.
Option 1: Formspree
Best for: Quick setup, generous free tier
Setup
1. Go to formspree.io
2. Create project and form
3. Get your form endpoint
Implementation
React Implementation
'use client';
import { useState } from 'react';
export default function ContactForm() {
const [status, setStatus] = useState<'idle'
'sending' 'success'
'error'>('idle');
async function handleSubmit(e: React.FormEvent) {
e.preventDefault();
setStatus('sending');
const form = e.currentTarget;
const data = new FormData(form);
try {
const response = await fetch('https://formspree.io/f/YOUR_ID', {
method: 'POST',
body: data,
headers: { Accept: 'application/json' },
});
if (response.ok) {
setStatus('success');
form.reset();
} else {
setStatus('error');
}
} catch {
setStatus('error');
}
}
if (status === 'success') {
return
Thanks! We'll be in touch.
;
}
return (
);
}
Pricing
| Plan | Submissions/mo | Price |
| Free | 50 | $0 |
| Gold | 1,000 | $10/mo |
| Platinum | 5,000 | $50/mo |
Option 2: Netlify Forms
Best for: Sites hosted on Netlify
Setup
No configuration needed—just add an attribute:
React/Next.js
Features
- Built-in spam filtering (Akismet)
- Email notifications
- Zapier integration
- Submissions in dashboard
Pricing
| Plan | Submissions/mo | Price |
| Free | 100 | $0 |
| Pro | 1,000+ | Included in $19/mo hosting |
Option 3: Web3Forms
Best for: Free with good features
Setup
1. Go to web3forms.com
2. Get your access key
3. Add to form
Features
- Completely free
- Unlimited submissions
- No signup required
- File uploads
- Custom redirects
Option 4: Formspark
Best for: Simple, reliable, affordable
Setup
Pricing
- 250 submissions: Free
- 1,000 submissions: $5/mo
- 5,000 submissions: $15/mo
Option 5: Basin
Best for: Teams and more features
Features
- Team collaboration
- Submissions API
- Webhooks
- File uploads
- Spam filtering
- Detailed analytics
Pricing
| Plan | Submissions/mo | Price |
| Starter | 100 | Free |
| Basic | 2,500 | $15/mo |
| Pro | 10,000 | $50/mo |
DIY: Build Your Own
For full control, create your own form handler.
Next.js API Route
// app/api/contact/route.ts
import { NextResponse } from 'next/server';
export async function POST(request: Request) {
const { name, email, message } = await request.json();
// Validate
if (!name
!email
!message) {
return NextResponse.json(
{ error: 'All fields required' },
{ status: 400 }
);
}
// Send email (using Resend, SendGrid, etc.)
try {
await sendEmail({
to: 'you@example.com',
subject: Contact from ${name},
text: message,
replyTo: email,
});
return NextResponse.json({ success: true });
} catch (error) {
return NextResponse.json(
{ error: 'Failed to send' },
{ status: 500 }
);
}
}
With Resend
import { Resend } from 'resend';
const resend = new Resend(process.env.RESEND_API_KEY);
async function sendEmail(data: {
to: string;
subject: string;
text: string;
replyTo: string;
}) {
await resend.emails.send({
from: 'contact@yourdomain.com',
to: data.to,
subject: data.subject,
text: data.text,
replyTo: data.replyTo,
});
}
Pros: Full control, custom logic, no third-party dependency
Cons: More code to maintain, need email service
Spam Protection
Honeypot Fields
Add a hidden field that bots fill out but humans don't:
On the backend, reject submissions where _honey has a value.
reCAPTCHA / Turnstile
Cloudflare Turnstile (privacy-friendly):
Verify the token server-side.
Comparison Table
| Service | Free Tier | Ease | Features | Best For |
| Formspree | 50/mo | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | Most users |
| Netlify Forms | 100/mo | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | Netlify users |
| Web3Forms | Unlimited | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | Free tier |
| Basin | 100/mo | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | Teams |
| DIY | N/A | ⭐⭐ | ⭐⭐⭐⭐⭐ | Full control |
WordPress vs Static Site Forms
| Aspect | WordPress Forms | Static Site Forms |
| Setup | Install plugin, configure SMTP | Add form action |
| Spam | Akismet or similar plugin | Built into service |
| Email delivery | Often problematic | Reliable |
| Storage | Database | Service dashboard |
| Maintenance | Keep plugins updated | None |
| Cost | Free + hosting | Free or low cost |
Static site forms are simpler and more reliable.
FAQ
Q: Will emails go to spam?
Less likely than WordPress. Form services use proper email infrastructure.
Q: Can I store submissions?
Yes, all services store submissions in dashboards. Some offer APIs for custom storage.
Q: Can I add file uploads?
Most services support file uploads. Check individual service limits.
Q: What about GDPR?
Most services are GDPR compliant. Check their privacy policies and DPAs.
Q: Which hosting works best with forms?
Vercel, Netlify, and Cloudflare Pages all work well with form services. Compare hosting options →
Conclusion
Contact forms on static sites are easier than WordPress:
1. Use a form service - Formspree, Netlify Forms, or Web3Forms
2. Add simple HTML - Just change the form action
3. Done - No plugins, no SMTP, no maintenance
The reliability improvement alone makes it worth switching.
Related guides:
Related Articles
View allMDX vs WordPress: Why Developers Prefer Writing in Markdown
Compare MDX and WordPress for content creation. Learn why developers are switching from Gutenberg to MDX for better control and performance.
MDX for Beginners: Write Content Like a Developer
Learn how MDX combines Markdown with React components. Perfect for developers migrating from WordPress to modern content workflows.
Markdown Guide for Developers: Write Better Documentation
Master Markdown for documentation, README files, and content. Syntax, extensions, and best practices for developers.
How to Build a Blog with Next.js and MDX
Complete tutorial for building a modern blog using Next.js and MDX. From setup to deployment, everything you need.