React is a front-end library for building user interfaces for front-end applications. Also, React is helpful when making your applications as it uses reusable components.
The question that has always existed for front-end developers is how to handle requests from form data without writing or having knowledge of the backend functionalities. Building a backend server can be tedious, and using a third-party service is required for this task to ease the pain of writing logic.
What is EmailJS?
EmailJS is a service that helps to send emails using client-side applications like React, Vue, and Angular, with no server during configuration and setup.
In this tutorial, you’ll learn how to connect a front-end library, React, with EmailJS to receive user messages on your website or mobile applications without the stress of building from scratch.
Demo
Get a head start with the starter code in this repository or create a new React application.
Prerequisites
To follow through with the tutorial, you need to have the following:
- Node >= 14.0.0 and npm >= 5.6 installed on your local machine
- An understanding of the basics of React
- An EmailJS account to try out the service.
Getting Started
The first step of building a new project is to have the tools for development that make building a breeze. In your terminal, run this command:
npx create-react-app react-contact-form-with-emailjs
The command above creates the boilerplate using the create-react-app command that has all the files and packages for the React app.
Installing EmailJS
As a dependency, run the command to install EmailJS SDK into the React app.
npm install @emailjs/browser
Running the Project
To run the React application, navigate to the project directory and run the development server that ships with the hot reload feature, which, in turn, updates the application with any change made during development.
Run this command:
cd react-contact-form-with-emailjs
npm start
The application is accessible on http://localhost:3000.
Creating the Contact Form
Collecting and receiving responses from your users through the contact form is a vital feature that a website needs to have, as it makes you trustworthy in the eyes of visitors.
So, let’s create the contact form. In your App.js file, copy and paste the following code:
// src/App.js
import React from 'react'
import './App.css';
function App() {
return (
<div>
<h1>Contact Form</h1>
<form className='cf'>
<div className='half left cf'>
<input type='text' placeholder='Name' name='user_name' />
<input type='email' placeholder='Email address' name='user_email' />
</div>
<div className='half right cf'>
<textarea name='message' type='text' placeholder='Message'></textarea>
</div>
<input type='submit' value='Submit' id='input-submit' />
</form>
</div>
);
}
export default App;
Styling the Contact Form
The application user interface needs to look beautiful for users, so in the App.css file, copy and paste the following code:
// src/App.css
@import url(https://fonts.googleapis.com/css?family=Merriweather);
html,
body {
background: #f1f1f1;
font-family: 'Merriweather', sans-serif;
padding: 1em;
}
h1 {
text-align: center;
color: #a8a8a8;
}
form {
max-width: 600px;
text-align: center;
margin: 20px auto;
}
input,
textarea {
border: 0;
outline: 0;
padding: 1em;
border-radius: 8px;
display: block;
width: 100%;
margin-top: 1em;
font-family: 'Merriweather', sans-serif;
resize: none;
}
#input-submit {
color: white;
background: #e74c3c;
cursor: pointer;
}
#input-submit:hover {
box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.2);
}
textarea {
height: 126px;
}
.half {
float: left;
width: 48%;
margin-bottom: 1em;
}
.right {
width: 50%;
}
.left {
margin-right: 2%;
}
@media (max-width: 480px) {
.half {
width: 100%;
float: none;
margin-bottom: 0;
}
}
.cf:before,
.cf:after {
content: ' ';
display: table;
}
.cf:after {
clear: both;
}
The page should look like this with everything done right:
Setup EmailJS
With the completion of the contact form page without any functionalities to send messages, let’s set up the service that will send the content of the form to your email.
Add an Email Service
This section is about the integration between EmailJS and your email server. On your EmailJS dashboard, pick the Gmail service from the Email Services tab, which should open a new page called config service.
Next, change the name and service id parameters. The service id will be used later while initializing the contact form to connect it to EmailJS. Make sure to click the Connect Account and Create Service button to confirm your changes.
Creating an Email Template
The email template is essential when you want to include the email's subject, the content it will contain, and its destination in your inbox when a user sends a message from your website's client-side.
On the dashboard, click the Email Template tab and Create New Template.
Next, you have to click the Settings tab and change the Name and Template ID to anything you so desire. The template ID will be used later, as shown in the image below:
Heading back to the Content tab, the values inside the curly brackets are dynamic variables that should have the same value as defined in the <form> element in the contact form, like the message, user_name, and user_email.
Creating the Environment Variables
The environment variables .env is a file that stores your public keys and other values you wish not to share and is private to you alone.
In the root of your project directory, create a file, .env, and paste the following:
// .env
REACT_APP_TEMPLATE_ID=TEMPLATE_ID
REACT_APP_SERVICE_ID=SERVICE_ID
REACT_APP_PUBLIC_KEY=API_PUBLIC_KEY
For the public key, you can find it by clicking the Account tab and copying the value as shown in the public key section:
Initialize EmailJS
In the React application, import the installed package, @emailjs/browser package.
Copy and paste the following:
// src/App.js
import React from 'react'
import emailjs from '@emailjs/browser';
function App() {
return (
<div>
// form element
</div>
);
}
export default App;
Handling Form Submission
The useRef hook handles contact form submission.
Copy and update the code in theApp.js file:
// src/App.js
import React, { useRef } from 'react';
// imports
function App() {
const form = useRef();
const sendEmail = (e) => {
e.preventDefault();
emailjs
.sendForm(
process.env.REACT_APP_SERVICE_ID,
process.env.REACT_APP_TEMPLATE_ID,
form.current,
process.env.REACT_APP_PUBLIC_KEY
)
.then(
(result) => {
alert('message sent successfully...');
console.log(result.text);
},
(error) => {
console.log(error.text);
}
);
};
return (
<div>
<h1>Contact Form</h1>
<form className='cf' ref={form} onSubmit={sendEmail}>
// div container with input element
</form>
</div>
);
}
export default App;
The following happens in the code above:
- The
useRefhook is imported and initialized with a variable called form - The hook,
useRef, is used as a reference and assigned to the<form>element - On the
sendEmailfunction, the form has thepreventDefaultmethod that stops the page from refreshing - Still, in the
sendEmailfunction, thesendFormfunction is invoked and initialized with theservice ID,template ID, theform .currentproperty of theref, and thepublic key - A callback function for the success and failure cases that occurs with the
.then()method
Now let’s see the result of this project:
Confirmation Email
Conclusion
Using EmailJS for handling data requests on the client-side of your application is an excellent way to receive responses from a contact form. EmailJS provides other features to explore and gives you a robust experience without ever building your server or having knowledge of backend development. It does everything for you under the hood.
Have you used EmailJS before? What do you think about my approach above? Let us know in the comments below!