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:

Step 2: Add Styling

Create ContactForm.css for a professional look:

Step 3: Add Form Validation

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

Add error styling to your CSS:

Step 4: Add reCAPTCHA Protection

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

Update your component:

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:

Update your component to use environment variables:

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:

Advanced Features

Custom Hook for Form Handling

Create a reusable custom hook:

Use the custom hook:

TypeScript Version

For TypeScript projects, add type definitions:

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.