DEV Community

loading...
Cover image for Contact Form using EmailJS!

Contact Form using EmailJS!

Ellaine Tolentino
Design enthusiast! Currently venturing the world of Software Engineering.
・4 min read

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. It's a free service, and you can also get that service from others like:

Installation

Install emailJs through an npm package. Docs are here if you need to dive deeper on the instructions.

Syntax to install:

npm install emailjs-com --save
OR
npm install emailjs-com

Enter fullscreen mode Exit fullscreen mode

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

<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>
Enter fullscreen mode Exit fullscreen mode

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

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

  • A modal will pop up and you will need to provide your email account information;
    Email configuration
    (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

  • 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;

<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>
Enter fullscreen mode Exit fullscreen mode

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
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:

<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>
Enter fullscreen mode Exit fullscreen mode

You can follow their React sample code here 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:

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);
      });
  }
Enter fullscreen mode Exit fullscreen mode

Sample code from EmailJS

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

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!

Discussion (1)

Collapse
xr0master profile image
Sergey Khomushin

It's very detailed and high-quality step-by-step instructions!
I will correct only one small thing, the Default Email Address is taken from the used service, and if the service does not have the address, then the dashboard logic address will be used.