AWS Builder Center

Builder Center

Build a Serverless Contact Form in React with AWS

Learn how to build a scalable, serverless backend for a React contact form using AWS Lambda, API Gateway, and Amazon SES without managing any servers.

vikash sharma

Web developer learning AWS, Cloud & DevOps. Interested in building and deploying applications.

Introduction

When building client-side applications with React or Next.js, handling form submissions (like a contact form) usually requires a backend server. Instead of provisioning an EC2 instance or managing dedicated servers, we can build a completely serverless solution using AWS Lambda and Amazon API Gateway.
In this guide, I'll walk you through setting up a simple serverless contact form backend for your React application.

Architecture Overview

  1. Frontend (React/Next.js): Sends user form inputs via a POST request.
  2. Amazon API Gateway: Exposes a public HTTPS endpoint and forwards the request payload.
  3. AWS Lambda: Processes the data and handles logic (e.g., sending an email via Amazon SES or saving to DynamoDB).

Step 1: Create the AWS Lambda Function

  1. Go to the AWS Management Console and search for Lambda.
  2. Click Create function and select Author from scratch.
  3. Name your function (e.g., processContactForm) and select Node.js as the runtime.
  4. Add the following sample Node.js code to handle incoming requests:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
exports.handler = async (event) => {
const body = JSON.parse(event.body || '{}');

// Process form data (Name, Email, Message)
console.log("Contact Form Submission:", body);

return {
statusCode: 200,
headers: {
"Access-Control-Allow-Origin": "*", // Allow CORS for React app
"Access-Control-Allow-Headers": "Content-Type",
"Access-Control-Allow-Methods": "OPTIONS,POST"
},
body: JSON.stringify({ message: "Form submitted successfully!" }),
};
};

Step 2: Set Up Amazon API Gateway

  • Open API Gateway in the AWS Console and click Create API.
  • Choose HTTP API and click Build.
  • Add an integration and select your Lambda function (processContactForm).
  • Set the route method to POST and path to /contact.
  • Enable CORS in API Gateway settings to allow requests from your React application domain.

Step 3: Connect to Your React Application

In your React component, send the form data to the generated API Gateway URL:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
import React, { useState } from 'react';

const ContactForm = () => {
const [formData, setFormData] = useState({ name: '', email: '', message: '' });

const handleSubmit = async (e) => {
e.preventDefault();
try {
const response = await fetch('YOUR_API_GATEWAY_URL/contact', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(formData),
});
const result = await response.json();
alert(result.message);
} catch (error) {
console.error("Error submitting form:", error);
}
};

return (
<form onSubmit={handleSubmit}>
<input
type="text"
placeholder="Your Name"
onChange={(e) => setFormData({...formData, name: e.target.value})}
/>
<input
type="email"
placeholder="Your Email"
onChange={(e) => setFormData({...formData, email: e.target.value})}
/>
<textarea
placeholder="Your Message"
onChange={(e) => setFormData({...formData, message: e.target.value})}
/>
<button type="submit">Send Message</button>
</form>
);
};

export default ContactForm;

Conclusion

By leveraging AWS Lambda and API Gateway, you can add dynamic backend functionality to static React sites effortlessly. This serverless pattern is cost-effective, auto-scalable, and requires zero infrastructure management.
Any opinions in this article are those of the individual author and may not reflect the opinions of AWS.
Enjoyed reading this content? Let the author know!

Your likes, comments, shares, and saves help creators reach more builders.

Loading recommendations

Loading article