Send emails using React through EmailJs

Hello guys, I’m Senura Jayadeva. In this article, I will guide you to send emails with the Emailjs.

What is EmailJS ?

It allows sending an email directly from Javascript, without backend development. The developers create one or more email templates (dynamic content supported) and then trigger an email using our Javascript SDK, specifying the template, and the dynamic parameters for rendering the email.

EmailJS is a tool in the Email API category of a tech stack.

Getting Started

Now I’m going to create my react application by using npx create-react-app sendemail

Okay, after the installation I will open the project in VS Code. Then in the App.js file, I will continue my implementation. First I will clear the default coding in the return function and I’m going add the following code into the return function.

<div className=”container”><div style={{ marginTop: “5%” }}><form><div class=”form-group”><label>Your Name</label><input name=”name” type=”text” class=”form-control”     placeholder=”Enter Your Name” /></div><div class=”form-group”><label>Email address</label><input name=”email” type=”email” class=”form-control” placeholder=”Enter Your Email” /></div><div class="form-group"><label>Message</label>

<textarea name="message" class="form-control" placeholder="Enter Your Message"></textarea>
</div><button type=”submit” class=”btn btn-primary”>Send Email</button></form></div></div>

In this tutorial, I’m using Bootstrap for stylings. So make sure to import the stylesheet <link> into your <head> in the index.html before all other stylesheets to load bootstrap CSS.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

Now give npm start command and check everything is okay with the user interface. ( before giving npm start make sure you in the correct path ). If everything is fine you will see an interface like this.

EmailJS Integration

First, go to https://www.emailjs.com and create an account.

Once you created an account you will navigate to a page like this.

The next thing is adding a new email service. So when I clicked the Add New Service button, it shows multiple different email services like given in the below

I’m going to do this with Gmail. So I’m clicking on the Gmail option. Then it will navigate to this.

As I mentioned above, I’m giving Service Name as Gmail and Service ID as gmail. Then click on the Connect Account and choose your email. Finally, click on the Create Service to finish the process.

After that, you can see your email service is successfully added.

Then we have to create an email template. You can see there is an option called Email Templates on the left sidebar. When you go there you can see a default template like this

Now I’m going to edit the template.

Here you can see there are 3 words within the double curly braces. If you go to the app.js file you can see these are exact same words which I have given as the name property of input fields in the form.

Now let’s save the email template by pressing the Save button. When we are going to the Email Templates page we can see our new Contact Form is present.

So the next part is to go ahead to the code and get this setup. Now you have to install the emailjs so type npm install emailjs-com --save

Then once that’s done import emailjs in the app.js.

import emailjs from 'emailjs-com';

Then I grab a code from emailjs docs and bring it to the app.js.

function sendEmail(e) {
e.preventDefault();
emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', e.target, 'YOUR_USER_ID')
.then((result) => {
console.log(result.text);
}, (error) => {
console.log(error.text);
});
}

In the above code segment, you can see they are asking for SERVICE_ID, TEMPLATE_ID, and USER_ID

I think you can remember when I create the email service I gave it SERVICE_ID as gmail. If you can’t remember you can check it from here.

Next, we have to give the TEMPLATE_ID. You can bring it from here

Finally, we have to give the USER_ID. In the left sidebar, you can see a tab called Integration. You can find the USER_ID from there.

After replacing the correct value for SERVICE_ID, TEMPLATE_ID, and USER_ID it should be like this,

Finally, make sure to call the sendEmail method in the form element by using onSumit JavaScript event.

Testing

After filling the input fields click on the Send Email button and check your email

Here is the result

This is the end of the tutorial. Hope you learn something. Thank You!

GitHub Repository: https://github.com/SenuraJayadeva/SendEmailWithEmailJs

Software Engineering undergraduate of Sri Lanka Institute of Information Technology | Physical Science Undergraduate of University of Sri Jayewardenepura