React Contact Form: Serverless vs Managed Backends

Updated 6 November 2026 · Standard formula, shown below

This guide walks you through choosing and implementing a backend for a React contact form, comparing serverless functions (like AWS Lambda, Vercel Functions) with managed backend services (like Firebase, Supabase, Formspree). You’ll learn when to use each, how to set them up step-by-step, and how to avoid common pitfalls. No prior backend experience is needed, but basic React and JavaScript knowledge is assumed.

What You’ll Need

An existing React project (or create one with create-react-app or Vite).
Node.js and npm installed.
A code editor (VS Code recommended).
An account with a serverless provider (e.g., Vercel, Netlify) or a managed backend service (e.g., Firebase, Supabase, Formspree).
Basic understanding of environment variables and HTTP requests.

Step-by-Step

Step 1: Define Your Requirements

Before coding, decide what you need: Where should form submissions go? Do you need to store data in a database, send email notifications, or integrate with a CRM? Serverless functions are great for custom logic and email sending via APIs like SendGrid. Managed backends often provide built-in email, storage, and admin UI, reducing setup time.

Step 2: Choose Your Approach

For a simple contact form that just sends an email, a managed service like Formspree is fastest—no backend code at all. If you need to process data, validate, or store submissions, a serverless function gives you full control. For a full-featured app with user auth and real-time database, a managed backend like Firebase or Supabase is ideal.

Step 3: Set Up Environment Variables

Never hardcode API keys or endpoints in your React code. Create a .env file in your project root and add variables like REACT_APP_FORM_ENDPOINT for managed services or REACT_APP_API_URL for serverless functions. In serverless, you’ll also set environment variables in your deployment platform’s dashboard.

Step 4: Build the React Form Component

Create a standard controlled form component using useState for fields (name, email, message). Handle submission with async/await and fetch. Example:

const handleSubmit = async (e) => {
  e.preventDefault();
  const res = await fetch(process.env.REACT_APP_FORM_ENDPOINT, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(formData)
  });
  if (res.ok) setStatus('success');
  else setStatus('error');
};

Step 5: Implement Serverless Function (if chosen)

If you’re using Vercel, create an api/contact.js file in your project root. Export a default function that receives the request, parses the JSON body, and sends an email using a service like SendGrid or just stores it in a database. Example:

export default async function handler(req, res) {
  if (req.method !== 'POST') return res.status(405).end();
  const { name, email, message } = req.body;
  // Validate and send email or store
  res.status(200).json({ ok: true });
}

For Netlify, place the function in netlify/functions/contact.js and export a handler.

Step 6: Configure Managed Backend (if chosen)

For Formspree: create a form in your dashboard, get the endpoint URL, and set it as REACT_APP_FORM_ENDPOINT. For Firebase: initialize Firebase in your app, use Firestore to add a document on submit. For Supabase: use the supabase-js client to insert into a table.

Step 7: Handle Errors and Loading States

Always disable the submit button while the request is in flight to prevent duplicate submissions. Show a spinner or “Sending…” text. On failure, display a user-friendly error message. On success, clear the form and show a thank-you message.

Step 8: Test Locally and Deploy

Run npm start to test your form with the backend. For serverless, you’ll need to run a local emulator (e.g., vercel dev or netlify dev). Once working, deploy your app to your chosen platform. Ensure environment variables are set in the production environment.

Common Mistakes

Exposing API keys in client-side code. Always use server-side environment variables.
Not validating input on the server. Client-side validation is easily bypassed.
Forgetting to handle CORS for serverless functions. Add appropriate headers if needed.
Using GET for form submissions. Always use POST.
Not handling network errors gracefully—users see a generic failure.

Tips

Use a honeypot field (hidden input) to reduce spam.
Add rate limiting on the server to prevent abuse.
For email delivery, use a dedicated service like SendGrid or AWS SES; don’t rely on mail() from serverless functions.
Keep your form component reusable by passing the endpoint as a prop.
Log submissions to a database even if you also send email, for record-keeping.

Troubleshooting

Form submits but no email arrives: Check the server logs. For serverless, verify the email API key and recipient address. For managed, check the service’s dashboard for activity logs.
CORS errors: If using a serverless function on a different domain, ensure the function sets Access-Control-Allow-Origin to your app’s domain, and handle preflight OPTIONS requests.
Environment variables not working: In React, they must start with REACT_APP_ to be exposed. Restart the dev server after changing them.
Function times out: Serverless functions have execution time limits. If your email API is slow, consider using a queue or a managed service.
Spam submissions: Implement a CAPTCHA (e.g., reCAPTCHA) or a simple math question as a fallback.

Frequently Asked Questions

Can I use both serverless and managed backend together?

Yes, you can use a serverless function to process the form and then forward data to a managed database or email service. This gives you flexibility and control.

Which is cheaper for a small contact form?

Managed services like Formspree offer free tiers for low volume. Serverless functions also have free tiers on Vercel/Netlify, but you may incur costs if you exceed limits. Compare based on your expected traffic.

Do I need a backend at all for a contact form?

No, you can use a third-party form backend like Formspree or Getform that handles everything. You just link to their endpoint—no custom backend code required.

How do I protect my form from spam?

Use a honeypot field, add a CAPTCHA, and implement server-side rate limiting. Managed services often have built-in spam filtering.

Can I use serverless functions with any React hosting?

Serverless functions are tied to a specific platform (e.g., Vercel, Netlify, AWS). If you host your React app elsewhere, you may need to use a separate serverless provider or a managed backend.

What if I need to attach files to the form?

Managed backends like Firebase or Supabase can handle file uploads easily. For serverless, you’ll need to handle multipart/form-data and store files in cloud storage like S3.

Method: the standard formula for this calculation, rounded as each result states. See how the calculators work or report an error.