Contact Form With React: Using Email.js

A contact form is a really great feature to implement into your portfolio site or any business site. It lets any user contact you by simply filling out a form and sending that from to your email. A lot of solutions require you to have a backend, but for ours we don’! We are going to use Emailjs which takes care of that problem and lets us focus on the form itself. It’s perfect for smaller applications!

First thing we need to do is simply create an account with Emailjs. After you’ll be sent to this page.

Then we need to create a new service.

Each email services have different amount of emails you can send in per day, so just be cautious of that. And I highly recommend not to share or post any of your IDs to anyone/platform especially your User ID, more on this later! But for the explanation, I’m going to show my Service ID and Template ID, then change them afterwards. So after you select your email service, you’ll have a service id.

This is going to important later on, now we need to make an email template, this is how the form is going to look when you receive it in your email.

So for my example, this is how I want the emails to look. You can of course change things around and add anything you like, but it’s important to use double curly brackets {{}} if you want to add another field in your form.

Now we can test it to see how it looks

Then it’s going to give you another id which is going to be important later on.

Now let’s add this into our code. First we need to add Emailjs into our dependencies. If you don’t use npm then you can check out the docs on how to import it. https://www.npmjs.com/package/emailjs-com or https://www.emailjs.com/docs/

npm install emailjs-com --save

Then import it into our component that we want to render the form.

import emailjs from 'emailjs-com';
const Contact = () => {

}

Then we could checkout examples in the docs and copy them to our code. https://www.emailjs.com/docs/examples/reactjs/

The “sendEmail” function take in 4 parameters, your Service ID, Template ID, e.target object, and your User ID.

function sendEmail(e) {
    e.preventDefault();

    emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', e.target, 'YOUR_USER_ID')
      .then((result) => {
          console.log(result.text);
      }, (error) => {
          console.log(error.text);
      });
  }

  return (
    <form className="contact-form" onSubmit={sendEmail}>
      <input type="hidden" name="contact_number" />
      <label>Name</label>
      <input type="text" name="user_name" />
      <label>Email</label>
      <input type="email" name="user_email" />
      <label>Subject</label>
      <input type="text" name="subject" />
      <label>Message</label>
      <textarea name="message" />
      <input type="submit" value="Send" />
    </form>
  );

We can simply replace them with our own IDs we have and you can find your User ID in the Integration tab:

function sendEmail(e) {
    e.preventDefault();

    emailjs.sendForm('service_9simb29', 'template_vrbwniv', e.target, 'YOUR_USER_ID')
      .then((result) => {
          console.log(result.text);
      }, (error) => {
          console.log(error.text);
      });
  }

  return (
    <form className="contact-form" onSubmit={sendEmail}>
      <input type="hidden" name="contact_number" />
      <label>Name</label>
      <input type="text" name="user_name" />
      <label>Email</label>
      <input type="email" name="user_email" />
      <label>Subject</label>
      <input type="text" name="subject" />
      <label>Message</label>
      <textarea name="message" />
      <input type="submit" value="Send" />
    </form>
  );

Now we have a contact form in our application! Thank you for reading!

If you’re going to post your code on GitHub or anywhere else and your repository is public then keep on reading.

You don’t want to make any of your sensitive information like an API key or any IDs public to the world. Because anyone can browse through GitHub and see them. So we have dotenv, it helps us keep sensitive information in an environment file. You can check the docs here: https://www.npmjs.com/package/dotenv

First we need to add it into our dependencies:

npm install dotenv --save

Now we need to add a file name “.env” in our root directory

In the .env file we have access to key value pairs. With React applications we need to name them “REACT_APP_” first then whatever we want.

Now we need to call Dotenv as early as possible in our application. So we can call it in our index file and call it at the bottom of the file.

<Rest of the code>
require('dotenv').config()

Let’s go back to our Contact component and replace our IDs.

function sendEmail(e) {
    e.preventDefault();

    emailjs.sendForm(process.env.REACT_APP_SERVICE_ID, process.env.REACT_APP_TEMPLATE_ID, e.target, process.env.REACT_APP_USER_ID)
      .then((result) => {
          console.log(result.text);
      }, (error) => {
          console.log(error.text);
      });
  }

In order to grab in our values from our keys, we can use “process.env” and the name of the key.

If you’re using Git version control, we can add our .env file into our .gitignore file.

.env

Now we can safely push our code to GitHub! Thank you for reading!