Using StaticForms with Gatsby: Complete Integration Guide

Building a static site with Gatsby doesn't mean you have to sacrifice form functionality. StaticForms makes it easy to add contact forms and other data collection features to your Gatsby site without writing backend code or managing servers.

In this guide, we'll walk through integrating StaticForms with Gatsby, including basic setup and spam protection with reCAPTCHA or privacy-first Altcha CAPTCHA.

Why StaticForms for Gatsby?

Gatsby generates static HTML at build time with no server to process forms. StaticForms bridges this gap with:

✅ No Backend Required: Handle forms without servers or serverless functions
✅ Instant Setup: Add your API key and start receiving submissions
✅ Email Notifications: Get submissions delivered to your inbox
✅ Spam Protection: Honeypot, reCAPTCHA, and Altcha CAPTCHA options
✅ File Uploads: Accept attachments up to specified limits
✅ Webhook Integration: Connect to external services (paid plans: Pro/Advanced)

Prerequisites

A Gatsby site (version 4.x or 5.x)
A StaticForms account (sign up here)
Your API key from your dashboard

Basic Contact Form

Create a contact form component in your Gatsby project:

JSX

Add the form to any page:

JSX

That's it! You now have a fully functional contact form. 🎉

Adding reCAPTCHA Protection

Install the package and get your keys from Google reCAPTCHA Admin:

Bash

Add reCAPTCHA to your form:

JSX

Learn more in our reCAPTCHA guide.

Privacy-First: Altcha CAPTCHA

For GDPR-compliant spam protection without tracking, use Altcha CAPTCHA (paid plans: Pro/Advanced):

JSX

See our Altcha implementation guide for details.

Using Environment Variables

Protect your API keys with environment variables. Create .env.development:

Plain Text

Use in your components:

JSX

Important: Gatsby requires the GATSBY_ prefix for browser-accessible variables.

Advanced Features

Custom Redirects

JSX

Custom Fields

Add extra data with $ prefix:

JSX

File Uploads

See our file upload tutorial for implementation details.

Troubleshooting

Not receiving emails?

Verify your API key in your dashboard
Check spam folder
Confirm email verification with StaticForms

Build errors?

Restart Gatsby dev server after adding environment variables
Check GATSBY_ prefix on all variables
Ensure dependencies are installed

Environment variables not working?

Variables must be in project root
Restart server after changes
Verify .env files aren't in .gitignore

Conclusion

StaticForms provides a maintenance-free form solution for Gatsby sites. Choose from honeypot, reCAPTCHA, or privacy-focused Altcha CAPTCHA for spam protection. The free tier works great for personal projects, while Pro plans offer advanced features for larger sites.

Ready to add forms to your Gatsby site? Sign up for StaticForms and get started in minutes!

For other frameworks, check out our guides for Next.js and Nuxt.js.

Happy coding! 🚀