HTML Form to Email Using JavaScript and SMTP server 🚀

Do you know HTML Form to Email Using JavaScript and SMTP server. In this tutorial we are going to look into it.

In this tutorial, we are going to look at how to send emails from HTML Form to Email Using JavaScript and SMTP server .Yes 🕺, we can send emails using javascript. if you are using hosting like github pages they don’t allow you to use PHP in the hosting. so this is the only way you can send an email from it.

Recently I found a javascript library that will help us to send emails using javascript and SMTP. the library is called smtpjs.com and here I will show you how to make it work.

First, we need to create a contact form, I like to keep it as simple as possible.

Let’s look at How SMTPjs work

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Send Mail</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://smtpjs.com/v3/smtp.js"></script>
</head>
<body>
    <h3> Send Email using Javascript</h3>
    <form action="#" method="post">
        <label for="name">Your Name</label>
        <input type="text" id="name" placeholder="Enter Name"> <br>
        <label for="email">Email</label>
        <input type="email" id="email" placeholder="Enter Email"> <br>
        <label for="message">Message</label>
        <textarea  id="message" placeholder="Enter Message" rows="3"> </textarea>  <br>

        <button type="submit" id="submit" onclick="sendEmail()"> Send Email </button>
    </form>
     <div id="response"></div>
</body>


<script>  
function sendEmail() {
    let name = document.getElementById("name").value;
    let email = document.getElementById("email").value;
    let message = document.getElementById("message").value;
    let finalmessage = `Name : ${name} <br>  Email : ${email} <br>  Message : ${message} <br>`;

    Email.send({
        Host : "smtp.mailtrap.io",
        Username : "username",
        Password : "password",
        To : '[email protected]',
        From : "[email protected]",
        Subject : "Mail from website",
        Body : finalmessage
    }).then(
      message => alert(message)
    );
}
</script>


</html>

Replace the SMTP details with your’s and it will work for testing purpose you can use mailtrap.io ( mailtrap is a developer tool to test SMTP emails from your projects. mailtrap will log all the emails you send while you developing your application)

YES . I know you cant keep your SMTP details in your javascript and anyone can able to see it. we have a solution for it.

Go to smtpjs.com website , scroll down to security and encrypt your SMTP credentials, and copy the secure token and place it out code instead of using your username and password

Let’s make the code with Secure Token

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Send Mail</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://smtpjs.com/v3/smtp.js"></script>
</head>
<body>
    <h3> Send Email using Javascript </h3>
    <form action="#" method="post">
        <label for="name">Your Name</label>
        <input type="text" id="name" placeholder="Enter Name"> <br>
        <label for="email">Email</label>
        <input type="email" id="email" placeholder="Enter Email"> <br>
        <label for="message">Message</label>
        <textarea  id="message" placeholder="Enter Message" rows="3"> </textarea>  <br>

        <button type="submit" id="submit" onclick="sendEmail()"> Send Email </button>
    </form>
     <div id="response"></div>
</body>


<script>  
function sendEmail() {
    let name = document.getElementById("name").value;
    let email = document.getElementById("email").value;
    let message = document.getElementById("message").value;
    let finalmessage = `Name : ${name} <br>  Email : ${email} <br>  Message : ${message} <br>`;

    Email.send({
        SecureToken : "addyoursecuretokenhere",
        To : '[email protected]',
        From : "[email protected]",
        Subject : "Mail from website",
        Body : finalmessage
    }).then(
      message => alert(message)
    );
}
</script>


</html>

Cool right?

if you want to include an attachment from it? yes, that’s also possible.

here is the sample code

Email Using JavaScript and SMTP Server With Attachment

Email.send({
    SecureToken : "addyoursecuretokenhere",
    To : '[email protected]',
    From : "[email protected]",
    Subject : "This is the subject",
    Body : "And this is the body",
    Attachments : [
    {
        name : "smtpjs.png",
        path : "https://website.com/2017/11/smtpjs.png"
    }]
}).then(
  message => alert(message)
);

Hope this helps. I will give the downloadable source code here, also I will give the video I made about this, you can check that for more reference.

Download Source Code :

Checkout more awesome tutorials

Which Javascript Library is used to send emails

We are using smtpjs javascript library to send emails

Is SMTPjs library is free ?

Yes, SMTPjs library is totally free

Is possible to encrypt my SMTP credentials

Yes. you can simply encrypt your SMTP credentials using SMTPjs

Is sending mail from JavaScript is secure

Yes you have to encrypt your SMTP credentials using SMTPjs

How many mails i can send using SMTPjs

As you are using your SMTP, its depends on your provider. There is no limits to use SMTPjs Library

Published September 22, 2021 | Tags : contactform, email, email validation in javascript, email validation in javascript using regular expression, form validation in javascript, how to fetch form data using javascript, how to recieve form data using javascript, how to validate email address in javascript, how to validate form using javascript, how to validate html form using javascript, html form to mail, javascript, login form using html css and javascript, mail, send email from html form javascript, send email using javascript, smtp,

Post Your Questions on our forum

Post a question on Forum

Ajith Jojo Joseph

Self taught, dedicated young entrepreneur with many licensed products under his sleeve. Passionate about technology, business and excellence in general.

Share with your friends:

Comments are closed.