Cómo enviar un correo electrónico desde JavaScript

13 minutos de lectura

Como enviar un correo electronico desde JavaScript
usuario906357

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...    */
}

  • Use el lenguaje del lado del servidor para enviar el correo electrónico y AJAX para tener la apariencia que desea.

    – Shadow Wizard dice que no más guerras

    11/09/2011 a las 20:56

  • Esto puede ser un poco tarde, pero esto podría ayudarlo: stackoverflow.com/questions/271171/…

    – Patrick Melia

    17 de noviembre de 2013 a las 15:13

  • Los usuarios de Gmail pueden tenerlo, ver desarrolladores.google.com/gmail/api

    – Denis S.

    10 de agosto de 2016 a las 15:43

  • Como se menciona a continuación, es posible que también desee echar un vistazo a Correo electrónicoJS, que permite enviar correos electrónicos utilizando plantillas prediseñadas directamente desde Javascript, y también admite parámetros dinámicos, archivos adjuntos, captcha, REST API y más. También ofrecemos un nivel gratuito para comenzar [disclosure – I’m one of the creators]

    – Sasha

    28 de diciembre de 2017 a las 9:30


  • Tenga en cuenta que si usa la respuesta aceptada, el correo electrónico provendrá de la cuenta del usuario. Para enviar un correo electrónico desde su cuenta personal o comercial, la forma correcta es usar javascript para enviar correo electrónico a través de su propio servidor o un servicio de terceros como línea de bytes. Más detalles en esta respuesta a continuación.

    – dsbajna

    29 de abril de 2020 a las 9:32

Como enviar un correo electronico desde JavaScript
Arnaud LeBlanc

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.

  • Si el programa que abre la página ya tiene funciones de cliente de correo electrónico (como Opera 12.50), abre el enlace como una URL normal. También está Thunderbird, que tiene el motor gecko de firefox: puede abrir páginas web desde hipervínculos en correos electrónicos como nuevas pestañas.

    – usuario2284570

    9 de noviembre de 2013 a las 20:02

  • Solo una nota, también puedes usar window.location.href (como en esta respuesta: stackoverflow.com/questions/271171/…) para abrir el cliente de correo electrónico y no deja esa ventana vacía cuando el usuario ha terminado con el correo electrónico.

    – igneosaurio

    19 de noviembre de 2014 a las 12:51


  • Están subject y body variables o son el texto real que estará en los campos?

    –Edward Karak

    27 de noviembre de 2014 a las 17:46

  • esa respuesta de hecho no responde la pregunta, pero la respuesta de @rahulroy es buena

    – Medet Tleukabiluly

    2 de julio de 2015 a las 8:25


  • Yo daría un paso más y haría window.open( String( 'mailto:recipient^example.com' ).replace('^', '@') ); para confundir a los robots de spam

    – Pavel

    22 de noviembre de 2017 a las 14:52


Como enviar un correo electronico desde JavaScript
raulroy9202

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.jshttps://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.

  • aunque el artículo dice esto, creo que también debería decirse aquí que, aunque esto funcionará, existen algunos problemas de seguridad, ya que también debe enviar su clave de API al cliente. esto podría ser abusado.

    – cantdutchthis

    28 de enero de 2014 a las 9:51

1646974819 633 Como enviar un correo electronico desde JavaScript
usuario949286

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.

  • Estaba buscando esta solución, gracias por la respuesta, pero me pregunto cómo puedo agregar un cuadro de texto más en el formulario html, porque cada vez que intento cambiar el código para agregar un cuadro de texto más para alguna otra información, el código se detiene trabajando. ¿Conoces alguna solución para esto?

    – Sunil

    2 de julio de 2016 a las 23:15

  • Esta es la mejor solución. Muchas gracias. Mandrill ya no tiene un plan gratuito y mailgun no admite cors y, por lo tanto, JavaScript

    – estancamientoUno

    25 de enero de 2017 a las 13:09


  • ¿No tiene este el mismo problema que otros? El token de acceso (clave API) está expuesto

    –Greg Ennis

    1 de marzo de 2017 a las 13:01

  • Tienen un límite diario de 25 correos electrónicos por día.

    – Archi

    06/03/2017 a las 18:23

  • Debería estar de vuelta ahora. ¡Lo siento por eso!

    – usuario949286

    25 de junio de 2021 a las 22:31

1646974820 342 Como enviar un correo electronico desde JavaScript
Pissu Pusa

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.

1646974822 113 Como enviar un correo electronico desde JavaScript
Ry-

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.

1646974823 259 Como enviar un correo electronico desde JavaScript
Tofandel

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.

  • Esta es una dirección un poco vaga, una interfaz de usuario muy bonita, pero incluye todos los ejemplos de documentación o ayuda. Evitar.

    – Skarsnik

    2 de marzo de 2016 a las 10:52

  • Probé emailJS, pero solo envía a mi correo electrónico. ¿Cómo puedo enviar a cualquier otro correo electrónico?

    – Maged Saeed

    5 de abril de 2018 a las 0:37

  • Esto es tarde, pero @MagedSaeed en la sección de plantillas de correo electrónico, al editar una plantilla, puede especificar el correo electrónico “Para”. Incluso puede hacer que el campo “Para” sea dinámico usando su opción de plantilla. Sus documentos hacen un buen trabajo al detallarlo.

    – abagh0703

    16 de febrero de 2019 a las 16:58

  • Acabo de integrar EmailJS en mi aplicación React. Funciona muy bien y fue bastante fácil de instalar. Los correos electrónicos se envían directamente a mi correo electrónico deseado. Asegúrate de agregar reCAPTCHA. ¡Gracias por esto!

    – ariella

    31 de agosto de 2021 a las 21:22

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad