Geek Culture
Published in

Geek Culture

How to send emails from a form in React (EmailJS)

Intro

This post will guide you through the process of creating a form and functionality in ReactJS (with hooks) that will enable us to send emails. We will use a third-party service called EmailJS.

Photo by Maxim Ilyahov on Unsplash

EmailJS in a nutshell

Send emails using client-side technologies only. No server required.

  1. Pick one of the supported email services
  2. Create an email template
  3. Use JS library to trigger an email

Setup EmailJS

Let’s first create a free account.
Now, we’ll do step 1. from the intro: we will pick Gmail as our email service.

On the ‘Email Services’ tab. After clicking on the ‘Add New Service’ button you should be seeing something similar to the photo above. Click on Gmail (this is what we’ll use in this case).

To connect the service with your Gmail account click on the ‘Connect Account’ button. Also, remember your Service ID because we’ll need it later. Finally, click on the ‘Create Service’ and check your inbox to see if you got the test email.
Got it? Awesome! 👍

In the intro Step 2. says create a template. Let’s do that now. Go to the ‘Email Template’ tab on the side menu and click on the ‘Create New Template’ button. For testing purposes, we will use this default one. A caveat, the variables in double curly brackets are dynamic variables that will be replaced with the data we’ll provide in the method emailjs.send, in our case, in React. Click 'Save' and we're good to proceed.

Congrats, part one is done!🥳

React

I assume you know how to and have created a react app. If not, check this out.

Let’s install emailjs package.
npm i emailjs-com

Now, we import it (grab the User ID).

Now let’s create our form inside div.App

Awesome, let’s continue. Now, your App component should look like this now:

You see, we used useState() Hook that lets you add React state to function components. We initialized the state with the 'toSend' object with the same instance names as the dynamic ones we have in the emailjs template. We also created two methods are for manipulating form data. handleChange to update the state, and onSubmit to handle the submission; to send data via emailjs.send a method that we'll implement right away.

This is how onSubmit should look like:

Please add your unique IDs required in the send method that you can find on emailjs dashboard.

Okay, here goes nothing…

Run that app (npm start).
Fill the form and click submit.
Check your Gmail inbox.
Got it?

CONGRATS! You rock! 🥳

I hope you find my post useful! Any feedback is greatly appreciated!

--

--

--

A new tech publication by Start it up (https://medium.com/swlh).

Recommended from Medium

Learning Reason by Building in Reason

Deep-Dive into JavaScript Closures: A Step-by-Step Tutorial

Easy way to enable PayPal Checkout on your Website

Angular Material: Building Use Cases

Become a Storj farmer $$ using a domestic server and a NAS

Insecure implementation of CryptoJS encryption (Part I)

Persisting state in React that survives closing the browser tab

Difference Between forEach() and Map() in JavaScript.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Tenish

Tenish

Software Engineering | 🧑‍💻

More from Medium

All About Rendering: Client and Server

Set Up and Use MySQL in Create React App Environment

Resolving Create React App’s “Uncaught ReferenceError: process is not defined”

Learn React: How to export, import, and render a component inside a component