Sending emails with Javascript

Question

This is a little confusing to explain  so bear with me here     I want to set up a system where a user can send templated emails via my website  except it s not actually sent using my server - it instead just opens up their own local mail client with an email ready to go  The application would fill out the body of the email with predefined variables  to save the user having to type it themselves  They can then edit the message as desired  should it not exactly suit their purposes   There s a number of reasons I want it to go via the user s local mail client  so getting the server to send the email is not an option  it has to be 100  client-side   I already have a mostly-working solution running  and I ll post the details of that as an answer  I m wondering if there s any better way

User · Answer

You can use this free service  https   www smtpjs com   Include the script     lt script src  https   smtpjs com v2 smtp js  gt  lt  script gt    Send an email using     Email send     from you com      to them com      This is a subject      this is the body      smtp yourisp com      username      password

User · Answer

The way I m doing it now is basically like this  The HTML   lt textarea id  quot myText quot  gt      Lorem ipsum     lt  textarea gt   lt button onclick  quot sendMail    return false quot  gt Send lt  button gt   The Javascript  function sendMail         var link    quot mailto me example com quot                  quot  cc myCCaddress example com quot                  quot  amp subject  quot    encodeURIComponent  quot This is my subject quot                   quot  amp body  quot    encodeURIComponent document getElementById  myText   value                 window location href   link     This  surprisingly  works rather well  The only problem is that if the body is particularly long  somewhere over 2000 characters   then it just opens a new email but there s no information in it  I suspect that it d be to do with the maximum length of the URL being exceeded

User · Answer

You can add the following to the  lt head gt  of your HTML file   lt script src  quot https   smtpjs com v3 smtp js quot  gt  lt  script gt    lt script type  quot text javascript quot  gt      function sendEmail             Email send               SecureToken   quot security token of your smtp quot               To   quot someone gmail com quot               From   quot someone gmail com quot               Subject   quot Subject    quot               Body  document getElementById  text   value            then               message   gt  alert  quot mail sent successfully quot                     lt  script gt   and below is the HMTL part   lt textarea id  quot text quot  gt write text here    lt  textarea gt   lt input type  quot button quot  value  quot Send Email quot  onclick  quot sendEmail   quot  gt   So the sendEmail   function gets the inputs using   document getElementById  id of the element   value  For example  you can add another HTML element such as the subject  with id  quot subject quot      lt textarea id  quot subject quot  gt write text here    lt  textarea gt  and get its value in the sendEmail   function   Subject  document getElementById  subject   value  And you are done  Note  If you do not have a SMTP server you can create one for free here  And then encrypt your SMTP credentials here  the SecureToken attribute in sendEmail   corresponds to the encrypted credentials generated there

User · Answer

What about having a live validation on the textbox  and once it goes over 2000  or whatever the maximum threshold is  then display  This email is too long to be completed in the browser  please  lt span class  launchEmailClientLink  gt launch what you have in your email client lt  span gt    To which I d have   launchEmailClientLink   cursor  pointer  color   00F      and jQuery this into your onDomReady      launchEmailClientLink   bind  click  sendMail

User · Answer

You don t need any javascript  you just need your href to be coded like this    lt a href  mailto me me com  gt email me here  lt  a gt

User · Answer

You don t need any javascript  you just need your href to be coded like this    lt a href  mailto me me com  gt email me here  lt  a gt

User · Answer

Send request to mandrillapp com   var xhttp   new XMLHttpRequest    xhttp onreadystatechange   function         if  xhttp readyState    4  amp  amp  xhttp status    200            console log xhttp responseText           xhttp open  GET    https   mandrillapp com api 1 0 messages send json message from email  mail 7995 by amp message to  0  email  zdanevich vitaly yaa ru amp message subject         20  207995 by amp message html  xxxxxx amp key oxddROOvCpKCp6InvVDqiGw   true   xhttp send

User · Answer

