EmailJS: Send emails directly from your client-side JavaScript code

Anjula Shanaka
Webtips
Published in
3 min readJan 31, 2021
EmailJS: Send emails directly from your client-side JavaScript code

Are you looking for a way to get the email that your contact form sends without a server? I had the same problem when I was creating the website to showcase Aphelia. Haven’t heard about Aphelia yet? Let me introduce Aphelia in brief before starting the article. Aphelia is an AI-based resume parser API that can seamlessly integrate with your recruitment application. This is the future of resume parsers.

What is EmailJS?

EmailJS is a service that allows us to send emails directly from your client-side JavaScript code. As you can see, if we use EmailJs we don’t need a server to do that.

How does EmailJS work?

Just connect EmailJS to one of the supported email services, create an email template, and use Javascript to trigger an email.

Let me show you an example step by step so that you can understand how to get started on this.

Getting Started

  1. Create an account
    You can create your account from here. You can choose a plan according to your requirements for my purpose free plan was enough which gives us 200 emails.
  2. Connect your email
    Once you created your account you can access the EmailJS dashboard. In the dashboard, you can add your email service.
creating an email service

3. Create your email template

You can create your own email template based on your requirement. Follow this tutorial on how to create your templates.

email template

4. Create a trigger in your code

In this example, I’m going to use React Js to create the trigger. The code snippets below show the code for the form and the function that sends the email when a user submits the form.

Contact Form

After following these steps you will get your emails to your given email service.

EmailJS provides additional features such as auto-reply, adding attachments, requiring CAPTCHA validation.

This was about sending emails without a server from the frontend. Please make sure to go through the full documentation to get more. See you guys on the next one. Until then stay safe! ✌️

References:

[1]. EmailJS.[2021] Docs [Online]. Available at: https://www.emailjs.com/docs/ [Accessed 31 January 2021]

--

--

Anjula Shanaka
Webtips

GSoC ’22 @openMRS | CTO @SEF | Developer @promiseQ | Undergraduate @USJ