Cómo enviar un correo electrónico desde JavaScript

Quiero que mi sitio web tenga la capacidad de enviar un correo electrónico sin actualizar la página. Entonces quiero usar 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" />

Así es como quiero llamar a la función, pero no estoy seguro de qué poner en la función javascript. De la investigación que hice, encontré un ejemplo que usa el método mailto, pero entiendo que en realidad no se envía directamente desde el sitio.

Entonces, mi pregunta es dónde puedo encontrar qué poner dentro de la función de JavaScript para enviar un correo electrónico directamente desde el sitio web.

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

No puede enviar un correo electrónico directamente con javascript.

Sin embargo, puede abrir el cliente de correo del usuario:

window.open('mailto:test@example.com');

También hay algunos parámetros para rellenar previamente el asunto y el cuerpo:

window.open('mailto:test@example.com?subject=subject&body=body');

Otra solución sería hacer una llamada ajax a su servidor, para que el servidor envíe el correo electrónico. Tenga cuidado de no permitir que nadie envíe ningún correo electrónico a través de su servidor.

Indirecto a través de su servidor: llamada a la API de terceros: seguro y recomendado

Su servidor puede llamar a la API de terceros después de la autenticación y autorización adecuadas. Las claves API no están expuestas al cliente.

nodo.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: '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 );

});

y luego use use $ .ajax en el cliente para llamar a su API de correo electrónico.

Directamente desde el cliente – Llamar a la API de terceros – no recomendado

Enviar un correo electrónico usando solo JavaScript

en breve:

1. regístrese en Mandrill para obtener una clave API
2. cargar jQuery
3. use $.ajax para enviar un correo electrónico

Me gusta esto –

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

Nota: Tenga en cuenta que su clave API es visible para cualquier persona, por lo que cualquier usuario malintencionado puede usar su clave para enviar correos electrónicos que pueden consumir su cuota.

No pude encontrar una respuesta que realmente satisficiera la pregunta original.

• Mandrill no es deseable debido a su nueva política de precios, además de que requería un servicio de back-end si deseaba mantener sus credenciales seguras.
• A menudo es preferible ocultar su correo electrónico para que no termine en ninguna lista (la solución mailto expone este problema y no es conveniente para la mayoría de los usuarios).
• Es una molestia configurar sendMail o requerir un backend solo para enviar un correo electrónico.

Preparé un servicio gratuito simple que le permite realizar una solicitud HTTP POST estándar para enviar un correo electrónico. Se llama Correo postal, y simplemente puede publicar un formulario, usar JavaScript o jQuery. Cuando te registras, te proporciona un código que puedes copiar y pegar en tu sitio web. Aquí hay unos ejemplos:

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>

Nuevamente, en total divulgación, creé este servicio porque no pude encontrar una respuesta adecuada.

Sé que llegué demasiado tarde para escribir una respuesta a esta pregunta, pero creo que esto será útil para cualquiera que esté pensando en enviar correos electrónicos a través de javascript.

La primera forma en que sugeriría es usar una devolución de llamada para hacer esto en el servidor. Si realmente desea que se maneje usando javascript, lo que recomiendo es lo siguiente.

La forma más fácil que encontré fue usando smtpJs. Una biblioteca gratuita que se puede utilizar para enviar correos electrónicos.

1.Incluya el guión como a continuación

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

2. Puedes enviar un correo electrónico como este

Email.send({
    Host : "smtp.yourisp.com",
    Username : "username",
    Password : "password",
    To : 'them@website.com',
    From : "you@isp.com",
    Subject : "This is the subject",
    Body : "And this is the body"
    }).then(
      message => alert(message)
    );

Lo cual no es aconsejable ya que mostrará su contraseña en el lado del cliente. Por lo tanto, puede hacer lo siguiente que cifra sus credenciales SMTP y bloquearlas en un solo dominio, y pasar un token seguro en lugar de las credenciales.

Email.send({
    SecureToken : "C973D7AD-F097-4B95-91F4-40ABC5567812",
    To : 'them@website.com',
    From : "you@isp.com",
    Subject : "This is the subject",
    Body : "And this is the body"
}).then(
  message => alert(message)
);

Finalmente, si no tiene un servidor SMTP, use un servicio de retransmisión smtp como Correo electrónico elástico

También aquí está el enlace al oficial. Sitio web SMTPJS.com donde puede encontrar todos los ejemplos que necesita y el lugar donde puede crear su token seguro.

Espero que alguien encuentre estos detalles útiles. Codificación feliz.

Puede encontrar qué poner dentro de la función de JavaScript en esta publicación.

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));
     }
}

Proporcione su propia secuencia de comandos PHP (o cualquier idioma) para enviar el correo electrónico.

Te estoy dando la noticia. NO PUEDE enviar un correo electrónico con JavaScript per se.

Según el contexto de la pregunta del OP, mi respuesta anterior ya no es cierta, como lo señaló @KennyEvitt en los comentarios. Parece que puedes usar JavaScript como cliente SMTP.

Sin embargo, no he investigado más a fondo para averiguar si es lo suficientemente seguro y compatible con varios navegadores. Por lo tanto, no puedo animarte ni desanimarte para que lo uses. Úselo bajo su propio riesgo.

Parece haber una nueva solución en el horizonte. Se llama Correo electrónicoJS. Afirman que no se necesita ningún código de servidor. Puedes solicitar una invitación.

Actualización de agosto de 2016: parece que EmailJS ya está activo. Puede enviar hasta 200 correos electrónicos por mes de forma gratuita y ofrece suscripciones para volúmenes más altos.