How to Send Email From React Client using Emailjs Library
If you have contact form in your Website and you want to receive email when user submit data via contact form then you can learn in this tutorial how to send email with data received from contact form.
Video Tutorial in Hindi / Urdu
To Follow this tutorial you need to familiar with ReactJS a Javascript Lirbary to build UI and we will need EmailJS account if you are not familiear with EmailJS then no problem we will also learn about Emailjs.
- Step: 01
Create a simple React Application so we will use create-react-app to create a react application.
npx create-react-app email-client
- Step: 02
Create a simple form to get data from user. I am using Bootstrap CDN to create contact form.
Create 4 Text Fields FirstName ,LastName , Adress and Message. Copy this code in your App.js file.
import React, { useRef } from "react";
import emailjs, { init } from "@emailjs/browser";
function App() {
const handleSubmit = (e) => {
e.preventDefault();
};
return (
<div className="container">
<form onSubmit={handleSubmit}>
<h1 className="text-center">Registration Form</h1>
<div className="form-row">
<div className="form-group col-md-6">
<label htmlFor="First Name">First Name</label>
<input type="text" className="form-control" name="firstname" />
</div>
<div className="form-group col-md-6">
<label htmlFor="Last Name">Last Name</label>
<input type="text" className="form-control" name="lastname" />
</div>
<div className="form-group col-12">
<label htmlFor="inputAddress">Address</label>
<input
type="text"
className="form-control"
id="inputAddress"
placeholder="1234 Main St"
name="user_address"
/>
</div>
<div className="form-group col-md-6">
<label htmlFor="message">message</label>
<textarea
type="text"
className="form-control"
id="inputmessage4"
name="user_message"
/>
</div>
</div>
<button type="submit" className="btn btn-primary">
Sign in
</button>
</form>
</div>
);
}
export default App;
- Step: 03
After saving this file run your dev server by running
npm start
Now we have created our form component. Now Create EmailJS account , create email template and get USERID , TEMPLATEID and USERID.
Goto https://www.emailjs.com and register your account. After registration goto Email Templates
from navigation menu and create Email Template and update it according your requirements. We are sending FristName , LastName , Address and user_message from contact form. We will use these variables in our template using double curly braces like this {firstname}. See ScreenShot =>
- Now get Email template ID from Email Templates option:
- Get Service ID from Email Service option :
- Get UserID and User ID which we will use with init method of emailjs :
Now update our code in ./App.js
import emailjs and { init } at top of component and create a ref to our form. Using ref we will access data of text fields.
and update onSubmit method of form to send Email like this :
import React, { useRef } from "react";
import emailjs, { init } from "@emailjs/browser";
function App() {
init("user_xxxxxxxxxxxxxxxxxxx");
const form = useRef();
const handleSubmit = (e) => {
e.preventDefault();
emailjs.sendForm("SERVICE_D", "TEMPLAE_ID", form.current, "USER_ID").then(
(result) => {
alert("Message Sent Successfully");
console.log(result.text);
},
(error) => {
console.log(error.text);
}
);
};
return (
<div className="container">
<form onSubmit={handleSubmit} ref={form}>
<h1 className="text-center">Registration Form</h1>
<div className="form-row">
<div className="form-group col-md-6">
<label htmlFor="First Name">First Name</label>
<input type="text" className="form-control" name="firstname" />
</div>
<div className="form-group col-md-6">
<label htmlFor="Last Name">Last Name</label>
<input type="text" className="form-control" name="lastname" />
</div>
<div className="form-group col-12">
<label htmlFor="inputAddress">Address</label>
<input
type="text"
className="form-control"
id="inputAddress"
placeholder="1234 Main St"
name="user_address"
/>
</div>
<div className="form-group col-md-6">
<label htmlFor="message">message</label>
<textarea
type="text"
className="form-control"
id="inputmessage4"
name="user_message"
/>
</div>
</div>
<button type="submit" className="btn btn-primary">
Sign in
</button>
</form>
</div>
);
}
export default App;
Now Start your application and Try submitting from. You will receive an email that we defined email template.
Congratulations ! Now You Can receive Emails when a user submit A Contact Form.
You can find Complete code of this tutorial at Github Email-Sending-Tutorial
Top comments (3)
Thanks for your detailed article!
I appreciate it, you liked it.
I got The 3rd parameter is expected to be the HTML form element or the style selector of form error.
Also is
init("user_xxxxxxxxxxxxxxxxxxx");supposed to be public api key?