Here s the way doing it using jQuery and an  element  to click on        element   click function          location  attr  href    mailto  subject                                  encodeURIComponent  This is my subject                                    amp body                                   encodeURIComponent  This is my body                Then  you can get your contents either by feeding it from input fields  ie  using     input1   val   or by a server side script with   get         Have fun

User · Answer

You don t need any javascript  you just need your href to be coded like this    lt a href  mailto me me com  gt email me here  lt  a gt

User · Answer

If this is just going to open up the user s client to send the email  why not let them compose it there as well   You lose the ability to track what they are sending  but if that s not important  then just collect the addresses and subject and pop up the client to let the user fill in the body

User · Answer

The problem with the very idea is that the user has to have an email client  which is not the case if he rely on webmails  which is the case for many users   at least there was no turn-around to redirect to this webmail when I investigated the issue a dozen years ago    That s why the normal solution is to rely on php mail   for sending emails  server-side  then    But if nowadays  email client  is always set  automatically  potentially to a webmail client  I ll be happy to know

User · Answer

Here s the way doing it using jQuery and an  element  to click on        element   click function          location  attr  href    mailto  subject                                  encodeURIComponent  This is my subject                                    amp body                                   encodeURIComponent  This is my body                Then  you can get your contents either by feeding it from input fields  ie  using     input1   val   or by a server side script with   get         Have fun

User · Answer

The way I m doing it now is basically like this  The HTML   lt textarea id  quot myText quot  gt      Lorem ipsum     lt  textarea gt   lt button onclick  quot sendMail    return false quot  gt Send lt  button gt   The Javascript  function sendMail         var link    quot mailto me example com quot                  quot  cc myCCaddress example com quot                  quot  amp subject  quot    encodeURIComponent  quot This is my subject quot                   quot  amp body  quot    encodeURIComponent document getElementById  myText   value                 window location href   link     This  surprisingly  works rather well  The only problem is that if the body is particularly long  somewhere over 2000 characters   then it just opens a new email but there s no information in it  I suspect that it d be to do with the maximum length of the URL being exceeded

User · Answer

What about having a live validation on the textbox  and once it goes over 2000  or whatever the maximum threshold is  then display  This email is too long to be completed in the browser  please  lt span class  launchEmailClientLink  gt launch what you have in your email client lt  span gt    To which I d have   launchEmailClientLink   cursor  pointer  color   00F      and jQuery this into your onDomReady      launchEmailClientLink   bind  click  sendMail

User · Answer

The way I m doing it now is basically like this  The HTML   lt textarea id  quot myText quot  gt      Lorem ipsum     lt  textarea gt   lt button onclick  quot sendMail    return false quot  gt Send lt  button gt   The Javascript  function sendMail         var link    quot mailto me example com quot                  quot  cc myCCaddress example com quot                  quot  amp subject  quot    encodeURIComponent  quot This is my subject quot                   quot  amp body  quot    encodeURIComponent document getElementById  myText   value                 window location href   link     This  surprisingly  works rather well  The only problem is that if the body is particularly long  somewhere over 2000 characters   then it just opens a new email but there s no information in it  I suspect that it d be to do with the maximum length of the URL being exceeded

User · Answer

You don t need any javascript  you just need your href to be coded like this    lt a href  mailto me me com  gt email me here  lt  a gt

User · Answer

The way I m doing it now is basically like this  The HTML   lt textarea id  quot myText quot  gt      Lorem ipsum     lt  textarea gt   lt button onclick  quot sendMail    return false quot  gt Send lt  button gt   The Javascript  function sendMail         var link    quot mailto me example com quot                  quot  cc myCCaddress example com quot                  quot  amp subject  quot    encodeURIComponent  quot This is my subject quot                   quot  amp body  quot    encodeURIComponent document getElementById  myText   value                 window location href   link     This  surprisingly  works rather well  The only problem is that if the body is particularly long  somewhere over 2000 characters   then it just opens a new email but there s no information in it  I suspect that it d be to do with the maximum length of the URL being exceeded

