React.js with EmailJS

Earlier one of my client requested to create a static website using React.js with a dynamic contact us/send message form. There were few solutions, either add a whole backend for it or use some services where we can see and receive visitors messages. After having a looking at few packages on npm I found few solutions including nodemailer and EmailJS. EmailJS seemed a perfect fit for the client. Lets see what’s EmailJS provides.

EmailJS

EmailJS helps sending emails using client side technologies only. No server is required — just connect EmailJS to one of the supported email services, create an email template, and use our Javascript library to trigger an email.

Lets start by creating a new react.js app using npm create-react-app. I am naming my React.js folder as frontend. Execute the following command in your terminal.

npm create-react-app frontend

Now once the installation is completed install EmailJS so that we can use EmailJS to send and receive client data.

npm install emailjs-com

EmailJS Setup

To start using EmailJS you need to create an account for it. Follow the below link and create a new account.

Sign Up — EmailJS

You will see a page like this. Now add a new service.

Once you complete the creation of service you’ll get your service ID. Just note it somewhere because we will be using it later.

Now click on Integration on the left panel, you will get your User ID and Access Token. For now just note your User ID for later use.

After that, click on Email Templates and create one. Once you finished creating an Email template you’ll get a template ID. You need to note that template ID along with User ID and Service ID.

Back to Coding

Now once EmailJS setup is completed lets get back to our code.

Lets create a simple form with name, email address and message.

import React from "react";
function Form(){
return(
<div className="form">
<div className="formDiv">
<label htmlFor="">Name</label><br />
<input type="text" placeholder="name" /><br />
<label htmlFor="">Email Address</label><br />
<input type="email" placeholder="email" /><br />
<label htmlFor="">Message</label><br />
<textarea name="" placeholder="message" id="" cols="30" rows="20"></textarea>
<button>Send</button>
</div>
</div>
);
}
export default Form;

Lets handle the input fields and make useState for each of them, handle change and onclick function on send button with validations.

import React, { useState } from "react";
function Form(){
var [name, setName] = useState("");
var [email, setEmail] = useState("");
var [message, setMessage] = useState("");
var [status, setStatus] = useState("");
var [warning, setWarning] = useState("");
function send(){
const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if(name==="" || email==="" || message===""){
setWarning("Please fill all the fields");
}
else{
if(re.test(String(email).toLowerCase())){
setStatus("All set")
}
else{
setWarning("Invalid Email address");
}
}
}
return(
<div className="form">
<div className="formDiv">
<h1>Send Message</h1>
<h3>{status}</h3>
<label htmlFor="">Name</label><br />
<input type="text" placeholder="name" onChange={(e)=>{setName(e.target.value); setWarning(""); setStatus("")}} /><br />
<label htmlFor="">Email Address</label><br />
<input type="email" placeholder="email" onChange={(e)=>{setEmail(e.target.value); setWarning(""); setStatus("")}} /><br />
<label htmlFor="">Message</label><br />
<textarea name="" placeholder="message" onChange={(e)=>{setMessage(e.target.value); setWarning(""); setStatus("")}} id="" cols="30" rows="20"></textarea>
<sub>{warning}</sub><br />
<button onClick={send}>Send</button>
</div>
</div>
);
}
export default Form;

Lets now add EmailJS with Our react.js form.

import React, { useState } from "react";
import emailjs from "emailjs-com";
function Form(){
var [name, setName] = useState("");
var [email, setEmail] = useState("");
var [message, setMessage] = useState("");
var [status, setStatus] = useState("");
var [warning, setWarning] = useState("");
function send(){
const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if(name==="" || email==="" || message===""){
setWarning("Please fill all the fields");
}
else{
if(re.test(String(email).toLowerCase())){
// setStatus("All set");
const templateParams = {
message: message,
from_name: "Musab Abbasi",
user_Email: "abbasimusab2000@gmail.com",
to_name: "Musab"
};
emailjs.send('your service ID','your template ID', templateParams, 'Your user ID')
.then((response) => {
console.log('SUCCESS!', response.status, response.text);
if(response.status=="200"){
console.log("Success");
setEmail("");
setName("");
setMessage("");
setStatus("Message Sent!")
}
}, (err) => {
console.log('FAILED...', err);
setStatus("Something went wrong!");
});
// setStatus("Message sent!");
}
else{
setWarning("Invalid Email address");
}
}
}
return(
<div className="form">
<div className="formDiv">
<h1>Send Message</h1>
<h3>{status}</h3>
<label htmlFor="">Name</label><br />
<input type="text" placeholder="name" value={name} onChange={(e)=>{setName(e.target.value); setWarning(""); setStatus("")}} /><br />
<label htmlFor="">Email Address</label><br />
<input type="email" placeholder="email" value={email} onChange={(e)=>{setEmail(e.target.value); setWarning(""); setStatus("")}} /><br />
<label htmlFor="">Message</label><br />
<textarea name="" placeholder="message" value={message} onChange={(e)=>{setMessage(e.target.value); setWarning(""); setStatus("")}} id="" cols="30" rows="20"></textarea>
<sub>{warning}</sub><br />
<button onClick={send}>Send</button>
</div>
</div>
);
}
export default Form;

Above is the code, just replace the following “Your Template ID”, “Your Template ID” and “Your Service ID” with IDs that you noted earlier.

Now you will be able to send message and receive them in your email.

Let me know if I should make a tutorial of Nodemailer.

My Fiverr ID: Musababbasi | Fiverr