如何将表单字段值插入到JavaScript通过smtp.js生成的邮件正文中

解决方法 #

你只需要在发信函数中先读取表单输入框的值，再将值拼接到邮件正文参数即可，具体修改如下：

1. 在sendEmail函数开头读取输入框的内容，后续如果要新增数字输入框，按照相同逻辑读取对应输入框的值即可
2. 拼接动态内容作为Body参数的值，推荐使用ES6模板字符串语法，拼接变量更简洁

修改后的完整代码如下：

<!DOCTYPE html>
<html>
<head>
<title>Send Mail</title>
<script src="https://smtpjs.com/v3/smtp.js"></script>
<script type="text/javascript">
function sendEmail() {
  // 读取表单中填写的邮箱值
  const inputEmail = document.querySelector('input[name="email"]').value;
  // 若后续添加数字输入框，取消下一行注释并替换为实际的输入框name属性值
  // const inputNumber = document.querySelector('input[name="number_input"]').value;
  
  Email.send({
    Host: "smtp.gmail.com",
    Username: "sender@email_address.com",
    Password: "Enter your password",
    To: 'receiver@email_address.com',
    From: "sender@email_address.com",
    Subject: "Sending Email using javascript",
    // 拼接输入值到邮件正文，\n是换行符
    Body: `用户提交的邮箱：${inputEmail}\nWell that was easy!!`,
    // 带数字输入框的正文写法：
    // Body: `用户提交的邮箱：${inputEmail}\n用户提交的数字：${inputNumber}\nWell that was easy!!`,
  }).then(function (message) {
    alert("mail sent successfully")
  });
}
</script>
</head>
<body>
<form method="post">
E-Mail: <input class="input2" type="text" name="email">
<br>
<!-- 数字输入框示例，需要时取消注释 -->
<!-- 数字：<input class="input2" type="number" name="number_input">
<br> -->
<input type="button" value="Send Email" onclick="sendEmail()" />
</form>
</body>
</html>

注意：直接在前端代码中写死邮箱账号密码有极高的安全风险，所有访问页面的用户都可以通过查看页面源码获取你的邮箱登录凭据，该方案仅适合本地测试使用，正式上线请将发信逻辑迁移到后端实现。

内容的提问来源于stack exchange，提问作者Stajl