Table of Contents:
Introduction
What is EmailJS
Setting up React Application
Installing Emailjs package
Project: Setting up a Contact Form page
Implementing the Submit feature
Conclusion
Introduction
Hello, welcome to this tutorial. In this tutorial, we intend to set up our custom automated email response system with the basic knowledge of React JS and Node Package Manager without the need to know backend development. This seems simple right? Well, we will get to delve deeper as we go along in this tutorial. To serve as our companion for our frontend site, we would be using EmailJS, an open-source email delivery package. Before we go into the nitty-gritty of the tutorial, I would love to highlight the advantages of the EmailJS package.
It is free
It is highly efficient
It is easy to implement
Here are the Basic requirements to be able to complete this tutorial
Basic to intermediate knowledge of React JS
A strong Internet Connection
Basic knowledge of NPM and NPM installation
Now let’s get started.
Setting up React Application
So right now, let’s set up our web application using React. First, navigate to the folder you intend to create your project in using the command prompt. Then enter npm create-react-app React-Email-app
Wait for a few minutes and viola, your web application is set up. You can then navigate to the project folder and launch the application by entering npm start on the command prompt.
Navigating to http://localhost:3000 will show your default react home screen.
Installing Emailjs package
Open your command line interface and navigate to the project folder. While in the project folder, kindly enter npm install emailjs . Wait for a few seconds and you will receive a notification on the command line interface that it has been successfully installed. With this successfully done, you can then import it into your React web application for use.
Now that we have completed this, let’s set up our email Structure. Kindly navigate to www.emailjs.com. To enjoy the email response feature that EmailJS offers, you would be required to create an account. After completing the sign-up process, log in to your account dashboard. It would automatically take you to the email services. Then click on the “Add new service” button.
This would show you a list of personal and transactional services offered by the platform. Some of these services include AOL Gmail, Fastmail, iCloud, Outlook, Mailgun, Mailtrap, SendGrid etc. For this tutorial, we will be focusing on the Gmail services provided.
Click on the Gmail section and then click on Connect account. This would require you to confirm the connection by checking your email. Thereafter, click on “Create service”. After completing these processes, you can then navigate back to the emailjs dashboard and click on the template section. In this section, you can easily customize the default template to the format you like to receive your response in and also to ensure some details are marked as important.
Now create an .env page. This page is needed to serve as a store for your API secret keys. These keys aren’t expected to be visible to a 3rd party as they could be hijacked and abused.
Thereafter, store the keys attached to your emailjs account in this file. We would now be importing the keys into the react JS page. After completing this, let’s now move on to the nitty gritty of the tutorial – coding and implementing the response feature.
First of all, let’s draw out a basic design for our Contact US page. The UI page is expected to look similar to this.
Attached below is the code for the basic UI.
import React, {useState, useRef} from 'react';
import './Contact.css'
const Contact = () => {
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [message, setMessage] = useState("");
const Form = useRef();
return (
<div className="container-contact">
<div className="header">
<div className="line">
</div>
<div className="header-text">Contact Me
</div>
<div className="line-1">
</div>
</div>
<div className="content">
<p>Feel free to reach out to me on the following platforms</p>
<div className="form-section">
<p>Alternatively, you can also send me a direct mail via the form below</p>
<form className="contact-form" ref={Form}>
<div className="name-section">
<label htmlFor="Name">Name</label>
<input type="text" className="name" placeholder="" name="user_name" value={name} onChange={e => setName(e.target.value)}/>
</div>
<div className="email-section">
<label htmlFor="Email">Email</label>
<input type="email" className="email" placeholder="Email Address" name="user_email" value={email} onChange={e => setEmail(e.target.value)} />
</div>
<div className="message-section">
<label htmlFor="Message">Message</label>
<textarea className="message" value={message} name="message" onChange={e => setMessage(e.target.value)}/>
</div>
<button type="submit" className="submit-button" >Send </button>
</form>
</div>
</div>
</div>
)
}
export default Contact;
The useRef function is being used and it collates the total responses in the form and attaches it to a Form Reference object. The useState function is used to initialize the default state of the form components and this can be updated with the onChange function.
After completing this, kindly import the emailjs/browser library to your application.
import emailjs from '@emailjs/browser'
A function would then be run when the send button is clicked. This function contains the gateway format for interfacing with emailjs.
There, the emailjs.sendForm function is run with the following middleware details
Name of the service
Template id
Form content
And API key.
When clicked, the function is executed and if unsuccessful, returns an error message. If you receive an error message, do not fret. Kindly go over all that we discussed and check where you went wrong.
Attached below is the function snippet.
const handleSubmit = (e) => {
e.preventDefault();
console.log(Form.current.value)
emailjs.sendForm(SERVICE DETAIL, TEMPLATE ID, Form.current , APIKEY).then((result) => {
console.log("success")
}, (error) => {
console.log(error.text)
})
}
The entire code is attached below.
import React, {useState, useRef} from 'react';
import emailjs from '@emailjs/browser'
import './Contact.css'
const Contact = () => {
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [message, setMessage] = useState("");
const Form = useRef();
const handleSubmit = (e) => {
e.preventDefault();
console.log(Form.current.value)
emailjs.sendForm(SERVICE DETAIL, TEMPLATE ID, Form.current , APIKEY).then((result) => {
console.log("success")
}, (error) => {
console.log(error.text)
})
}
return (
<div className="container-contact">
<div className="header">
<div className="line">
</div>
<div className="header-text">Contact Me
</div>
<div className="line-1">
</div>
</div>
<div className="content">
<p>Feel free to reach out to me on the following platforms</p>
<div className="form-section">
<p>Alternatively, you can also send me a direct mail via the form below</p>
<form className="contact-form" ref={Form}>
<div className="name-section">
<label htmlFor="Name">Name</label>
<input type="text" className="name" placeholder="" name="user_name" value={name} onChange={e => setName(e.target.value)}/>
</div>
<div className="email-section">
<label htmlFor="Email">Email</label>
<input type="email" className="email" placeholder="Email Address" name="user_email" value={email} onChange={e => setEmail(e.target.value)} />
</div>
<div className="message-section">
<label htmlFor="Message">Message</label>
<textarea className="message" value={message} name="message" onChange={e => setMessage(e.target.value)}/>
</div>
<button type="submit" className="submit-button" >Send </button>
</form>
</div>
</div>
</div>
)
}
export default Contact;
The CSS code to style it is also attached below.
.container-contact {
width: 80%;
display: flex;
flex-direction: column;
margin: 0 auto;
border-radius: 30px;
text-align: center;
color: white;
box-shadow:rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.header {
display: flex;
flex-direction: row;
}
.header:hover{
transform: scale(1.07);
transition: 1s ease-out;
}
.header-text {
flex: 1;
colour: tomato;
text-align: center;
margin: 0 auto;
font-size: 30px;
justify-content: center;
margin: 30px;
padding: 10px;
}.line {
display: flex;
flex: 1;
width: 20%;
height: 10px;
align-items: flex-start;
margin: auto;
margin-left: 20px;
background-color: tomato;
border-radius: 20px;
}
.line-1 {
flex: 1;
width: 40%;
height: 10px;
align-items: flex-start;
margin: auto;
margin-right: 30px ;
background-color: tomato;
border-radius: 20px;
}
.content > p {
text-align: center;
font-size: 25px;
}
.icons {
font-size: 30px;
}
.form-section {
margin: 0 auto;
width: 80%;
}
.form-section > p {
padding: 10px;
text-align: center;
justify-content: center;
align-items: center;
font-size: 25px;
border-radius: 20px;
border: 1px solid tomato;
}
.contact-form {
display: flex;
flex-direction: column;
width: 100%;
margin: 0 auto;
margin-top: 10px;
margin-bottom: 10px;
color: black;
}
.name-section , .email-section, .message-section {
display: flex;
flex-direction: column;
padding: 10px;
align-items: center;
justify-content: center;
}
label {
width: 80%;
font-size: 20px;
color: tomato;
}
input {
width: 70%;
height: 30px;
padding: 10px;
font-size: 20px;
border-radius: 30px;
color: #000;
}
textarea {
width: 70%;
height: 120px;
margin: 20px;
padding: 10px;
font-size: 20px;
border-radius: 10px;
}
button {
width: 25%;
display: flex;
margin: 0 auto;
margin-bottom: 30px;
justify-content: center;
align-self: center;
cursor: pointer;
}
.submit-button {
padding-top: 15px;
text-align: center;
font-size: 20px;
border-radius: 25px;
height: 50px;
border-style: none;
}
@media screen and (max-width: 810px) {
.container-contact {
width: 80%;
display: flex;
flex-direction: column;
margin: 0 auto;
border-radius: 30px;
text-align: center;
color: white;
box-shadow:rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.header {
display: flex;
flex-direction: row;
}
.header:hover{
transform: scale(1.04);
transition: 1s ease-out;
}
.header-text {
flex: 1;
color: tomato;
text-align: center;
margin: 0 auto;
font-size: 27px;
justify-content: center;
margin: 25px;
padding: 10px;
}.line {
display: flex;
flex: 1;
width: 20%;
height: 8px;
align-items: flex-start;
margin: auto;
margin-left: 20px;
background-color: tomato;
border-radius: 20px;
}
.line-1 {
flex: 1;
width: 40%;
height: 10px;
align-items: flex-start;
margin: auto;
margin-right: 30px ;
background-color: tomato;
border-radius: 20px;
}
.content > p {
text-align: center;
font-size: 20px;
}
.icons {
font-size: 30px;
}
.form-section {
margin: 0 auto;
width: 80%;
}
.form-section > p {
padding: 10px;
text-align: center;
justify-content: center;
align-items: center;
font-size: 20px;
border-radius: 20px;
border: 1px solid tomato;
}
.contact-form {
display: flex;
flex-direction: column;
width: 100%;
margin: 0 auto;
margin-top: 10px;
margin-bottom: 10px;
color: black;
}
.name-section , .email-section, .message-section {
display: flex;
flex-direction: column;
padding: 10px;
align-items: center;
justify-content: center;
}
label {
width: 80%;
font-size: 18px;
color: tomato;
}
input {
width: 70%;
height: 28px;
padding: 10px;
font-size: 18px;
border-radius: 30px;
background-color: white;
color: #000;
}
textarea {
background-color: white;
width: 70%;
height: 120px;
margin: 20px;
padding: 10px;
font-size: 18px;
border-radius: 10px;
}
button {
width: 25%;
display: flex;
margin: 0 auto;
margin-bottom: 30px;
justify-content: center;
align-self: center;
cursor: pointer;
}
.submit-button {
padding-top: 15px;
text-align: center;
font-size: 18px;
border-radius: 25px;
height: 50px;
background-color: tomato;
border-style: none;
}
.tele {
background-color: transparent;
}
}
With that, we have completed the project. Viola, our email app is up and running. You should receive an email linked to your emailjs account as soon as the function is executed successfully
Conclusion
So we have been able to harness the power of EmailJS in improving social communications and enabling responses in our web application. We have also enjoyed its simplicity. Other additional features like we mentioned earlier can also be integrated using the same method talked about in this tutorial.
I sincerely hope you learned and enjoyed this innovative tutorial. Feel free to check out my other articles here. Till next time, keep on coding.