Send Email from frontend using Vanilla JavaScript

Send Email from frontend using Vanilla JavaScript

Ever wondered as a frontender how to receive personal comments, queries or any kind of messages from your own site to your inbox. Here we are gonna use a third party service EmailJS which is solely built for the same and does the job in ease.

Predecessors

HTML5 specification
There is a HTML specification which can be used along with anchor tags as well in form actions.

<a href="mailto:yourname@mail.com">Send a mail</a>

<form action="mailto:yourname@mail.com" method="post"> ... </form>

But its cons exceeded the pros as;

  • Doesn't work with a system having no mailing service.
  • Spam bank as your email get exposed to public.
  • Not that customizable.

Server Side Scripting
Since sending a mail is a backend process it requires a server-side code such as NodeJS, Django or PHP.


Solution using EmailJS

Configuration

emailjsconfig.gif

  1. Signup for a account at EmailJS, access the Email Services from the dashboard and add a new service you're gonna use and connect your mail with EmailJS API. Here I use Gmail but the configuration process is the same for all.
    Now the service you provided show's up with the logo, Name and ID of your service is customizable

  2. Move to Email Templates from the dashboard, this defines what data you require from the clients. Same here add a new template which leaves out to be uniform for all clients.

This template is highly customizable with basic subject, name, phone to auto-reply services, attachments and such. Here I use the basic information we require from a client.

We use dynamic variables for the same which vary with each and every client using;

{{from_name}}  /*which fills out with the clients name*/
{{from_email}}  /*which fills out with the clients email*/
{{message}}  /*which fills out with the clients message*/

Now we've are up with the email service and template its time to implement the same in your site. (Note: remember the ID's of service and template)

Implementation

Add the EmailJS CDN to your projects head.

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/emailjs-com@2/dist/email.min.js"></script>

We have to call a random function with the User ID provided by EmailJS; from dashboard -> integration -> API -> API keys

(function () {
    emailjs.init("UserID specific to your account");
})();

Now we've initialized the EmailJS SDK, let's send a form with Email Service and Email Template specified above.

emailjs.send('YOURservice_id', 'YOURtemplate_id', YOURvariables);

Here let me show a real example;

implementemailjs.gif

File.js

window.onload = function() {
   const form=document.getElementById('contact-form');
   form.addEventListener('submit', function(event) {
      event.preventDefault();
      // values added by the client in form
      const name=form.elements['name'].value;
      const email=form.elements['email'].value;
      const comment=form.elements['message'].value;

const templateParams={
     from_name:name,   /*from_name,from_email,message were the dynamic 
                   variablesin the template*/
    from_email:email,
    message:comment
   }

 // these IDs from the previous steps
      emailjs.send('contact_service', 'contact_form', templateParams);
  });
}

File.html

<form id="contact-form" method="post" enctype="text/plain">
      <div class="set">
           <label for="name" id="name-label">Name</label>
           <input type="text" id="name" placeholder=" Enter name" name="name" class="value" required>
      </div>

      <div class="set">
            <label for="email" id="email-label">E-mail</label>
             <input type="email" id="email" placeholder="Email" name="email" class="value" required>
      </div>

      <div class="set">
             <p>Message</p>
             <textarea name="message" id="message" cols="30" rows="10" placeholder="Message" class="value"></textarea>
      </div>

      <div class="set">
           <input type="submit" id="submit" class="value">
      </div>
</form>

That's it now you've got a simple email service to implement on your site.

Like this My drafted Portfolio

This post is so special to me as it took a long time to figure out the working, reading docs, and stuff.

Hope this helped you all. Like Share your queries on comments :)