Send Emails to the User Input email or yourself in React using EmailJS

Do you ever think of sending emails to the user email ID, or receive emails to yourself?

Let’s see you have built a contact form in ReactJS/Javascript for your portfolio, now if a recruiter/friend wants to contact you, he/she can enter the details and submit it, now you want the details of the person but don’t want to build a backend-database for it, we can simply send the details of the person to your email ID.

Another example, you have created a quiz form on a website, and the person answers the quiz and submits it with his/her details, now we need to send the score of the quiz or give an appreciation to the person, we can send an email with the quiz score or a given content to the user’s email Id.

How? Without a database? Yes, both implementations of these examples are possible using EmailJs in React.

Step 1 : Set up EmailJS

Visit https://www.emailjs.com/ and sign up for free.

Enter your name, email, and password to sign up, and thereafter sign in with the same

Now you will be redirected to the dashboard where we can now play with EmailJS

Click on Add Service, this is the service used to send email

You can choose anyone of these.

Lets select Gmail.

After Clicking on the service provider, create service dialog appears, where it automatically gives a service ID and also do check the test email configuration,

Now the most important part is Connect Account here we need to choose an email Id where using this email, it will send emails to the user. Also grant the send emails on your behalf option access

click on create service

Voila, Gmail Service with a unique service ID is created for you.

You can send emails using this unique service ID

Step 2 : Create a React JS form

Before entering into the email template section, lets make a React JS form where the user can enter the details.

I have created a normal form having Name, emailID and about yourself section.

We are only in getting these data and sending it to them/yourself through email.

While in ReactJS, it will be convenient to use Hooks like here I have used useState hook. Also update the respective useState Hook using setUser_details.

We get the details in the state – user_details containing name, emailID & about.

Now lets implement emailJS

We need to import emailJS module using simple command npm i emailjs-com

And importing it on the top

On Clicking the Submit Button, the function onSubmit gets executed.

Html_message : the message you want to display in the email (We can also use the details of the user in the message)

toSend: the object having the parameters which has to be sent to EmailJS, i.e. emailID, name, html_message.

Step 3 : Creating EmailJS Template

As we created form, lets create EmailJS Template,

Hop on to the template part on the left hand side dashboard.

Click on New Template.

As we know, toSend is the detail sending to emailJS, so we need to use the exact variable name mentioned in the toSend object in the emailJS template.

Here, we use email, name, html_message as the variables. 

In the template to use these variables, we will mention it in double parenthesis – {{email}}, {{name}}, {{html_message}}

For To Email, if sending email to the user email ID use {{email}} or if sending to yourself enter your email ID

There is an inbuilt function as emailjs.send() where it sends the email in the exact template created.

emailjs.send() contains 4 parameters :

Lookout for the serviceID, templateID, and userID and enter it inside emailjs.send

ServiceID

TemplateID

userID (Integration)

DONE!!!!

When the user clicks on the submit button, an email will be sent to his/her email or to yourself depending on your choice.

You can also create quiz option in the form, calculate the score and send it to the user (include the score in the toSend function and use the corresponding variable in {{}} in the template)