How to Build a Contact Form with React and EmailJS

Building a Contact Form with React and EmailJS

In the ever-evolving digital landscape, seamless communication is key. Whether you're a recruiter looking for a passionate developer or a founder with a bold idea, a well-designed contact form is essential. In this blog, we’ll walk through how to build an elegant and functional contact form using React and EmailJS, ensuring smooth interactions with potential collaborators and clients.

Why EmailJS?

EmailJS allows you to send emails directly from your front-end application without requiring a back-end server. This makes it an excellent choice for contact forms, portfolio websites, and small projects where simplicity is crucial.

How to Create an EmailJS Account

To integrate EmailJS into your project, follow these steps to set up an account and obtain the necessary credentials:

Sign Up on EmailJS
- Go to EmailJS and create a free account.
- Log in to your dashboard.
Create an Email Service
- Click on “Email Services” in the sidebar.
- Select “Add New Service.”
- Choose an email provider (e.g., Gmail, Outlook, etc.) and follow the setup instructions.
Create an Email Template
- Navigate to “Email Templates.”
- Click on “Create New Template.”
- Customize the template with the fields you need (e.g., name, email, message).
- Save the template.
Obtain Your Credentials
- In your dashboard, navigate to “Integration.”
- Copy your Service ID, Template ID, and Public Key.
Install EmailJS in Your React Project
- Run the following command in your terminal:
```
  npm install emailjs-com
```
- Now, you are ready to integrate EmailJS into your React contact form!

Building the Contact Form

Our React Contact Form is designed to be clean, minimalistic, and highly user-friendly. It includes:

Input validation to ensure proper data entry
A visually appealing design for better user engagement
Integration with EmailJS for email handling
User feedback to indicate successful or failed form submissions

The Contact Component

Let's break down the implementation step by step.

1. Setting Up the Component

We start by importing the necessary dependencies and defining the Contact functional component:

import React, { useState } from "react";
import "./contact.css";
import mailIcon from "../../assets/mail_icon.svg";
import location from "../../assets/location_icon.svg";
import callIcon from "../../assets/call_icon.svg";
import emailjs from "emailjs-com";

We initialize the component state for handling form submission status:

const [isSubmitting, setIsSubmitting] = useState(false);

2. Handling Form Submission

The form uses a onSubmit function to capture user input, validate it, and send an email using EmailJS.

const onSubmit = (event) => {
  event.preventDefault();

  const name = event.target.name.value.trim();
  const email = event.target.email.value.trim();
  const message = event.target.message.value.trim();

  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!name || !email || !message) {
    alert("Please fill out all fields.");
    return;
  }
  if (!emailRegex.test(email)) {
    alert("Please enter a valid email address.");
    return;
  }

  setIsSubmitting(true);

  emailjs
    .sendForm(
      "service_id",       // Replace with your Service ID
      "template_xxxxxx",       // Replace with your Template ID
      event.target,
      "your_public_key_here"   // Replace with your Public Key
    )
    .then(
      (result) => {
        console.log("Email sent:", result.text);
        alert("Thank you! Your message has been sent.");
        event.target.reset();
      },
      (error) => {
        console.error("Email error:", error.text);
        alert("Oops! Something went wrong. Please try again later.");
      }
    )
    .finally(() => {
      setIsSubmitting(false);
    });
};

3. Designing the UI

The form is divided into two sections:

A left section that provides contact information (email, phone, and location)
A right section that contains the input fields for users to fill in

<div id="contact" className="contact">
  <div className="contact-title">
    <h1>Let’s Connect</h1>
  </div>
  <div className="contact-section">
    <div className="contact-left">
      <h1>Open to Work & Collaboration</h1>
      <p>
        Whether you're a recruiter looking for a passionate developer, or a founder with a bold idea - I’d love to hear from you. Let’s build something impactful together.
      </p>
      <div className="contact-details">
        <div className="contact-detail">
          <img src={mailIcon} alt="mail" />
          <p>youremailid @gmail.com</p>
        </div>
        <div className="contact-detail">
          <img src={callIcon} alt="call" />
          <p>(+91) 99999 99999</p>
        </div>
        <div className="contact-detail">
          <img src={location} alt="location" />
          <p>Bengaluru, India</p>
        </div>
      </div>
    </div>
    <form onSubmit={onSubmit} className="contact-right">
      <label htmlFor="name">Full Name</label>
      <input id="name" type="text" name="name" placeholder="Enter Your Name" />
      <label htmlFor="email">Email Address</label>
      <input id="email" type="email" name="email" placeholder="Enter your email" />
      <label htmlFor="message">Message</label>
      <textarea id="message" name="message" rows="8" placeholder="Tell me how I can help you..."></textarea>
      <button type="submit" className="contact-submit" disabled={isSubmitting}>
        {isSubmitting ? "Submitting..." : "Submit Now"}
      </button>
    </form>
  </div>
</div>

Final Thoughts

Building a contact form with React and EmailJS simplifies communication, enhances user experience, and eliminates the need for a backend server. With real-time validation, clear user feedback, and a modern design, this form ensures a seamless interaction for visitors.

If you're working on a portfolio or business website, consider implementing this React Contact Form to foster effortless communication with potential clients and collaborators. Happy coding!

Building a Contact Form with React and EmailJS