Serverless Email Integration using React and EmailJs

React Js, EmailJs

Image by vectorjuice on Freepik

I was building a Next js React app the last time and I was wondering if I could handle contact form solely on the client side without any backend setups. That’s when I discovered Email js after some googling.

In this article, I’ll guide you through setting up an easy way to get messages from your website sent to any email you want.

Prerequisites: A prior understanding of React is recommended, as it will serve as the frontend framework for the demonstration.

Content

1. Setting Up Your React Application Form
2. Adding EmailJs

Setting Up Your React Application Form

Let’s start by installing our React app.

npx create-react-app form-with-email-js

Now, we can create our simple form (with name, emailand message )App.js as follow

import React, { useState } from "react";
import "./App.css";

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

  const handleInputChange = (event) => {
    const { name, value } = event.target;
    setFormData({
      ...formData,
      [name]: value,
    });
  }…