React Contact Form with Email (No Backend Required)

Building a contact form in React is straightforward, but sending those form submissions to your email typically requires backend infrastructure. What if you could handle form submissions and receive emails without setting up a Node.js server, configuring SMTP, or managing databases?

In this comprehensive tutorial, you'll learn how to create a production-ready React contact form that sends emails directly to your inbox using Static Forms - no backend code required. We'll use modern React patterns including hooks, implement form validation, add loading states, and include spam protection.

Whether you're building a portfolio, a business website, or any React application that needs a contact form, this guide provides everything you need to implement email functionality in minutes.

What You'll Build

By the end of this tutorial, you'll have a React contact form with:

✅ Modern React hooks (useState, useCallback)
✅ Form validation with error messages
✅ Loading states and user feedback
✅ Email notifications to your inbox
✅ Spam protection (honeypot + optional reCAPTCHA)
✅ Responsive design
✅ Accessible markup

Prerequisites

Before starting, make sure you have:

Basic knowledge of React and JavaScript
Node.js and npm installed
A React app created (via Create React App, Vite, or similar)
A Static Forms account - sign up free
Your API key from the dashboard

Step 1: Create the Basic Contact Form Component

Let's start by creating a new component called ContactForm.js:

JSX

Step 2: Add Styling

Create ContactForm.css for a professional look:

CSS

Step 3: Add Form Validation

Let's enhance the component with client-side validation:

JSX

Add error styling to your CSS:

CSS

Step 4: Add reCAPTCHA Protection

For production applications, add spam protection with reCAPTCHA. First, install the React reCAPTCHA package:

Bash

Update your component:

JSX

Don't forget to configure your reCAPTCHA secret key in your Static Forms settings.

Learn more in our reCAPTCHA integration guide.

Step 5: Use Environment Variables

For security, store your API keys in environment variables. Create a .env file in your project root:

Plain Text

Update your component to use environment variables:

JSX

Important: Variables must start with REACT_APP_ to be accessible in Create React App.

Step 6: Add to Your App

Import and use the component in your main app:

JSX

Advanced Features

Custom Hook for Form Handling

Create a reusable custom hook:

JSX

Use the custom hook:

JSX

TypeScript Version

For TypeScript projects, add type definitions:

TypeScript

Troubleshooting

Common Issues

Form not submitting:

Check that your API key is correct
Verify the API endpoint URL
Check browser console for errors
Ensure Content-Type header is set to application/json

Not receiving emails:

Verify your API key in the dashboard
Check your spam folder
Confirm your email is verified with Static Forms

CORS errors:

Make sure you're using the correct API endpoint
Verify you're sending JSON, not FormData
Check that headers are properly set

Production Checklist

Before deploying to production:

✅ Replace YOUR_API_KEY_HERE with environment variable
✅ Add reCAPTCHA for spam protection
✅ Test form on different devices and browsers
✅ Implement proper error handling
✅ Add loading states for better UX
✅ Verify email notifications are working
✅ Test with various input scenarios
✅ Add analytics tracking (optional)

Conclusion

You now have a production-ready React contact form that sends emails without any backend infrastructure. This solution:

✅ Works with any React application (CRA, Vite, Next.js, etc.)
✅ Provides excellent user experience with validation and feedback
✅ Includes spam protection
✅ Sends emails reliably to your inbox
✅ Requires no server maintenance

Static Forms handles all the complexity of email delivery, spam filtering, and infrastructure management, allowing you to focus on building great React applications.

Ready to add email functionality to your React app? Sign up for Static Forms and start receiving form submissions in minutes!

For framework-specific guides, check out our tutorials for Next.js, Gatsby, and HTML forms.