User · Answer

If this is just going to open up the user s client to send the email  why not let them compose it there as well   You lose the ability to track what they are sending  but if that s not important  then just collect the addresses and subject and pop up the client to let the user fill in the body

User · Answer

What about having a live validation on the textbox  and once it goes over 2000  or whatever the maximum threshold is  then display  This email is too long to be completed in the browser  please  lt span class  launchEmailClientLink  gt launch what you have in your email client lt  span gt    To which I d have   launchEmailClientLink   cursor  pointer  color   00F      and jQuery this into your onDomReady      launchEmailClientLink   bind  click  sendMail

User · Answer

The problem with the very idea is that the user has to have an email client  which is not the case if he rely on webmails  which is the case for many users   at least there was no turn-around to redirect to this webmail when I investigated the issue a dozen years ago    That s why the normal solution is to rely on php mail   for sending emails  server-side  then    But if nowadays  email client  is always set  automatically  potentially to a webmail client  I ll be happy to know

User · Answer

What about having a live validation on the textbox  and once it goes over 2000  or whatever the maximum threshold is  then display  This email is too long to be completed in the browser  please  lt span class  launchEmailClientLink  gt launch what you have in your email client lt  span gt    To which I d have   launchEmailClientLink   cursor  pointer  color   00F      and jQuery this into your onDomReady      launchEmailClientLink   bind  click  sendMail

User · Answer

You can use this free service  https   www smtpjs com   Include the script     lt script src  https   smtpjs com v2 smtp js  gt  lt  script gt    Send an email using     Email send     from you com      to them com      This is a subject      this is the body      smtp yourisp com      username      password

User · Answer

You can add the following to the  lt head gt  of your HTML file   lt script src  quot https   smtpjs com v3 smtp js quot  gt  lt  script gt    lt script type  quot text javascript quot  gt      function sendEmail             Email send               SecureToken   quot security token of your smtp quot               To   quot someone gmail com quot               From   quot someone gmail com quot               Subject   quot Subject    quot               Body  document getElementById  text   value            then               message   gt  alert  quot mail sent successfully quot                     lt  script gt   and below is the HMTL part   lt textarea id  quot text quot  gt write text here    lt  textarea gt   lt input type  quot button quot  value  quot Send Email quot  onclick  quot sendEmail   quot  gt   So the sendEmail   function gets the inputs using   document getElementById  id of the element   value  For example  you can add another HTML element such as the subject  with id  quot subject quot      lt textarea id  quot subject quot  gt write text here    lt  textarea gt  and get its value in the sendEmail   function   Subject  document getElementById  subject   value  And you are done  Note  If you do not have a SMTP server you can create one for free here  And then encrypt your SMTP credentials here  the SecureToken attribute in sendEmail   corresponds to the encrypted credentials generated there

User · Answer

If this is just going to open up the user s client to send the email  why not let them compose it there as well   You lose the ability to track what they are sending  but if that s not important  then just collect the addresses and subject and pop up the client to let the user fill in the body

User · Answer

Send request to mandrillapp com   var xhttp   new XMLHttpRequest    xhttp onreadystatechange   function         if  xhttp readyState    4  amp  amp  xhttp status    200            console log xhttp responseText           xhttp open  GET    https   mandrillapp com api 1 0 messages send json message from email  mail 7995 by amp message to  0  email  zdanevich vitaly yaa ru amp message subject         20  207995 by amp message html  xxxxxx amp key oxddROOvCpKCp6InvVDqiGw   true   xhttp send

User · Answer

If this is just going to open up the user s client to send the email  why not let them compose it there as well   You lose the ability to track what they are sending  but if that s not important  then just collect the addresses and subject and pop up the client to let the user fill in the body

[javascript] Sending emails with Javascript

Examples related to javascript

Examples related to email

Examples related to client-side