Using EmailJS and React to send Support Emails

Introduction

You know those forms which send a support request to the site's support team? Well we are creating them today for our website! This tutorial assumes an understanding of using React to create forms, changing component state, and submission of forms.

We will be using EmailJS's service. Here is also the link to the package.

Tutorial

1. Start by installing EmailJS with npm $ npm install emailjs-com --save
2. Sign up with EmailJS. Use an email you would like to receive support emails at.

3. After signing up, click the email service you would like, I chose Gmail to get started. You can remember this service ID to use later to send your form, otherwise if you have only one service, it will default to it.

4. Let's grab our API key at this time. In EmailJS, navigate to Account > API keys > then copy the user ID to a notepad for later use.

1. Create a template on EmailJS, this can be any written notice you want. Replace any fields that will be filled by your form submission with {{}} double curly braces. Within the braces will be the key in the key-value pair of your component's state.

1. Import EmailJS into your form's page with import emailjs from 'emailjs-com'; then create your form with React and store the form outputs in your state with matched keys from your template. You can find this by clicking EmailJS > Email Templates > Example Email Template (or whichever template you're using) > Copy Code on right hand corner. Lets also write down the template ID while we are looking at this page.

1. If done correctly then all we need to do is write a bit of code for the submission of the form, I have an onclick on the button at the end of the form which submits this to the email service. Here is the block of code which needs to go into the submit function:

emailjs.send('<YOUR SERVICE ID>','<YOUR TEMPLATE ID>', '<YOUR PARAMS>', '<YOUR USER ID>')
    .then((response) => {
       console.log('SUCCESS!', response.status, response.text);
    }, (err) => {
       console.log('FAILED...', err);
    });

For your service ID, you can use 'default_service' or the ID of a service you created, for template ID put in the one you found while cross-checking the template parameters, your params can simply be the state of your React component, and user ID is the API key > User ID you can find under account!

Results

The resulting code with the template params matched up, correct template key, service ID, and your user API key inserted: (Remember to import emailjs into this component!)

Here is my form with the filled out fields, on submit it will send the form to the designated email.

Then, tada! You've got yourself an email! You can then reply to the email supplied by your form and template with your business email address.