This guide walks you through setting up a fully functional form using Formspree, covering both the basics and optional advanced features. No unnecessary fluff, just what you need to get your form live and working.
What You Need Before You Start
To follow along, you'll need:
- A basic HTML file or a site builder that allows you to embed raw HTML (e.g., Webflow, Carrd, Notion).
- Optional but recommended: a Formspree account for enhanced features like spam protection, submission history, and redirects.
Create a Basic Form
Start with the HTML
Here's a basic contact form you can drop into any HTML file:
<form action="https://formspree.io/f/maqvlcpg" method="POST">
<label>Your Email:
<input type="email" name="email" required>
</label>
<label>Your Message:
<textarea name="message" required></textarea>
</label>
<button type="submit">Send</button>
</form>
action URL with your own Formspree form endpoint (you’ll get it after creating a form on their site).
Understanding the Code
- method="POST": Tells the browser to send form data securely.
- name="email" and name="message": These are the keys Formspree will use to structure the submission.
- required: Prevents empty fields from being submitted.
Submitting the Form: What Happens
When the user clicks Send, the form data is sent to Formspree’s servers. By default:
- If the submission is successful, users see a generic success page.
- If something fails (like missing required fields), they get an error page.
You can customize this behavior later with redirects or in-form messaging.
Create an Account to Unlock More Features
While anonymous forms work, having a Formspree account gives you access to spam filtering, email notifications, and form analytics.
- Sign up at formspree.io.
- Click New Project and create your form.
- You'll be given a custom form endpoint. Replace the example
actionURL with your own.
Customizing the Form
Add More Fields
You can add any HTML input, name, subject, checkboxes, radio buttons:
<input type="text" name="name" required> <input type="checkbox" name="subscribe"> Subscribe to newsletter
Style with CSS
Use your own stylesheet or inline styles to match the form to your site design. Formspree doesn't restrict appearance.
Add Redirect on Submission
Add a hidden input:
<input type="hidden" name="_redirect" value="https://yourdomain.com/thank-you.html">
Spam Protection
Use Formspree’s built-in reCAPTCHA or add a hidden honeypot field:
<input type="text" name="_gotcha" style="display:none">
If this field is filled, the submission is rejected as spam.
Advanced Features
Formspree’s paid tiers unlock useful tools for growing teams and businesses:
- File uploads: Let users attach PDFs, images, etc.
- Multiple recipients: Send submissions to more than one inbox.
- AJAX submission: Keep the user on the same page using JavaScript.
- Webhooks: Trigger external services or automation tools.
Troubleshooting Common Issues
- Form not submitting? Check the form
actionURL. It must match your Formspree project. - 403 or 404 errors? Usually means you're using the wrong endpoint or it's unpublished.
- Spam folder problems? Encourage users to whitelist your domain or use a custom sender email.
6 Best Alternatives to Formspree.io
Formspree is a great option for quickly handling form submissions, especially on static sites. But it's not the perfect fit for everyone. If you’ve hit the limits of the free plan, need features like file uploads, or prefer a more visual form builder, it might be time to look elsewhere.
Some developers also want tighter integration with tools they’re already using, like Netlify, Zapier, or Notion or are simply looking for more control over how forms behave and look. Whatever your reason, there are solid alternatives that can offer more flexibility, better pricing, or a smoother setup.
1. FormSubmit
Website: formsubmit.co
Why it’s good: No JavaScript or backend needed. Just add an HTML form and you're done. Simple, fast, and effective for small static sites.
Best for: Developers and designers looking for a quick way to handle email submissions without logging in or signing up.
2. Getform
Website: getform.io
Why it’s good: Includes powerful features like file uploads, spam filtering, integrations (Zapier, Slack), and webhook support.
Best for: JAMstack developers who need flexibility and integrations in production sites.
3. Formspark
Website: formspark.io
Why it’s good: Fast and lightweight with a privacy-first approach. Great documentation and a developer-friendly workflow.
Best for: Teams or solo devs who value clean APIs, minimal UI, and automation hooks.
4. Basin
Website: usebasin.com
Why it’s good: Spam protection, team collaboration, autoresponders, and custom branding all in one package.
Best for: Agencies and SaaS teams who need form data to flow cleanly into internal workflows.
5. Tally
Website: tally.so
Why it’s good: A Notion-style, no-code form builder with strong customization, logic, and payment features—free for most users.
Best for: Non-developers who want polished, embeddable forms without touching code.
6. Netlify Forms
Website: netlify.com
Why it’s good: Fully integrated with static site deployment on Netlify. No extra config if you're already hosting there.
Best for: Developers using Netlify with static site generators like Hugo, Gatsby, or Jekyll.
FAQs
- Do I need JavaScript? No. Formspree works with plain HTML, but JavaScript can enhance UX.
- Is it secure? Yes. Data is transmitted over HTTPS. Paid plans offer extra security features.
- Can I use it with a static site? Absolutely. That's one of Formspree’s main selling points.
- What's the free plan limit? As of now, 50 submissions per month and basic features only.
Final Thoughts
Formspree is a clean, straightforward tool for adding functional forms to websites. Whether you just need a contact form or something more complex with validation and automation, Formspree lets you scale as needed. Keep your forms simple, secure, and user-friendly and they’ll do the job.
For deeper customization, visit the official Formspree documentation.
