Integrating a Contact Form with EmailJS in React

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 or create a new React application. this repository Prerequisites To follow through with the tutorial, you need to have the following: installed on your local machine Node >= 14.0.0 and npm >= 5.6 An understanding of the basics of React An to try out the service. EmailJS account 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 command that has all the files and packages for the React app. create-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 ( Contact Form ); } export default App; Styling the Contact Form The application user interface needs to look beautiful for users, so in the file, copy and paste the following code: App.css // 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 service from the tab, which should open a new page called . Gmail Email Services config service Next, change the and parameters. The will be used later while initializing the contact form to connect it to EmailJS. Make sure to click the and button to confirm your changes. name service id service id Connect Account Create Service 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 and . Email Template tab Create New Template Next, you have to click the tab and change the and to anything you so desire. The will be used later, as shown in the image below: Settings Name Template ID template ID 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 element in the contact form, like the , , and . message user_name user_email Creating the Environment Variables The environment variables is a file that stores your public keys and other values you wish not to share and is private to you alone. .env In the root of your project directory, create a file, , and paste the following: .env // .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 tab and copying the value as shown in the section: Account public key Initialize EmailJS In the React application, import the installed package, package. @emailjs/browser Copy and paste the following: // src/App.js import React from 'react' import emailjs from '@emailjs/browser'; function App() { return ( // form element ); } export default App; Handling Form Submission The hook handles contact form submission. useRef Copy and update the code in the file: App.js // 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 ( Contact Form // div container with input element ); } export default App; The following happens in the code above: The hook is imported and initialized with a variable called form useRef The hook, , is used as a reference and assigned to the element useRef On the function, the form has the method that stops the page from refreshing sendEmail preventDefault Still, in the function, the function is invoked and initialized with the , , the property of the , and the sendEmail sendForm service ID template ID form .current ref public key A callback function for the success and failure cases that occurs with the method .then() 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!