Contact Form using EmailJS!
Tags: javascript, html, form
Published: 2021-05-27 02:41:44

The form that is usually on the 'Contact Us!' section of pages that lets you send them an email directly from filling out the form is a Contact form! Yes! On this blog we'll try to implement that in a React app!

For demonstration purposes, I will use
[EmailJS](https://www.emailjs.com/). It's a free service, and you can also get that service from others like:

* [Formspree](https://formspree.io/)
* [Formspark](https://formspark.io/)
* [Netlify](https://docs.netlify.com/forms/setup/)
* [GetForm](https://getform.io/)

##Installation
Install emailJs through an npm package. Docs are [here](https://www.emailjs.com/docs/sdk/installation/) if you need to dive deeper on the instructions.

Syntax to install:
```javascript
npm install emailjs-com --save
OR
npm install emailjs-com

```
Then you would have to put this script inside the `<head>` tag in your `index.html`;

```javascript
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/emailjs-com@2/dist/email.min.js"></script>
<script type="text/javascript">
   (function(){
      emailjs.init("YOUR_USER_ID");
   })();
</script>
```
`YOUR_USER_ID` is provided to you when you sign up which was quick and easy.

You can find it in the Integration section which looks like this;

![EmailJs UI Integration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/en41rpu0uvo63atk3q9r.png)

So on that screengrab, you can see how to begin on importing the module on you React components. In code, it should look like your typical imports but with your userID as an argument in a string. You will need your userID to one more thing so keep it handy.

##Link your email account
On this phase you would have to go to the Email Services section of your account.

* Click 'Add New Service'.
* Choose from their selection of email couriers. (_Some service only allows 500 emails/day some are more. I chose my iCloud since its 1000/day_)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9gi8fxyaadbdzu1tzdg4.png)

* A modal will pop up and you will need to provide your email account information;
![Email configuration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ysfg169msai06354hhp.png)
(*It was a little tricky with having my iCloud setup with two-factor auth but I clicked the link they provided and helped me figure out how to generate an app-specific password from my iCloud account*)

* Once done, you should have received a test email and would confirm that the added service works!

##Email Template
EmailJS provides a generic email template you can base your naming conventions from or you can also personalize it based on preference.

* Click Email Templates on the navigation bar.
* A default email template will show and is pre-filled. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0bxdz2h3g53gvitmyhvc.png)

* Naming conventions - the preset from the email template can be changed based on the values you wanted. For example we have a form that looks like this;
```HTML
<form>
  <label for="to_name">Name:</label>
  <input type="text" id="to_name" name="to_name">

  <label for="from_name">Name:</label>
  <input type="text" id="from_name" name="from_name">

  <label for="message">Message</label>
  <input type="text" id="message" name="message">
</form>
```
So basically, the name attribute on your html form element corresponds to the variables on your email template.

* Don't forget to take a note of your template ID since we'll be using it in our code when submitting our form next.

**But what if you have a React-Bootstrap component?**
It is basically the same and would look something like this;
![Form bootstrap component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hfslo58jfo3rwz98ii08.png)
You would still have the name attribute passed in the `Form.Control` component and just add your onChange eventListener and your handleSubmit function on the form component.

A little breakdown:
```javaScript
<textarea
   value={message} //{message} is a variable that corresponds to the data being grabbed when onChange is triggered.
   id="message"
   name="message" //what we need to match our variable on our email template on emailJS
   rows="5"
   cols="43"
   placeholder="Message"
   onChange={this.handleChange} //triggers our handleChange command that sets the state.
>
</textarea>
```
You can follow their React sample code [here](https://www.emailjs.com/docs/examples/reactjs/) if you wanted to just use HTML/JSX. 

##Submitting the form
In submitting the form, we had to build a function that gets triggered when the Submit button gets clicked. You can definitely add validations to deter spam messages & get a complete object or keep it as is and send the form however they sent it.

In code it looks something like this:

```javascript
sendEmail = (e) => {
    e.preventDefault();

//YOU CAN PUT THIS INSIDE AN IF STATEMENT WHEN ADDING VALIDATIONS
    emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', e.target, 'YOUR_USER_ID')
      .then((result) => {
          console.log(result.text);
      }, (error) => {
          console.log(error.text);
      });
  }
```
**Sample code from [EmailJS](https://www.emailjs.com/docs/examples/reactjs/)**

Woohoo! You can definitely test it now and see if it sends you an email.

You will see how much you have left for the day using the counter at the top navigation bar on your emailJS account.
![Email counter count](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ggm187vjgegekzdzyxeg.png)

####Let me know on the comments if you've tried it, if I have missed anything, or if I can be of help! 

Until the next!