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" />

Aquí es cómo quiero llamar a la función, pero no estoy seguro de qué poner en la función de 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:[email protected]');

También hay algunos parámetros para completar previamente el tema y el cuerpo:

window.open('mailto:[email protected]?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 - Llamar a API de terceros - seguro y recomendado

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

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

});

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

Directamente desde el cliente - Llamar a API de terceros - no recomendado

Enviar un correo electrónico usando solo JavaScript

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

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': '[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

Nota: Tenga en cuenta que su clave de 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 requiere un servicio de back-end si desea 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 back-end para enviar un correo electrónico.

Creé un servicio gratuito simple que le permite realizar una solicitud HTTP POST estándar para enviar un correo electrónico. Se llama PostMail , 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.

Puedes 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 propio script 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.

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

Sin embargo , no he profundizado más para descubrir si es lo suficientemente seguro y compatible con todos los navegadores. Por lo tanto, no puedo alentarlo ni desalentarlo para que lo use. Úselo bajo su propio riesgo.

Sé que estoy muy 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 con JavaScript, lo que recomiendo es lo siguiente.

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

1.Incluye el script como se muestra 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 : '[email protected]',
    From : "[email protected]",
    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. De este modo, puede hacer lo siguiente para cifrar sus credenciales SMTP, bloquearlas en un solo dominio y pasar un token seguro en lugar de las credenciales.

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

Finalmente, si no tiene un servidor SMTP, utiliza un servicio de retransmisión smtp como Elastic Email

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

Espero que alguien encuentre útiles estos detalles. Feliz codificación

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

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

window.open ('mailto: [email protected]'); como arriba no hace nada para ocultar que la dirección de correo electrónico "[email protected]" sea recolectada por los robots de spam. Solía ​​encontrarme constantemente con este problema.

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

Javascript es del lado del cliente, no puede enviar correos electrónicos con Javascript. El navegador solo reconoce mailto:e inicia su cliente de correo predeterminado.

En su sendMail()función, agregue una llamada ajax a su backend, donde puede implementar esto en el lado del servidor.

JavaScript no puede enviar correos electrónicos desde un navegador web. Sin embargo, al alejarse de la solución que ya intentó implementar, puede hacer algo que cumpla con el requisito original:

enviar un correo electrónico sin actualizar la página

Puede usar JavaScript para construir los valores que necesitará el correo electrónico y luego realizar una solicitud AJAX a un recurso del servidor que realmente envía el correo electrónico. (No sé qué idiomas / tecnologías del lado del servidor está utilizando, por lo que esa parte depende de usted).

Si no está familiarizado con AJAX, una búsqueda rápida en Google le dará mucha información. En general, puede ponerlo en funcionamiento rápidamente con la función $ .ajax () de jQuery. Solo necesita tener una página en el servidor a la que se pueda llamar en la solicitud.

Parece que una 'respuesta' a esto es implementar un cliente SMPT. Consulte email.js para obtener una biblioteca de JavaScript con un cliente SMTP.

Aquí está el repositorio de GitHub para el cliente SMTP. Basado en el README del repositorio, parece que se pueden requerir varias cuñas o polyfills dependiendo del navegador del cliente, pero en general parece factible (si no se logra de manera significativa), aunque no de una manera que pueda describirse fácilmente incluso de manera razonable. larga respuesta aquí.

Hay un servicio combinado. Puede combinar las soluciones mencionadas anteriormente como mandril con un servicio EmailJS, que puede hacer que el sistema sea más seguro. Sin embargo, aún no han comenzado el servicio.

Otra forma de enviar correos electrónicos desde JavaScript es usar directtomx.com de la siguiente manera;

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

Luego llámelo desde su página de la siguiente manera;

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

Lo haría con la biblioteca SMTPJs . Ofrece cifrado a sus credenciales, como nombre de usuario, contraseña, etc.

No hay una respuesta directa a su pregunta, ya que no podemos enviar correos electrónicos solo usando javascript, pero hay formas de usar javascript para enviarnos correos electrónicos:

1) usando una API y llame a la API a través de JavaScript para enviarnos el correo electrónico, por ejemplo https://www.emailjs.com dice que puede usar el código que se encuentra a continuación para llamar a su API después de alguna configuración:

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) cree un código de back-end para enviarle un correo electrónico, puede usar cualquier marco de back-end para hacerlo por usted.

3) usando algo como:

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

que abrirá su aplicación de correo electrónico, esto podría entrar en una ventana emergente bloqueada en su navegador.

En general, enviar un correo electrónico es una tarea del servidor, por lo que debe hacerse en idiomas de back-end, pero podemos usar JavaScript para recopilar los datos que se necesitan y enviarlos al servidor o la API, también podemos usar la aplicación de terceros y abrirlos. a través del navegador usando JavaScript como se mencionó anteriormente.

La respuesta corta es que no puedes hacerlo usando JavaScript solo. Necesitaría un controlador del lado del servidor para conectarse con el servidor SMTP para enviar el correo. Hay muchos scripts de correo simples en línea, como este para PHP:

Use Ajax para enviar una solicitud al script PHP, verifique que el campo requerido no esté vacío o sea incorrecto usando js también mantenga un registro de correo enviado por quién desde su servidor.

function sendMail() is good for doing that.

Compruebe si hay algún error detectado durante el envío de su secuencia de comandos y tome las medidas adecuadas.
Para resolverlo, por ejemplo, si la dirección de correo es incorrecta o si el correo no se envía debido a un problema del servidor o está en la cola en tales condiciones, informe al usuario de inmediato y evite el envío múltiple del mismo correo electrónico una y otra vez. Obtenga respuesta de su script usando jQuery GET y POST

$ .get (URL, devolución de llamada); $ .post (URL, devolución de llamada);

Como todos estos son información maravillosa, hay una pequeña API llamada Mandrill para enviar correos electrónicos desde JavaScript y funciona perfectamente. Puedes darle una oportunidad. Aquí hay un pequeño tutorial para comenzar.

Enviar un correo electrónico utilizando JavaScript o 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.');
        }
    }
  }