Email Js

A email Automation Service

Get Mr.Unknown’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Here I gonna explain with the Portfolio contact form Email Automation simply follow the below step:

1.Intialization Code:

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/emailjs-com@3/dist/email.min.js" > </script>
            <script type="text/javascript">
              (function() {
              emailjs.init("*************");
              })();
              </script>

Insert this in head tag fill this emailjs.init(“*************”); with your Public Key you can found on Account section

2. Sending Email

function sendemail(){

 var email=document.getElementById("email").value;
 var from_name=document.getElementById("name").value;
 var message=document.getElementById("message").value;

 var templateParams = {
        email: email,
        from_name: from_name,
  message: message
      };

      emailjs.send('service_******', 'template_******', templateParams)
  .then(function(response) {
     console.log('SUCCESS!', response.status, response.text);
     window.alert("Sent successfully!");
     
  })

     
}

This is the Javascript code to Automate the send mail you need to change the ServiceID(‘service_******’), templateID(‘template_******’) you can found on the ServiceID in Service section this should be blank before selecting any sercive so, first select and connect the service and the TemplateID in template section you need create the templete by creating the new templete the temple code is in below section

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            color: #333;
            margin: 0;
            padding: 20px;
            background-color: #f4f4f4;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        h2 {
            font-size: 20px;
            color: #2c3e50;
            margin-bottom: 10px;
        }
        ul {
            list-style: none;
            padding: 0;
        }
        li {
            margin-bottom: 15px;
            padding: 10px;
            background-color: #f9f9f9;
            border-radius: 5px;
        }
        strong {
            color: #2c3e50;
        }
        p {
            font-size: 16px;
            line-height: 1.6;
        }
    </style>
</head>
<body>
    <div class="container">
        <p>You have a new contact form submission from<strong> {{name}}:</strong></p>
        <ul>
            <li>
                <h2>Name:</h2>
                <strong>{{name}}</strong>
            </li>
            <li>
                <h2>Email:</h2>
                <strong>{{email}}</strong>
            </li>
            <li>
                <h2>Subject:</h2>
                <strong>{{subject}}</strong>
            </li>
            <li>
                <h2>Message:</h2>
                <p>{{message}}</p>
            </li>
        </ul>
    </div>
</body>
</html>

Contact Form:

<div class="right-contact">
                        <form action="" class="contact-form">
                            <div class="input-control i-c-2">
                                <input type="text" id="name" name="name" required placeholder="YOUR NAME">
                                <input type="email" id="email" name="email" required placeholder="YOUR EMAIL">
                            </div>
                            <div class="input-control">
                                <input type="text" id="subject" name="subject" required placeholder="ENTER SUBJECT">
                            </div>
                            <div class="input-control">
                                <textarea name="message" id="message" cols="15" rows="8" placeholder="Message Here..."></textarea>
                            </div>
                            <div class="submit-btn" onclick="sendemail()" >
                                <a href="#" rel="noopener noreferrer" class="main-btn">
                                    <span class="btn-text">SUBMIT</span>
                                    <span class="btn-icon"><i class="fas fa-rocket"></i></span>
                                </a>
                            </div>
                        </form>
                    </div>
                    <script> function sendemail(){

                        var email=document.getElementById("email").value;
                        var name=document.getElementById("name").value;
                        var message=document.getElementById("message").value;
                        var subject=document.getElementById("subject").value;
                    
                        var templateParams = {
                            name : name,
                            email: email,
                            subject : subject,
                            message: message,
                          };
                    
                          emailjs.send('service_nwrj1zm', 'template_nfmzh39', templateParams)
                      .then(function(response) {
                         console.log('SUCCESS!', response.status, response.text);
                         window.alert("Sent successfully!");
                         
                      })
                    
                         
                    }
                    </script>
                </div>
            </div>