Web_Dev_Grad

EmailJS is a very handy way of connecting your website to an email provider, allowing submitted forms on your website to appear in your inbox. When a validated form is submitted, EmailJS takes the contents of the form, packages it into an email template and sends it to your pre-designated inbox. This is extremely handy for static webpages because it requires no back-end on your part.

Setting up Your Account

Head over to their website and sign up for a free account. Once in the dashboard you can open the Email Services and Add New Device. The steps are pretty easy to follow.

You will receive a Service ID that looks a bit like: service_abc123

Creating an Email Template

On the dashboard click on Email Templates, then Create New Template. Using a template, tweak the text and variables (surrounded in double curly brackets) to your requirements. An example may look like:

• Subject:
  • New message from {{from_name}}
• Content:
  • Hello,
  • You got a new message from {{from_name}}
  • Email ID: {{email_id}}
  • Message: {{message}}

Saving it will give you a template ID.

Getting Your Public Key

You can easily find your public key in Account > API Keys.

Adding the Library

Next include the EmailJS SDK before your closing </body> tag.

<script src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script>

And then connect it your account by using your public key with:

There are two parts to making your submittable form on your website; the HTML and then the JavaScript to handle the submission. Below are the examples of a contact form I have used before.

The key thing to remember here are to include as many inputs that cover the variables (words wrapped in double curly brackets) in your EmailJS email template. Use these variables as the 'name' attribute for the respective input.

In the JavaScript, target your contact form, add an event listener for it's submission, then use your service ID and template ID to send the data.

<div>
      <form id="contact-form">
         <input type="text" name="from_name" id="fullname" class="form-control" placeholder="Name" required>
         <input type="email" name="email_id" id="emailaddress" class="form-control" placeholder="Email" required>
         <textarea rows="5" name="message" id="projectsummary" class="form-control" placeholder="Project or role description" required></textarea>
         <div class="form-row text-center">
            <div class="col">
                  <button type="submit">Send Contact Request</button>
            </div>
         </div>
      </form>
</div>

document.getElementById("contact-form").addEventListener("submit", function(event) {
      event.preventDefault();

      emailjs.sendForm("SERVICE_ID", "TEMPLATE_ID", this)
      .then(function() {
            alert("Message sent successfully!");
      }, function(error) {
            alert("Failed to send: " + JSON.stringify(error));
      });
});