Functional Email Form in React with EmailJS
Tags: webdev, react, tutorial, javascript
Published: 2023-03-10 18:19:33



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](http://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](https://dashboard.emailjs.com/sign-up)

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: 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o2fxcyatwbkm9yetq0cr.png)

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**. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d3qsjo0h9kmxb9a1pbz0.png)

**Make sure to test out your email!**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d7q5c67wdt8isy99w7j9.png)

### 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. 

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

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

```jsx
$ 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.

```jsx
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.

```jsx
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**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t7gwaoyiekr7coz8cfrt.png)

**Template ID**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cpz8bz4zfgaswwv2jy6c.png)

**API key** 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/omqohcj4csxdbvfvvun9.png)

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. 

```jsx
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:** 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7k0hm5wpof8dzg8wzjca.png)

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!