How to send 🚀 emails using React through EmailJs(No server code needed!)

Photo by Davide Baraldi on Unsplash

Send messages to your email account using a third-party email service provider called EmailJs. EmailJs allows you to create a free account. The free plan comes with 200 monthly requests for testing purposes and two(2) email templates. All you need to do is to head over to emailjs.com to register or create an account.

I recommend EmailJs because I have used it many times throughout my development journey, and I am confident in their services(sending emails). Also, I am not sponsored by EmailJs to write this.

Getting Started

Step 1: Log in

Log in to your newly created account with the email you registered the account with and a password. On your dashboard, navigate to Email Services to add an email service. EmailJs supports a variety of email services, both transactional and personal email services. Examples of personal email services supported are Gmail, Outlook, Yahoo, iCloud, SMTP server, etc. For transactional email services, EmailJs supports services such as SendGrid, Mailgun, Mailjet, Amazon SES, etc.

Step 2: Connect to an Email Service

The next step is to select an email service. In this blog, I will use Gmail. Follow the steps below to connect your email:

1. Click on the Add New Service button.

2. Select your email service (as I said earlier, I will use Gmail).

Add new service

3. Configure the services by providing a name and a service id. In this example, I used Gmail for the name and gmail for the service id.

Configure Service

4. Next, click on the connect button to choose a Gmail account to connect with and grant EmailJs permission to send an email on your behalf.

Connect account

Choose an account

5. Finally, click on Create Service to add the email service.

Create service

Step 3: Create an Email template

An email template is defining the structure of how your email should be sent. The subject, sender name, message, etc. EmailJs comes with a default template. You can choose to create your template to suit how your contact form has been designed.

1. Click on Email Templates on the left sidebar.

Create an email template

2. Click on the create new template button.

Create a new template

3. Modify the default template provided by EmailJs to suit the contact form you have created.

Modifying the default template

4. Save the template.

Send email from React. 🚀

Connecting your React form to EmailJs is very straight forward and simple. Fortunately, EmailJs has an example code for Reactjs. All you will need to do is to copy the code in the example and paste it into your Reactjs project.

import React from 'react';
import emailjs from 'emailjs-com';

import './ContactUs.css';

export default function ContactUs() {

  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);
      });
  }

  return (
    <form className="contact-form" onSubmit={sendEmail}>
      <label>Name</label>
      <input type="text" name="name" />
      <label>Email</label>
      <input type="email" name="email" />
      <label>Message</label>
      <textarea name="message" />
      <input type="submit" value="Send" />
    </form>
  );
}

Explaining the code above

First of all, install EmailJs SDK using npm.

npm i emailjs-com

Next, we import EmailJs to get access to certain methods that will help us connect our React application to EmailJs.

import emailjs from 'emailjs-com'

Create a function to send the email. In this example, I created a function called sendEmail.

function sendEmail(e) {
  e.preventDefault() // prevents the default behaviour of the form
}

Within the sendEmail function, we will now use emailjs.sendForm() to send our message. The sendForm() takes in 4 arguments and they are:

• Service ID: The service ID used in this example was gmail.

Service id

• Template ID: A template Id is provided to you after creating an email template. The ID can be found right under the name of the email template
• Target: The values from the form input fields
• User ID: The User ID can be obtained from the Integration page, under the API token section.

function sendEmail(e) {
  e.preventDefault() // prevents the default behaviour of the form
  
  emailjs.sendForm('gmail', 'tmp_1235', 
    e.target, 'user_1234')
    .then((result) => {
          console.log(result.text);
      }, 
       (error) => {
          console.log(error.text);
       });
  }

Note: One important thing to note when naming your input fields is to make sure the input name values match with the EmailJs template placeholders.

EmailJs Template placeholders

<form onSubmit={sendEmail)>
  <label>Name</label>
  /* Input name must correspond with EmailJs 
     template placehoder variables */
  <input type="text" name={name} />
  <label>Email</label>
  <input type="email" name="email" />
  <label>Message</label>
  <textarea name="message" />
  <input type="submit" value="Send" />
</form>

Finally, add the sendEmail function to the form.

Conclusion

I hope you find this blog tutorial useful and also give EmailJs a try!😊