How to send an email from JavaScript

Question

I want my website to have the ability to send an email without refreshing the page  So I want to use Javascript    lt form action  javascript sendMail     name  pmForm  id  pmForm  method  post  gt  Enter Friend s Email   lt input name  pmSubject  id  pmSubject  type  text  maxlength  64  style  width 98      gt   lt input name  pmSubmit  type  submit  value  Invite    gt    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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

You can t send an email directly with javascript   You can  however  open the user s mail client   window open  mailto test example com      There are also some parameters to pre-fill the subject and the body   window open  mailto test example com subject subject amp body body        Another solution would be to do an ajax call to your server  so that the server sends the email  Be careful not to allow anyone to send any email through your server

User · Answer

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

User · 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     lt your API Key gt       function sendEmail    name   email   subject   message        mandrill   messages send             message                to    email   email   name   name                from email   noreply yourdomain com               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   register for Mandrill to get an API key load jQuery 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    YOUR EMAIL HERE              to                                      email    RECIPIENT EMAIL HERE                    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

User · Answer

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  amp  cross-browser compatible enough  So  I can neither encourage nor discourage you to use it  Use at your own risk

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

window open  mailto test example com    as above does nothing to hide the  test example com  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

User · Answer

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      amp subject     encodeURIComponent subject      amp d     new Date   getTime   toString    true                 rq onreadystatechange   function                       if  this readyState     4                         if  this status  gt   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

User · Answer

x000D   x000D  function send     x000D    setTimeout function     x000D      window open  mailto     document getElementById  email   value     subject     document getElementById  subject   value     amp body     document getElementById  message   value   x000D       320   x000D    x000D  input   x000D    text-align  center  x000D    border-top  none  x000D    border-right  none  x000D    border-left  none  x000D    height  10vw  x000D    font-size  2vw  x000D    width  100vw  x000D    x000D   x000D  textarea   x000D    text-align  center  x000D    border-top  none  x000D    border-right  none  x000D    border-left  none  x000D    border-radius  5px  x000D    width  100vw  x000D    height  50vh  x000D    font-size  2vw  x000D    x000D   x000D  button   x000D    border  none  x000D    background-color  white  x000D    position  fixed  x000D    right  5px  x000D    top  5px  x000D    transition  transform  5s  x000D    x000D   x000D  input focus   x000D    outline  none  x000D    color  orange  x000D    border-radius  3px  x000D    x000D   x000D  textarea focus   x000D    outline  none  x000D    color  orange  x000D    border-radius  7px  x000D    x000D   x000D  button focus   x000D    outline  none  x000D    transform  scale 0   x000D    transform  rotate 360deg   x000D    x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   x000D   lt head gt  x000D     lt title gt Send Email lt  title gt  x000D   lt  head gt  x000D   x000D   lt body align center gt  x000D     lt input id  email  type  email  placeholder  yourfreind something somthing  gt  lt  input gt  lt br gt  lt br gt  x000D     lt input id  subject  placeholder  Subject  gt  lt  input gt  lt br gt  x000D     lt textarea id  message  placeholder  Message  gt  lt  textarea gt  lt br gt  x000D     lt button id  send  onclick  send    gt  lt img src https   www dropbox com s chxcszvnrdjh1zm send png dl 1 width 50px height 50px gt  lt  img gt  lt  button gt  x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D

User · Answer

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  amp  paste into your website  Here are some examples   Javascript    lt form id  javascript form  gt       lt input type  text  name  subject  placeholder  Subject    gt       lt textarea name  text  placeholder  Message  gt  lt  textarea gt       lt input type  submit  id  js send  value  Send    gt   lt  form gt    lt script gt         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 amp isError 0              function js onError error               remove this to avoid redirect         window location   window location pathname     message Email could not be sent  amp 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  amp  amp  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   amp                var js form   document getElementById form id js       js form addEventListener  submit   function  e            e preventDefault             lt  script gt    jQuery    lt form id  jquery form  gt       lt input type  text  name  subject  placeholder  Subject    gt       lt textarea name  text  placeholder  Message   gt  lt  textarea gt       lt input type  submit  name  send  value  Send    gt   lt  form gt    lt script gt         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 amp isError 0              function onError error               remove this to avoid redirect         window location   window location pathname     message Email could not be sent  amp 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             lt  script gt    Again  in full disclosure  I created this service because I could not find a suitable answer

User · Answer

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

User · Answer

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      amp from     from          strUrl      amp to     to          strUrl      amp subject     encodeURIComponent subject           strUrl      amp body     encodeURIComponent body           strUrl      amp 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  to domain com   from domain com   Sent   Worked

User · Answer

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

User · Answer

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  gt  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  lt  arrFileName length  i                                            alert arrFileName i                        p file   arrFileName i                       if  p file length  gt  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

User · Answer

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   john doe com   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

User · Answer

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   lt script src  https   smtpjs com v3 smtp js  gt  lt  script gt    2  You can either send an email like this   x000D   x000D  Email send   x000D      Host    smtp yourisp com   x000D      Username    username   x000D      Password    password   x000D      To    them website com   x000D      From    you isp com   x000D      Subject    This is the subject   x000D      Body    And this is the body  x000D         then  x000D        message   gt  alert message  x000D         x000D   x000D   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    x000D   x000D  Email send   x000D      SecureToken    C973D7AD-F097-4B95-91F4-40ABC5567812   x000D      To    them website com   x000D      From    you isp com   x000D      Subject    This is the subject   x000D      Body    And this is the body  x000D     then  x000D    message   gt  alert message  x000D     x000D   x000D   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

[javascript] How to send an email from JavaScript

Examples related to javascript

Examples related to email