Javascript send form to email

Contact forms are essential part of every website especially portfolio websites. This is how one gets contacted.

However, we have many portfolios flying around without a contact form or at least, a working contact form. The reason is usually that the frontend person do not know how to create the backend functionality of the contact form. That is understandable. This is part of the reasons Emailjs was created. It is also free.

Emailjs is a free tool that allows you to Send Email Directly From frontend with No server code. You can send and receive up to 200 emails using the free package. This is reasonable if you ask me. You can also upgrade with just a little token.

In this tutorial, I will walk you through building a contact form that sends email directly to your email address. We will build it in plain JavaScript. We will also look at React in the next tutorial. Let's get to it.

Create and Setup a free Account

• Go to the signup page and create an account.

You should now be in your dashboard like so:

Add a new Email Service

Email Service could be Personal or Transactional. You can read more on that here.

Since we just need to receive personal emails sent to us via our website, we will stick to the Personal Email Service.

• On the side menu, click on Email Services:
  

• Click on Add Email Service:
  

• Select Gmail from the dialogue box:
  

• You can now see your Service ID in the screen that follows

• Click on Connect Account just below the Service ID.
  

Do not uncheck Send test email to verify configuration if you want to receive a test email confirming your connection

You should now have the gmail authorization screen. Please select the email you want to use

• Check all boxes and Continue

• When the connection is successful, you should now be back to this screen with a confirmation message: Connected as like the screen below

You can always come back here to disconnect

I also got an email to confirm my connection to Emailjs:

• Finally, click on Create Service to complete Email Service creation

You should now have a new service added like so:

Nice one!!! Do keep the Service ID because you will be needing it shortly.

Create Your Email Template

The Email Templates is used to design how we want the emails sent to us will look. So to do that, go to the side menu in the dashboard and click the Email Templates link

• Click on Create New Template

You will now have the template screen like so:

You will notice that the screen looks just like you are about to create a new email.

For every field, you can fill in a default text you will like to get. However, any text in side double curly braces, becomes a variable. For example, in the email body, {{message}} is a variable. When you create a form, the input box with the name: message, is to collect the text that will be rendered in the email body where {{message}} is situated.

I hope that makes sense. You will understand more as we proceed anyways.

• Let's now change the email content a little. For the subject field, just enter {{subject}} and for the email body, enter the following:

{{message}}

{{name}}
{{email}}

Enter fullscreen mode Exit fullscreen mode

My screen now looks like this:

Click on Save

You may choose to test it by clicking the Test It Button next to the Save Button. It's pretty straight forward.

This time for us to build our JavaScript application has now arrived.

JavaScript

Starter Project

Get the starter code here or just create a project with a file: index.html and add the following code:

 lang="en">
  
     charset="UTF-8" />
     name="viewport" content="width=device-width, initial-scale=1.0" />

    
    
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm//dist/css/bootstrap.min.css"
      integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
      crossorigin="anonymous"
    />
    
  
  
     class="container">
       class="row">
         class="col align-self-center">
           class="text-center">Email - JavaScript Contact Form
          
           id="myForm">
            
             class="form-group">
               for="name">Name
              
                type="name"
                name="name"
                class="form-control"
                id="name"
                placeholder="enter your name"
              />