Sending Email through Forms in React Js using Email js

Sending emails through forms in a React Js application can be easily achieved with the help of Email js. Email js is a simple and secure way to send emails directly from client-side Javascript applications. In this article, we will explore how to integrate Email js into a React Js application to send emails through forms.

Step 1: Install Email js

The first step is to install Email js into your React Js project. You can install Email js using npm by running the following command in your project directory:

npm install emailjs-com

Step 2: Set up Email js

Once you have installed Email js, you need to set it up with your email service provider. You will need to create an account with an email service provider such as Gmail or Outlook, and generate an email service ID and template ID. This information will be used to authenticate and send emails through Email js.

Step 3: Create a Form Component

Next, you will need to create a form component in your React Js application. This form component will capture the user’s input such as name, email, subject, and message, and send it through Email js to your designated email address.

Step 4: Send Email through Forms

Finally, you can send the user’s input as an email using Email js. You will need to import the Email js library into your form component and use its send() method to send the email using the email service ID, template ID, and user’s input as parameters.

Example Code

Here is an example of how to send an email through a form in a React Js application using Email js:


import emailjs from 'emailjs-com';

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


Conclusion

Integrating Email js into a React Js application to send emails through forms is a straightforward process. By following the steps outlined in this article, you can easily set up and send emails through forms in your React Js application using Email js.