[javascript] How to send an email from JavaScript

I want my website to have the ability to send an email without refreshing the page. So I want to use Javascript.

<form action="javascript:sendMail();" name="pmForm" id="pmForm" method="post">
Enter Friend's Email:
<input name="pmSubject" id="pmSubject" type="text" maxlength="64" style="width:98%;" />
<input name="pmSubmit" type="submit" value="Invite" />

Here is how I want to call the function, but I'm not sure what to put into the javascript function. From the research I've done I found an example that uses the mailto method, but my understanding is that doesn't actually send directly from the site.

So my question is where can I find what to put inside the JavaScript function to send an email directly from the website.

function sendMail() {
    /* ...code here...    */
}

I couldn't find an answer that really satisfied the original question.

• Mandrill is not desirable due to it's new pricing policy, plus it required a backend service if you wanted to keep your credentials safe.
• It's often preferable to hide your email so you don't end up on any lists (the mailto solution exposes this issue, and isn't convenient for most users).
• It's a hassle to set up sendMail or require a backend at all just to send an email.

I put together a simple free service that allows you to make a standard HTTP POST request to send an email. It's called PostMail, and you can simply post a form, use Javascript or jQuery. When you sign up, it provides you with code that you can copy & paste into your website. Here are some examples:

Javascript:

<form id="javascript_form">
    <input type="text" name="subject" placeholder="Subject" />
    <textarea name="text" placeholder="Message"></textarea>
    <input type="submit" id="js_send" value="Send" />
</form>

<script>

    //update this with your js_form selector
    var form_id_js = "javascript_form";

    var data_js = {
        "access_token": "{your access token}" // sent after you sign up
    };

    function js_onSuccess() {
        // remove this to avoid redirect
        window.location = window.location.pathname + "?message=Email+Successfully+Sent%21&isError=0";
    }

    function js_onError(error) {
        // remove this to avoid redirect
        window.location = window.location.pathname + "?message=Email+could+not+be+sent.&isError=1";
    }

    var sendButton = document.getElementById("js_send");

    function js_send() {
        sendButton.value='Sending…';
        sendButton.disabled=true;
        var request = new XMLHttpRequest();
        request.onreadystatechange = function() {
            if (request.readyState == 4 && request.status == 200) {
                js_onSuccess();
            } else
            if(request.readyState == 4) {
                js_onError(request.response);
            }
        };

        var subject = document.querySelector("#" + form_id_js + " [name='subject']").value;
        var message = document.querySelector("#" + form_id_js + " [name='text']").value;
        data_js['subject'] = subject;
        data_js['text'] = message;
        var params = toParams(data_js);

        request.open("POST", "https://postmail.invotes.com/send", true);
        request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

        request.send(params);

        return false;
    }

    sendButton.onclick = js_send;

    function toParams(data_js) {
        var form_data = [];
        for ( var key in data_js ) {
            form_data.push(encodeURIComponent(key) + "=" + encodeURIComponent(data_js[key]));
        }

        return form_data.join("&");
    }

    var js_form = document.getElementById(form_id_js);
    js_form.addEventListener("submit", function (e) {
        e.preventDefault();
    });
</script>

jQuery:

<form id="jquery_form">
    <input type="text" name="subject" placeholder="Subject" />
    <textarea name="text" placeholder="Message" ></textarea>
    <input type="submit" name="send" value="Send" />
</form>

<script>

    //update this with your $form selector
    var form_id = "jquery_form";

    var data = {
        "access_token": "{your access token}" // sent after you sign up
    };

    function onSuccess() {
        // remove this to avoid redirect
        window.location = window.location.pathname + "?message=Email+Successfully+Sent%21&isError=0";
    }

    function onError(error) {
        // remove this to avoid redirect
        window.location = window.location.pathname + "?message=Email+could+not+be+sent.&isError=1";
    }

    var sendButton = $("#" + form_id + " [name='send']");

    function send() {
        sendButton.val('Sending…');
        sendButton.prop('disabled',true);

        var subject = $("#" + form_id + " [name='subject']").val();
        var message = $("#" + form_id + " [name='text']").val();
        data['subject'] = subject;
        data['text'] = message;

        $.post('https://postmail.invotes.com/send',
            data,
            onSuccess
        ).fail(onError);

        return false;
    }

    sendButton.on('click', send);

    var $form = $("#" + form_id);
    $form.submit(function( event ) {
        event.preventDefault();
    });
</script>

Again, in full disclosure, I created this service because I could not find a suitable answer.

Indirect via Your Server - Calling 3rd Party API - secure and recommended

Your server can call the 3rd Party API after proper authentication and authorization. The API Keys are not exposed to client.

node.js - https://www.npmjs.org/package/node-mandrill

const mandrill = require('node-mandrill')('<your API Key>'); 

function sendEmail ( _name, _email, _subject, _message) {
    mandrill('/messages/send', {
        message: {
            to: [{email: _email , name: _name}],
            from_email: '[email protected]',
            subject: _subject,
            text: _message
        }
    }, function(error, response){
        if (error) console.log( error );
        else console.log(response);
    });
}

// define your own email api which points to your server.

app.post( '/api/sendemail/', function(req, res){
            
    let _name = req.body.name;
    let _email = req.body.email;
    let _subject = req.body.subject;
    let _messsage = req.body.message;

    //implement your spam protection or checks. 

    sendEmail ( _name, _email, _subject, _message );

});

and then use use $.ajax on client to call your email API.

Directly From Client - Calling 3rd Party API - not recomended

Send an email using only JavaScript

in short:

1. register for Mandrill to get an API key
2. load jQuery
3. use $.ajax to send an email

Like this -

function sendMail() {
    $.ajax({
      type: 'POST',
      url: 'https://mandrillapp.com/api/1.0/messages/send.json',
      data: {
        'key': 'YOUR API KEY HERE',
        'message': {
          'from_email': '[email protected]',
          'to': [
              {
                'email': '[email protected]',
                'name': 'RECIPIENT NAME (OPTIONAL)',
                'type': 'to'
              }
            ],
          'autotext': 'true',
          'subject': 'YOUR SUBJECT HERE!',
          'html': 'YOUR EMAIL CONTENT HERE! YOU CAN USE HTML!'
        }
      }
     }).done(function(response) {
       console.log(response); // if you're into that sorta thing
     });
}

https://medium.com/design-startups/b53319616782

Note: Keep in mind that your API key is visible to anyone, so any malicious user may use your key to send out emails that can eat up your quota.

In your sendMail() function, add an ajax call to your backend, where you can implement this on the server side.

The short answer is that you can't do it using JavaScript alone. You'd need a server-side handler to connect with the SMTP server to actually send the mail. There are many simple mail scripts online, such as this one for PHP:

Use Ajax to send request to the PHP script ,check that required field are not empty or incorrect using js also keep a record of mail send by whom from your server.

function sendMail() is good for doing that.

Check for any error caught while mailing from your script and take appropriate action.
For resolving it for example if the mail address is incorrect or mail is not send due to server problem or it's in queue in such condition report it to user immediately and prevent multi sending same email again and again. Get response from your script Using jQuery GET and POST

$.get(URL,callback); $.post(URL,callback);

window.open('mailto:[email protected]'); as above does nothing to hide the "[email protected]" email address from being harvested by spambots. I used to constantly run into this problem.

var recipient="test";
var at = String.fromCharCode(64);
var dotcom="example.com";
var mail="mailto:";
window.open(mail+recipient+at+dotcom);

There is a combination service. You can combine the above listed solutions like mandrill with a service EmailJS, which can make the system more secure. They have not yet started the service though.

There seems to be a new solution at the horizon. It's called EmailJS. They claim that no server code is needed. You can request an invitation.

Update August 2016: EmailJS seems to be live already. You can send up to 200 emails per month for free and it offers subscriptions for higher volumes.

I know I am wayyy too late to write an answer for this question but nevertheless I think this will be use for anybody who is thinking of sending emails out via javascript.

The first way I would suggest is using a callback to do this on the server. If you really want it to be handled using javascript folowing is what I recommend.

The easiest way I found was using smtpJs. A free library which can be used to send emails.

1.Include the script like below

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

2. You can either send an email like this

Email.send({_x000D_
    Host : "smtp.yourisp.com",_x000D_
    Username : "username",_x000D_
    Password : "password",_x000D_
    To : '[email protected]',_x000D_
    From : "[email protected]",_x000D_
    Subject : "This is the subject",_x000D_
    Body : "And this is the body"_x000D_
    }).then(_x000D_
      message => alert(message)_x000D_
    );

Which is not advisable as it will display your password on the client side.Thus you can do the following which encrypt your SMTP credentials, and lock it to a single domain, and pass a secure token instead of the credentials instead.

Email.send({_x000D_
    SecureToken : "C973D7AD-F097-4B95-91F4-40ABC5567812",_x000D_
    To : '[email protected]',_x000D_
    From : "[email protected]",_x000D_
    Subject : "This is the subject",_x000D_
    Body : "And this is the body"_x000D_
}).then(_x000D_
  message => alert(message)_x000D_
);

Finally if you do not have a SMTP server you use an smtp relay service such as Elastic Email

Also here is the link to the official SmtpJS.com website where you can find all the example you need and the place where you can create your secure token.

I hope someone find this details useful. Happy coding.

You can find what to put inside the JavaScript function in this post.

function getAjax() {
    try {
        if (window.XMLHttpRequest) {
            return new XMLHttpRequest();
        } else if (window.ActiveXObject) {
            try {
                return new ActiveXObject('Msxml2.XMLHTTP');
            } catch (try_again) {
                return new ActiveXObject('Microsoft.XMLHTTP');
            }
        }
    } catch (fail) {
        return null;
    }
}

function sendMail(to, subject) {
     var rq = getAjax();

     if (rq) {
         // Success; attempt to use an Ajax request to a PHP script to send the e-mail
         try {
             rq.open('GET', 'sendmail.php?to=' + encodeURIComponent(to) + '&subject=' + encodeURIComponent(subject) + '&d=' + new Date().getTime().toString(), true);

             rq.onreadystatechange = function () {
                 if (this.readyState === 4) {
                     if (this.status >= 400) {
                         // The request failed; fall back to e-mail client
                         window.open('mailto:' + to + '?subject=' + encodeURIComponent(subject));
                     }
                 }
             };

             rq.send(null);
         } catch (fail) {
             // Failed to open the request; fall back to e-mail client
             window.open('mailto:' + to + '?subject=' + encodeURIComponent(subject));
         }
     } else {
         // Failed to create the request; fall back to e-mail client
         window.open('mailto:' + to + '?subject=' + encodeURIComponent(subject));
     }
}

Provide your own PHP (or whatever language) script to send the e-mail.

JavaScript can't send email from a web browser. However, stepping back from the solution you've already tried to implement, you can do something that meets the original requirement:

send an email without refreshing the page

You can use JavaScript to construct the values that the email will need and then make an AJAX request to a server resource that actually sends the email. (I don't know what server-side languages/technologies you're using, so that part is up to you.)

If you're not familiar with AJAX, a quick Google search will give you a lot of information. Generally you can get it up and running quickly with jQuery's $.ajax() function. You just need to have a page on the server that can be called in the request.

I am breaking the news to you. You CAN'T send an email with JavaScript per se.

Based on the context of the OP's question, my answer above does not hold true anymore as pointed out by @KennyEvitt in the comments. Looks like you can use JavaScript as an SMTP client.

However, I have not digged deeper to find out if it's secure & cross-browser compatible enough. So, I can neither encourage nor discourage you to use it. Use at your own risk.

Send an email using the JavaScript or jQuery

var ConvertedFileStream;
var g_recipient;
var g_subject;
var g_body;
var g_attachmentname;


function SendMailItem(p_recipient, p_subject, p_body, p_file, p_attachmentname, progressSymbol) {

    // Email address of the recipient 
    g_recipient = p_recipient;

   // Subject line of an email
    g_subject = p_subject;

   // Body description of an email
    g_body = p_body;

    // attachments of an email
    g_attachmentname = p_attachmentname;

    SendC360Email(g_recipient, g_subject, g_body, g_attachmentname);

}

function SendC360Email(g_recipient, g_subject, g_body, g_attachmentname) {
    var flag = confirm('Would you like continue with email');
    if (flag == true) {

        try {
            //p_file = g_attachmentname;
            //var FileExtension = p_file.substring(p_file.lastIndexOf(".") + 1);
           // FileExtension = FileExtension.toUpperCase();
            //alert(FileExtension);
            SendMailHere = true;

            //if (FileExtension != "PDF") {

            //    if (confirm('Convert to PDF?')) {
            //        SendMailHere = false;                    
            //    }

            //}
            if (SendMailHere) {
                var objO = new ActiveXObject('Outlook.Application');

                var objNS = objO.GetNameSpace('MAPI');

                var mItm = objO.CreateItem(0);

                if (g_recipient.length > 0) {
                    mItm.To = g_recipient;
                }

                mItm.Subject = g_subject;

                // if there is only one attachment                 
                // p_file = g_attachmentname;
                // mAts.add(p_file, 1, g_body.length + 1, g_attachmentname);

                // If there are multiple attachment files
                //Split the  files names
                var arrFileName = g_attachmentname.split(";");
                 // alert(g_attachmentname);
                //alert(arrFileName.length);
                var mAts = mItm.Attachments;

                for (var i = 0; i < arrFileName.length; i++)
                {
                    //alert(arrFileName[i]);
                    p_file = arrFileName[i];
                    if (p_file.length > 0)
                    {                     
                        //mAts.add(p_file, 1, g_body.length + 1, g_attachmentname);
                        mAts.add(p_file, i, g_body.length + 1, p_file);

                    }
                }

                mItm.Display();

                mItm.Body = g_body;

                mItm.GetInspector.WindowState = 2;

            }
            //hideProgressDiv();

        } catch (e) {
            //debugger;
            //hideProgressDiv();
            alert('Unable to send email.  Please check the following: \n' +
                    '1. Microsoft Outlook is installed.\n' +
                    '2. In IE the SharePoint Site is trusted.\n' +
                    '3. In IE the setting for Initialize and Script ActiveX controls not marked as safe is Enabled in the Trusted zone.');
        }
    }
  }

Javascript is client-side, you cannot email with Javascript. Browser recognizes maybe only mailto: and starts your default mail client.

Another way to send email from JavaScript, is to use directtomx.com as follows;

 Email = {
 Send : function (to,from,subject,body,apikey)
    {
        if (apikey == undefined)
        {
            apikey = Email.apikey;
        }
        var nocache= Math.floor((Math.random() * 1000000) + 1);
        var strUrl = "http://directtomx.azurewebsites.net/mx.asmx/Send?";
        strUrl += "apikey=" + apikey;
        strUrl += "&from=" + from;
        strUrl += "&to=" + to;
        strUrl += "&subject=" + encodeURIComponent(subject);
        strUrl += "&body=" + encodeURIComponent(body);
        strUrl += "&cachebuster=" + nocache;
        Email.addScript(strUrl);
    },
    apikey : "",
    addScript : function(src){
            var s = document.createElement( 'link' );
            s.setAttribute( 'rel', 'stylesheet' );
            s.setAttribute( 'type', 'text/xml' );
            s.setAttribute( 'href', src);
            document.body.appendChild( s );
    }
};

Then call it from your page as follows;

 window.onload = function(){
    Email.apikey = "-- Your api key ---";
    Email.Send("[email protected]","[email protected]","Sent","Worked!");
 }

Since these all are wonderful infos there's a little api called Mandrill to send mails from javascript and it works perfectly. You can give it a shot. Here's a little tutorial for the start.

It seems like one 'answer' to this is to implement an SMPT client. See email.js for a JavaScript library with an SMTP client.

Here's the GitHub repo for the SMTP client. Based on the repo's README, it appears that various shims or polyfills may be required depending on the client browser, but overall it does certainly seem feasible (if not actually significantly accomplished), tho not in a way that's easily describable by even a reasonably-long answer here.

There is not a straight answer to your question as we can not send email only using javascript, but there are ways to use javascript to send emails for us:

1) using an api to and call the api via javascript to send the email for us, for example https://www.emailjs.com says that you can use such a code below to call their api after some setting:

var service_id = 'my_mandrill';
var template_id = 'feedback';
var template_params = {
name: 'John',
reply_email: '[email protected]',
message: 'This is awesome!'
};

emailjs.send(service_id,template_id,template_params);

2) create a backend code to send an email for you, you can use any backend framework to do it for you.

3) using something like:

window.open('mailto:me@http://stackoverflow.com/');

which will open your email application, this might get into blocked popup in your browser.

In general, sending an email is a server task, so should be done in backend languages, but we can use javascript to collect the data which is needed and send it to the server or api, also we can use third parities application and open them via the browser using javascript as mentioned above.

If and only if i had to use some js library, i would do that with SMTPJs library.It offers encryption to your credentials such as username, password etc.