Sending emails from website is somehow critical part which required your personal credentials also. For that purpose you will need to add code of service in your backend programming code. But what if you have only Html CSS and VanillaJS in your app and you need email system to receive message of your audience directly on your email address. Don’t worry fortunately we have such method that you can make this possible without any backend code.

Why it is recommended to implement email service programming on backend server ?

Implementing email service on your website will required your personal credential including Email , Password, API key etc. So this credential you can not use in vanillaJS app as it is not secure at all. Whatever code is executed on client/Browser side, anyone can see your code files and this is not hidden hence not secure.

Then how we can implemented this process in vanillaJS application securely ?

For this implementation we will make a use of following things.

• Email JS

• Elastic email (Optional)

How does EmailJS work?

EmailJS helps to send emails using client-side technologies only. No server is required – just connect EmailJS to one of the supported email services, create an email template, and use one of our SDK libraries to trigger an email.

Email templates can optionally contain dynamic variables in almost any template field (such as Subject, Content, To Email address, From Name, etc.) which are populated from the application code calls. For example, the subject can be "{{ name }}, you have a new message", and using your app code the name can be set to "James Dean", for instance.

Create EmailJS Account.

If you don’t have emailJS account then create it (Process is pretty simple). Once you create an account you will have to do 1. Choose Service 2. Create an Email template. After this process you will have Service ID and Template ID which we need in our Code.

Step 1: Add new service to to get service_ID. There are many Email services are here to use. If you want to make use of gmail then create service using gmail. If you have any other special business email then you will have to use SMTP Server.

HTML Code

<form id="emailForm">
    <input type=“text” id=“name” name=“name” required><br><br>
    <input type="email" id=“email” name=“email” required><br><br>
    <input type="text" id="subject" name="subject" required><br><br>
    <textarea id="message" name="message" required></textarea><br><br>
    <button type="submit">Send Email</button>
</form>

JavaScript Code

emailjs.init(“EmailJS user id (Public Key) ”);
// Find your public key in Account Section

document.getElementById('emailForm').addEventListener('submit', function (e) {
    e.preventDefault();

    let name = document.querySelector('#name').value;
    let user_email = document.querySelector('#email').value;
    let subject = document.querySelector('#subject').value;
    let message = document.querySelector('#message').value;

// Note : Do not use email parameter (let email  = *** like this) in above section as emailjs.send() stops working if we do so. 


    if (name && user_email && subject && message) {
        // Prepare the email template parameters
        const emailParams = {
            name: name,
            user_email: user_email,
            subject: subject,
            message: message
        };

        // Send the email using EmailJS
        document.querySelector('.submit').innerHTML = 'Sending...'
        emailjs.send("service_ID”, "template_ID”, emailParams)
            .then(function (response) {
                console.log("Email sent successfully", response);
                alert("Email sent successfully!");
            }, function (error) {
                console.error("Email failed to send", error);
                alert("Email failed to send. Please try again later.");
            });
    }
});

Here we go. Now you can send emails from your javascript application.