Send Emails in React Without a Backend using EmailJS

Introduction

In a typical web application, sending emails usually requires a backend server. But what if you're building a static React app or a portfolio site and you still want users to contact you via email?

That's where EmailJS comes in — a service that lets you send emails directly from the frontend using just JavaScript. In this post, you'll learn how to integrate EmailJS into your React application in minutes.

What You’ll Need

• A basic React app (created with create-react-app or any React setup)

• An EmailJS account

@emailjs/browser package

Step 1: Install the EmailJS SDK

npm install @emailjs/browser

---

Step 2: Set Up EmailJS

1. Go to EmailJS and create a free account.

2. Add an Email Service (like Gmail, Outlook, etc.)

3. Create an Email Template with variables like {{name}}, {{message}}, {{email}}.

4. Get the following:

   • Service ID

   • Template ID

   • Public Key (formerly User ID)

---

Step 3: Create Your React Contact Form

import React, { useRef } from "react";
import emailjs from "@emailjs/browser";

const ContactForm = () => {
  const form = useRef();

  const sendEmail = (e) => {
    e.preventDefault();

    emailjs.sendForm(
      'your_service_id',
      'your_template_id',
      form.current,
      'your_public_key'
    ).then(
      (result) => {
        alert("Email sent successfully!");
        console.log(result.text);
      },
      (error) => {
        alert("Failed to send email. Please try again.");
        console.error(error.text);
      }
    );
  };

  return (
    <form ref={form} onSubmit={sendEmail}>
      <label>Name</label>
      <input type="text" name="name" required />

      <label>Email</label>
      <input type="email" name="email" required />

      <label>Message</label>
      <textarea name="message" required />

      <button type="submit">Send</button>
    </form>
  );
};

export default ContactForm;

---

Final Output

You now have a working contact form in React that sends emails without any backend.

Thanks Community, Please Like this Post, Have a Great day!!