Functional Email Form in React with EmailJS

Require installs: $ npm install @emailjs/browser --save

Email has been one of the worlds best form of communication for several decades. However, with the rise of text messaging and social media, emails dominance has been challenge in recent years. Email still remains relevant in todays world due to its variety forms of usage, for example it's used as a professional way of online communication, has a great use case for user verification and its efficient for sending data, images, files, etc.

Email is essential part of any web application, With emailJS its never been easier to implement a functional email form to your application. I’ll be walking you through the steps to get a functioning email form for your react app!

Step 1.

Before we touch any code, we must create an account below. This will take you to EmailJs.com, here you can create a free Account and have access to receive 200 emails per month completely FREE!

Send email from Javascript - no server code required | EmailJS

Once your account has been created and you have signed into your account, on the tab to the left of the page you’ll see “Email services” click it. This is where you’ll pick a email service that you want to receive emails to, allow access.

Step 2.

We will then create a email template, this is located on the tab on the left of the page. Customize the template to your preference.

Keep in mind the value that is placed inside double curly bracket(Template parameters) will be referenced in your input element name attribute.

below is a example of my template:

To the right of the screen you’ll see a “To Email*” make sure your recipient email is listed and the “From Email*” check box is mark as checked. All other inputs on the right of the screen is optional.

Make sure to test out your email!

Step 3.

Time to code! Let’s get a react application running with the code below. Side note emailJS can also be used with Angular, Vue.Js, Svelte and Wix code as well, there are examples of this on the emailJS docs.

$ npx create-react-app "app-name"
$ npm start

Once the react application is up and running, install emailJS.

$ npm install @emailjs/browser --save

This will install and save into your package json dependency.

Step 4.

The next step is to designate a component to import emailJS.

import React, { useRef } from 'react';
import emailjs from '@emailjs/browser';

export const ContactUs = () => {
  const form = useRef();

In the example above emailJs is imported to the ContactUs component.

useRef hook is imported also, useRef will remember the information put in the input element. It will then send that information to the emailJs server.

Next will be the function we add to this component that requires service ID, template ID and API Key that all can be found in your emailJS account.

const sendEmail = (e) => {
    e.preventDefault();

    emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', form.current, 'YOUR_PUBLIC_KEY')
      .then((result) => {
          console.log(result.text);
      }, (error) => {
          console.log(error.text);
      });
  };

*below is examples of where to find the required input: *

Service ID

Template ID

API key

All that is left is to add the sendEmail function as a onSubmit event and useRef hook to the Form element lastly a “name” attribute to each input elements that correlates to the email template parameters.

return (
    <form **ref={form}** **onSubmit={sendEmail}**>
      <label>Name</label>
      <input type="text" **name="name"** />
      <label>Email</label>
      <input type="email" **name="email"** />
      <label>Message</label>
      <textarea **name="message"** />
      <input type="submit" value="Send" />
    </form>
  );
};

The name attributes above correlates to the email template parameters displayed below.

example:

The name attribute’s value in the input element must match what’s in the double curly bracket. This is how emailJS knows where the value is intended to be displayed in the email.

You now have a fully functional way to receive emails from users on your web application!