Send Emails using ReactJS from EmailJS

Yes, you read it right ! Finally a functionality that lets you send email from your ReactJS based frontend to your mail address (without popping up the inbuilt mail functionality).

Let’s head on to the solution without discussing the issue any further. Go to emailjs.com

We need to sign up here and set up some backend for the code to workout otherwise how will it know where to send the mail to ? 🤔

After you have successfully signed in, this is how it will look like:

Go to Add New Service button,

I am going to choose Gmail since it is popular and almost everybody uses it and its the only one I have tested. So, lets choose this service.

After this, click on Connect Account, a pop up appears through which you can link your available Gmail account.

Give it the access to send emails on your behalf. And click Continue. After you have successfully connected to your Gmail account, you can see it below your Service ID, like this:

After this click on Create Service. You’ll see something like this:

Now we need to create a new email template, a layout in which we would like to receive a mail.

Go to Email Template, click on Create New Template, now you can edit this default layout or same it that way. If the email-template is to your liking, then you can save it.

This is the layout I have edited for myself:

This is how it looks like

Another stage completed ! Let’s now head on to the ReactJS part of it.

We are here at the ‘coding’ part of it. We need to install the emailjs package in our code by npm install emailjs-com -- save Great, after this is done, lets add the correct code snippets. Go to emailjs.com/docs/examples/reactjs Here you can see the code. There’s a function sendEmail() which can be easily implemented on a button click or on form submit. So, lets do that. You can copy the exact and paste it wherever you require it. Don’t forget to include the import statement. Here’s how you can use the code:

import emailjs from "emailjs-com";
export default function Form() {
  function sendEmail(e) {
    e.preventDefault();

    emailjs
      .sendForm(
        "SERVICE_ID",
        "TEMPLATE_ID",
        e.target,
        "USER_ID"
      )
      .then(
        (result) => {
          console.log(result.text);
        },
        (error) => {
          console.log(error.text);
        }
      );
    e.target.reset();
  }
  return (
    <div className="form-group-total">
      <form onSubmit={sendEmail}>
        <input type="text" className="form-control form-control-md" id="name" placeholder="Enter your name" name="name" required="required"/>
        <input type="text" className="form-control form-control-md" id="email" placeholder="Your email address" name="email" required="required"/>
         <input type="text" className="form-control form-control-md" id="discussion-title" placeholder="Enter the discussion title" name="subject"required="required"/>
         <textarea className="form-control"  name="message"  id="message" style={{ height: 100 }}  placeholder="Write your message" required="required"></textarea>
          <br /> 
          <button type="submit" className="contact-button">
            Send Message Now
          </button>
        </form>
       </div>
  );
}

This is how my form looks like:

Service ID to be replaced by your own Service ID, the same can be found in the above screenshots incase you are unable to find them.
Template ID to be replaced by your own Template ID, under Email Templates and choosing the template id of your current template.
User ID can be replaced by your own User ID, it can be found under Integration tab -> under API tab -> User ID. Now, let’s test it !!

This is the message I want to send

And This is the mail I received directly in my INBOX