Come inviare una email da JavaScript


Answers

Indiretto tramite il server - Chiamata API di terze parti: sicura e consigliata

Il tuo server può chiamare l'API di terze parti dopo una corretta autenticazione e autorizzazione. Le chiavi API non sono esposte 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: '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){

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

});

quindi utilizzare $ .ajax sul client per chiamare l'API di posta elettronica.

Direttamente dal client - Chiamata API di terze parti - non consigliato

Invia un'email usando solo JavaScript

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

Come questo -

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: tieni presente che la tua chiave API è visibile a tutti, quindi qualsiasi utente malintenzionato può utilizzare la tua chiave per inviare e-mail che possono consumare la tua quota.

Question

Desidero che il mio sito Web abbia la possibilità di inviare un'email senza aggiornare la pagina. Quindi voglio usare 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" />

Ecco come voglio chiamare la funzione, ma non sono sicuro di cosa mettere nella funzione javascript. Dalla ricerca che ho fatto ho trovato un esempio che utilizza il metodo mailto, ma la mia comprensione è che in realtà non invia direttamente dal sito.

Quindi la mia domanda è dove posso trovare cosa mettere dentro la funzione JavaScript per inviare una mail direttamente dal sito.

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



Nella tua funzione sendMail() , aggiungi una chiamata sendMail() al tuo back-end, dove puoi implementarla sul lato server.




Non c'è una risposta diretta alla tua domanda dato che non possiamo inviare email solo usando javascript, ma ci sono modi per usare javascript per inviare email per noi:

1) utilizzando un'API e chiama l'API tramite javascript per inviare l'e-mail per noi, ad esempio https://www.emailjs.com dice che è possibile utilizzare tale codice qui sotto per chiamare la propria API dopo alcune impostazioni:

var service_id = 'my_mandrill';
var template_id = 'feedback';
var template_params = {
name: 'John',
reply_email: 'john@doe.com',
message: 'This is awesome!'
};

emailjs.send(service_id,template_id,template_params);

2) creare un codice di backend per inviare una email per te, puoi usare qualsiasi framework di backend per farlo per te.

3) usando qualcosa come:

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

che aprirà la tua applicazione di posta elettronica, questo potrebbe entrare nel popup bloccato del tuo browser.

In generale, l'invio di una e-mail è un'attività server, quindi dovrebbe essere fatto in lingue di backend, ma possiamo usare javascript per raccogliere i dati necessari e inviarli al server o api, inoltre possiamo usare l'applicazione di terza parità e aprirli tramite il browser utilizzando javascript come accennato in precedenza.




Non sono riuscito a trovare una risposta che soddisfacesse veramente la domanda originale.

  • Mandrill non è auspicabile a causa della sua nuova politica dei prezzi, oltre a richiedere un servizio di back-end se si desidera mantenere le proprie credenziali al sicuro.
  • Spesso è preferibile nascondere la tua e-mail in modo da non finire su nessun elenco (la soluzione mailto espone questo problema e non è conveniente per la maggior parte degli utenti).
  • È una seccatura per configurare sendMail o richiedere un back-end solo per inviare un'e-mail.

Ho creato un semplice servizio gratuito che consente di effettuare una richiesta POST HTTP standard per inviare un'email. Si chiama PostMail e puoi semplicemente pubblicare un modulo, utilizzare Javascript o jQuery. Quando ti iscrivi, ti fornisce un codice che puoi copiare e incollare nel tuo sito web. Ecco alcuni esempi:

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>

Di nuovo, in piena divulgazione, ho creato questo servizio perché non sono riuscito a trovare una risposta adeguata.




function send() {
  setTimeout(function() {
    window.open("mailto:" + document.getElementById('email').value + "?subject=" + document.getElementById('subject').value + "&body=" + document.getElementById('message').value);
  }, 320);
}
input {
  text-align: center;
  border-top: none;
  border-right: none;
  border-left: none;
  height: 10vw;
  font-size: 2vw;
  width: 100vw;
}

textarea {
  text-align: center;
  border-top: none;
  border-right: none;
  border-left: none;
  border-radius: 5px;
  width: 100vw;
  height: 50vh;
  font-size: 2vw;
}

button {
  border: none;
  background-color: white;
  position: fixed;
  right: 5px;
  top: 5px;
  transition: transform .5s;
}

input:focus {
  outline: none;
  color: orange;
  border-radius: 3px;
}

textarea:focus {
  outline: none;
  color: orange;
  border-radius: 7px;
}

button:focus {
  outline: none;
  transform: scale(0);
  transform: rotate(360deg);
}
<!DOCTYPE html>
<html>

<head>
  <title>Send Email</title>
</head>

<body align=center>
  <input id="email" type="email" placeholder="yourfreind@something.somthing"></input><br><br>
  <input id="subject" placeholder="Subject"></input><br>
  <textarea id="message" placeholder="Message"></textarea><br>
  <button id="send" onclick="send()"><img src=https://www.dropbox.com/s/chxcszvnrdjh1zm/send.png?dl=1 width=50px height=50px></img></button>
</body>

</html>




C'è un servizio combinato. È possibile combinare le soluzioni sopra elencate come mandrill con un servizio EmailJS, che può rendere il sistema più sicuro. Non hanno ancora iniziato il servizio però.




Javascript è lato client, non puoi inviare email con Javascript. Il browser riconosce forse solo mailto: e avvia il tuo client di posta predefinito.




Poiché queste sono tutte informazioni meravigliose c'è una piccola api chiamata Mandrill per inviare mail da javascript e funziona perfettamente. Puoi dare un colpo. Ecco un piccolo tutorial per l'inizio.




Sembra esserci una nuova soluzione all'orizzonte. Si chiama EmailJS . Sostengono che non è necessario alcun codice server. Puoi richiedere un invito.

Aggiornamento agosto 2016: EmailJS sembra essere già in diretta. È possibile inviare gratuitamente fino a 200 e-mail al mese e offre abbonamenti per volumi più elevati.




Related