如何仅用JavaScript实现表单数据提交至指定邮箱？

浏览器端JavaScript无法直接通过SMTP协议发送邮件（因为没有服务器权限），但可以通过以下两种纯JS方案实现需求：

方案一：使用mailto:链接（依赖用户邮箱客户端） #

这种方案无需第三方服务，直接调用用户本地的邮箱客户端完成发送，适合快速测试。

修改后的HTML表单 #

<form id="contactForm">
  <label for="name">Name</label><br>
  <input type="text" name="name" id="name" placeholder="Your name"><br>
  <label for="email">Email</label><br>
  <input type="email" name="email" id="email" placeholder="Your email"><br>
  <label for="password">Password</label><br>
  <input type="password" name="password" id="password" placeholder="Your password"><br>
  <label for="feedback">Feedback</label><br>
  <textarea name="feedback" id="feedback" cols="30" rows="10" placeholder="Your feedback"></textarea><br>
  <button type="submit">Send</button>
</form>
<script src="./form.js"></script>

form.js代码 #

document.getElementById('contactForm').addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止表单默认提交行为

  // 收集表单数据
  const name = document.getElementById('name').value.trim();
  const email = document.getElementById('email').value.trim();
  const password = document.getElementById('password').value.trim();
  const feedback = document.getElementById('feedback').value.trim();

  // 构造邮件主题和内容（URL编码避免乱码）
  const subject = encodeURIComponent('用户提交的表单数据');
  const body = encodeURIComponent(`
姓名: ${name}
用户邮箱: ${email}
密码: ${password}
反馈内容: ${feedback}
  `);

  // 替换成你的目标邮箱地址
  const mailtoUrl = `mailto:your-target-email@example.com?subject=${subject}&body=${body}`;

  // 打开用户邮箱客户端
  window.location.href = mailtoUrl;
});

注意：

• 该方案需要用户本地安装并配置了邮箱客户端（如Outlook、Foxmail或Gmail桌面端）
• 用户需要手动在邮箱客户端中点击「发送」按钮，无法自动完成提交
• 密码会以明文形式出现在邮件内容和链接中，存在安全风险，实际项目中不建议收集并通过邮件传输密码

方案二：使用EmailJS（纯前端邮件服务，更可靠） #

EmailJS提供了纯前端调用的邮件发送API，无需后端代码，只需注册账号并配置邮件服务即可。

步骤1：准备工作 #

1. 注册EmailJS账号，创建一个邮件服务（如绑定你的Gmail/Outlook邮箱）
2. 创建邮件模板，设置好表单数据对应的变量（比如{{name}}、{{email}}等）
3. 获取你的User ID、Service ID和Template ID

修改后的HTML（需引入EmailJS脚本） #

<form id="contactForm">
  <!-- 同方案一的表单元素 -->
  <label for="name">Name</label><br>
  <input type="text" name="name" id="name" placeholder="Your name"><br>
  <label for="email">Email</label><br>
  <input type="email" name="email" id="email" placeholder="Your email"><br>
  <label for="password">Password</label><br>
  <input type="password" name="password" id="password" placeholder="Your password"><br>
  <label for="feedback">Feedback</label><br>
  <textarea name="feedback" id="feedback" cols="30" rows="10" placeholder="Your feedback"></textarea><br>
  <button type="submit">Send</button>
</form>
<!-- 引入EmailJS的CDN脚本 -->
<script src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>
<script src="./form.js"></script>

form.js代码 #

// 初始化EmailJS，替换成你的User ID
emailjs.init('YOUR_USER_ID');

document.getElementById('contactForm').addEventListener('submit', async function(e) {
  e.preventDefault();

  // 收集表单数据
  const formData = {
    name: document.getElementById('name').value.trim(),
    email: document.getElementById('email').value.trim(),
    password: document.getElementById('password').value.trim(),
    feedback: document.getElementById('feedback').value.trim()
  };

  try {
    // 发送邮件，替换成你的Service ID和Template ID
    await emailjs.send('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', formData);
    alert('邮件发送成功！');
    document.getElementById('contactForm').reset(); // 重置表单
  } catch (error) {
    alert('邮件发送失败，请稍后重试');
    console.error('发送失败:', error);
  }
});

优势：

• 无需用户手动操作，提交表单后自动发送邮件
• 不依赖用户本地邮箱客户端，只要浏览器能联网即可
• 支持自定义邮件模板，格式更规范

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