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 de JavaScript. De la investigación que hice encontré un ejemplo que utiliza el método mailto, pero tengo entendido 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 JavaScript para enviar un correo electrónico directamente desde el sitio web?
function sendMail() {
/* ...code here... */
}
No puedes enviar un correo electrónico directamente con javascript.
Sin embargo, puedes abrir el cliente de correo del usuario:
window.open('mailto:[email protected]');
También hay algunos parámetros para completar previamente el asunto 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: llamada a API de terceros: seguro y recomendado
Su servidor puede llamar a la API de terceros. Las claves API no están expuestas al cliente.
nodo.js
const axios = require('axios');
async function sendEmail(name, email, subject, message) {
const data = JSON.stringify({
"Messages": [{
"From": {"Email": "<YOUR EMAIL>", "Name": "<YOUR NAME>"},
"To": [{"Email": email, "Name": name}],
"Subject": subject,
"TextPart": message
}]
});
const config = {
method: 'post',
url: 'https://api.mailjet.com/v3.1/send',
data: data,
headers: {'Content-Type': 'application/json'},
auth: {username: '<API Key>', password: '<Secret Key>'},
};
return axios(config)
.then(function (response) {
console.log(JSON.stringify(response.data));
})
.catch(function (error) {
console.log(error);
});
}
// define your own email api which points to your server.
app.post('/api/sendemail/', function (req, res) {
const {name, email, subject, message} = req.body;
//implement your spam protection or checks.
sendEmail(name, email, subject, message);
});
y luego use fetch en el lado del cliente para llamar a su API de correo electrónico. Uso from emailque utilizaste para registrarte en Mailjet. También puedes autenticar más direcciones. Mailjet ofrece un generoso nivel gratuito .
Actualización 2023: como se señala en los comentarios, el método siguiente ya no funciona debido a CORS
Esto sólo puede ser útil si desea probar el envío de correo electrónico y hacerlo
- visite https://api.mailjet.com/stats (sí, una página 404)
- y ejecute este código en la consola del navegador (con los secretos completos)
Directamente desde el cliente - Llamada a API de terceros - no recomendado
en breve:
- regístrese en Mailjet para obtener una clave API y un secreto
- use buscar para llamar a la API para enviar un correo electrónico
Como esto -
function sendMail(name, email, subject, message) {
const myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");
myHeaders.set('Authorization', 'Basic ' + btoa('<API Key>'+":" +'<Secret Key>'));
const data = JSON.stringify({
"Messages": [{
"From": {"Email": "<YOUR EMAIL>", "Name": "<YOUR NAME>"},
"To": [{"Email": email, "Name": name}],
"Subject": subject,
"TextPart": message
}]
});
const requestOptions = {
method: 'POST',
headers: myHeaders,
body: data,
};
fetch("https://api.mailjet.com/v3.1/send", requestOptions)
.then(response => response.text())
.then(result => console.log(result))
.catch(error => console.log('error', error));
}
sendMail('Test Name',"<YOUR EMAIL>",'Test Subject','Test Message')
Nota: Tenga en cuenta que su clave API es visible para cualquiera, 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 requería un servicio backend si quería mantener sus credenciales seguras.
- A menudo es preferible ocultar su correo electrónico para no terminar en ninguna lista (la solución mailto expone este problema y no es conveniente para la mayoría de los usuarios).
- Es complicado configurar sendMail o requerir un backend solo 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 puedes simplemente 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, con total divulgación, creé este servicio porque no pude encontrar una respuesta adecuada.
