Incorporating EmailJS into Your Application

Sending Emails Using Only Client-Side Technology

As a Software Engineer, having a portfolio website is imperative. If your goal is to be hired to build applications and websites, it’s probably a good idea to have a website that you’ve built on which you can showcase your various projects. Your portfolio website is an opportunity to impress potential employers and clients with your unique skills, experience, and personality.

Every good portfolio website needs to include a way for people to contact you. In building my own portfolio website, I decided to incorporate a contact form so that anyone desiring to reach out to me could easily do so. While it is perfectly fine to just list your email address or have a mailto anchor link, I chose to use a contact form because it makes things a little bit easier for the person reaching out, which encourages them to actually do so.

The contact form I created for my website.

After successfully building and implementing the contact form component of my portfolio application, I started doing research as to how I could get the client’s message to be sent to my email inbox upon submission of the form. While there are many services available that get the job done, I decided on EmailJS because it is very easy to implement and it allows for emails to be sent using only client-side technology.

EmailJS is a tool that allows for the sending of emails directly from JavaScript, without the need for any backend code. With EmailJS, you are able to send up to 200 emails for free. Once you sign up for an account, you can choose from a wide variety of email services that you can connect your account to. EmailJS supports both transactional email services (such as Mailgun, Mandrill, SendGrid) and personal email services (such as Gmail, iCloud, Outlook).

From there, you can then create an email template. The templates are parameterized so that you can further customize the emails using your JavaScript code, which allows for dynamic content.

Image for post
Image for post
My customized email template.

Once you’ve customized your email template, the next step is to then add the EmailJS SDK. You can install EmailJS SDK using a package manager such as npm with the command $ npm install emailjs-com --save , or you also have the option of adding the below browser script (take note that you have to replace the user ID placeholder with your own user ID )to your HTML code:

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

Now we only have one more step left to do before we are able to trigger an email message with the contact form submit event — incorporating the send method in our code. EmailJS provides us with two methods: emailjs.send and emailjs.sendForm. The basic syntax is as follows: emailjs.send(serviceID, templateID, templateParams, userID); . The difference between the two methods is that when using EmailJS to send forms details, sendForm automatically takes the values from the form and supplies them to your specified template.

Below is an example of the emailjs.send method, as seen in the EmailJS docs:

var templateParams = {
name: 'James',
notes: 'Check this out!'
};

emailjs.send('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', templateParams)
.then(function(response) {
console.log('SUCCESS!', response.status, response.text);
}, function(error) {
console.log('FAILED...', error);
});

And that’s it! Once you’ve completed those steps, you are now able to send emails from your website. You can test this out by filling out and submitting your contact form and then checking the inbox of your chosen email service for the new email.

Happy coding!

Image for post
Image for post

Fullstack Software Engineer based in NYC. Passionate about creating social change and making a difference through innovative, powerful technologies.

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