HTML Form to Email Using JavaScript and SMTP server ๐Ÿš€

Hello Everyone, ๐Ÿ™‹โ€โ™‚๏ธ

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

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 :ย 

Share with your friends:

Ajith Jojo Joseph

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

HTML Form to Email Using JavaScript and SMTP server ๐Ÿš€

Hello Everyone, ๐Ÿ™‹โ€โ™‚๏ธ In this tutorial, we are going to look at how to send emails from HTML Form to […]

22 September, 2021

Submit Form Without Refreshing Page PHP and Javascript

Hello Everyone, In this tutorial, we are going to learn, How to submit a form without reloading. yeah, that’s so […]

18 September, 2021

HTML to PDF Convertor easiest way using Javascript

Hello everyone,ย  in this tutorial we are going to learn how to make an HTML to PDF converter. In this […]

3 September, 2021

How to create a Girlfriend by using AI and javascript

Hey guys, Today we are going to make an AI chatbot using javascript and some API’s. Let me explain how […]

10 July, 2021

Newsletter

Subscribe to our weekly Newsletter and stay tuned.


Free PHP Invoicing Software

Gmax CRM Lite is an Invoicing and project management tool for small businesses, features including client management , invoicing , quotation and project management

Download for free