Sending Emails With JavaScript Code Using Email js Service from React App

Introduction 

Javascript  is one of the most popular language nowadays  and the popularity of this language is retained due to its dual nature to be used in front-end as well as backend in Web Development.In this tutorial we will walk through the steps to send emails using Emailjs which is a cool Email Sending Service.Most importantly it provides  up-to 200 free requests every month along with 2 email templates.

After following this tutorial completely you will be able to send emails directly from the front-end of your website. Few advantages of using Emailjs service are listed as follows:

  • You can select wide variety of email service and they support both transactional email services as well as personal email services.
  • You can create templates according to your convenience.
  • You can even define variables or parameters which can receive values direct from your code.
  • It is easily integrable with your code in just few lines of code.

Prerequisites

  • Your favourtie  Code Editor (Sublime , Atom, Vscode, PyCharm)
  • Browser to test your code.
  • Setup an Emailjs account and retain your Service ID and Template ID and User ID.
Step1
  • Visit https://www.emailjs.com/ this link and go to signup to create and Emailjs account.
  • After creating account you will see a button on the dashboard to add service which ever you want .

 

  • Now click on add service and select the Gmail service and a popup will appear then click on connect to  account from which you want to send mail. Then choose check box to send mail on my behalf and then click on create service.




  • Let's move to Email Template dashboard from sidebar and click on create  template and set names of parameter.



Step2
  • Open your code editor and go to terminal and write create-react-app <Name Of Your React App>
  • After creating react app go to app.js and remove the default jsx code and create new input tags.

  • Now in input filed define name property and value property and call a handlechange function for onchange .Basically we want to store the data that user will enter in the state so whenever user writes something it calls handlechange function.

  • This handle change function will use spread operator (...) and will set the current entered values of input filed in the corresponding usestate data.
  • Now we will pass this data to email js using another function called sendemail when the submit button is pressed.
Step3

  • Install the emailjs dependency.

  • After installing Email js add the import statement in App.js file.
  • Then we will code the sendemail function and will specify the service id , template id and user id. You can get user id from  integration tab in the sidebar.


  • Enter your user id ,service id and template id .
Step4
  • Now lets move to frontend website and fill in the details and click on submit to send a mail.
Caution the Email that we are sending will be on the email id we specified in the template which in our case is hard coded where and we are not sending the email to email id filled in the form on the frontend.

Finally after clicking on submit the mail will be received.



USECASE
These type of service is helpful when you deploy a website and have a feedback kind of system .So that when ever someone fills a feedback it must notify you.

Comments

Post a Comment