How do I send email with JavaScript without opening the mail client?

Question

I'm writing a HTML page with a registration button that should just silently send an email without opening the local mail client. Here is my HTML:

<form method="post" action="">
    <input type="text" id="email_address" name="name" placeholder="Enter your email address..." required>
    <button onclick="sendMail(); return false">Send Email</button>
</form>

... and here is my JavaScript code:

<script type="text/javascript">
  function sendMail() {
    var link = 'mailto:[email protected]?subject=Message from '
             +document.getElementById('email_address').value
             +'&body='+document.getElementById('email_address').value;
    window.location.href = link;
}
</script>

The code above works... but it opens the local email client. If I remove the return statement in the onclick attribute like this:

<form method="post" action="">
    <input type="text" id="email_address" name="name" placeholder="Enter your email address..." required>
    <button onclick="sendMail()">Send Email</button>
</form>

... then the email is not sent at all. Am I missing something?

Any help would be reeeally appreciated :-)

Solution 1

You need a server-side support to achieve this. Basically your form should be posted (AJAX is fine as well) to the server and that server should connect via SMTP to some mail provider and send that e-mail.

Even if it was possible to send e-mails directly using JavaScript (that is from users computer), the user would still have to connect to some SMTP server (like gmail.com), provide SMTP credentials, etc. This is normally handled on the server-side (in your application), which knows these credentials.

Solution 2

You cannot cause the user's browser to send email silently. That would be a horrible security problem as any website could use their system as a spam relay and/or harvest their email address.

You need to make an HTTP request to a server side process (written in the language of your choice) which sends the mail from your server.

Solution 3

Directly From Client

---

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.

---

Indirect via Your Server - secure

---

To overcome the above vulnerability, you can modify your own server to send the email after session based authentication.

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

var 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){

    var _name = req.body.name;
    var _email = req.body.email;
    var _subject = req.body.subject;
    var _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.

Solution 4

You can't do it with client side script only... you could make an AJAX call to some server side code that will send an email...

Solution 5

I think you can use smtpjs.com

View more solutions

Comments

[SLaks]

You can only do that on the server.

[mikakun]

yes post the form to your server and have the mail sent by server

[Alfabravo]

To do what you say you want, you need to call a method in the server that receives the mail info and relies on a smtp server so send it from the server. Using that mailto won't do.

[cristi _b]

this is useful stackoverflow.com/questions/271171/…

[Yinda Yin]

@cristi_b: That one uses the local email client.

[cristi _b]

@RobertHarvey, i agree with your comment and posted answers below, i hope i wasn't misleading

[Vivek Kumar]

Possible duplicate of Sending emails with Javascript

[jahroy]

Since php runs on the server, using php isn't quite better than doing it on the server!

[Quentin]

PHP has no way to send email directly from the user's system. The email would be sent from the server. There is nothing special about this, any programming language could be used. PHP's primary advantage is that it is available on most cheap hosting.

[j3d]

That would be perfect since the server-side also hosts the mail server. Having said that, the idea would be to post the request using JavaScript and then have a script on the server side that actually sends the email with the local mail server. I'll look for an example on the Web...

[SK-the-Learner]

can we do it with standard JavaScript?

[rahulroy9202]

check this to avoid jQuery developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fet‌​ch