How to Send Emails for Free Using JavaScript: 2 Easy Methods

Sending emails from a web application can enhance user engagement and streamline communication. While many developers opt for backend solutions to send emails, it’s possible to do this directly in JavaScript using free services. This article will guide you through the process of sending emails using JavaScript with a focus on services like EmailJS and SMTP.js.

Why Use a JavaScript Email Service?

Using a JavaScript-based email service offers several advantages:

No Backend Required: You can send emails directly from the client-side without setting up a server.
Quick Setup: Services like EmailJS and SMTP.js simplify the process, requiring minimal configuration.
Cost-Effective: Many services offer free tiers suitable for small projects and personal use.

Method 1 through EmailJS

EmailJS is a popular service that allows you to send emails directly from JavaScript. Here’s how to set it up:

Sign Up for EmailJS

Go to the EmailJS website.
Create an account or log in.
Once logged in, you’ll be taken to the dashboard.

Create an Email Service

Navigate to the Email Services section.
Choose your email service provider (like Gmail, Outlook, etc.) and follow the instructions to connect your account.
Save the service ID provided.

Create an Email Template

Go to the Email Templates section.
Click on Create New Template.
Design your email template using HTML and placeholders for dynamic content.
Save your template and note its ID.

Integrate EmailJS in Your JavaScript Application

Add the EmailJS SDK to your project. You can include it in your HTML file or install it via npm:

<script src="https://cdn.emailjs.com/dist/email.min.js"></script>

Here’s a simple example of how to send an email using EmailJS:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Send Email</title>
</head>
<body>
    <form id="email-form">
        <input type="text" id="name" placeholder="Your Name" required>
        <input type="email" id="email" placeholder="Your Email" required>
        <textarea id="message" placeholder="Your Message" required></textarea>
        <button type="submit">Send Email</button>
    </form>

    <script>
        (function() {
            emailjs.init('YOUR_USER_ID') // Replace with your EmailJS user ID

            document.getElementById('email-form').addEventListener('submit', function(event) {
                event.preventDefault()

                emailjs.send('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', {
                    name: document.getElementById('name').value,
                    email: document.getElementById('email').value,
                    message: document.getElementById('message').value
                }).then(function() {
                    alert('Email sent successfully!')
                }, function(error) {
                    alert('Failed to send email: ' + JSON.stringify(error))
                })
            })
        })()
    </script>
</body>
</html>

Method 2 through SMTP.js

Another option is SMTP.js, which allows you to send emails via SMTP directly from JavaScript.

You can include SMTP.js in your HTML file:

<script src="https://smtpjs.com/v3/smtp.js"></script>

Create a file and add the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Send Email with SMTP.js</title>
</head>
<body>
    <form id="smtp-email-form">
        <input type="text" id="smtp-name" placeholder="Your Name" required>
        <input type="email" id="smtp-email" placeholder="Your Email" required>
        <textarea id="smtp-message" placeholder="Your Message" required></textarea>
        <button type="submit">Send Email</button>
    </form>

    <script>
        document.getElementById('smtp-email-form').addEventListener('submit', function(event) {
            event.preventDefault()

            Email.send({
                Host: "smtp.yourisp.com",
                Username: "yourusername",
                Password: "yourpassword",
                To: '[email protected]',
                From: document.getElementById('smtp-email').value,
                Subject: "New Message from " + document.getElementById('smtp-name').value,
                Body: document.getElementById('smtp-message').value
            }).then(function(message) {
                alert('Email sent successfully!')
            }).catch(function(error) {
                alert('Failed to send email: ' + error)
            })
        })
    </script>
</body>
</html>