如何将HTML表单数据通过邮件接收？求服务端实现方案

嘿，我来帮你搞定把表单数据发送到指定邮箱的事儿！首先得先调整下你的前端表单代码，让服务端能正确获取到数据——你的原表单缺少几个关键属性，我先给你修正一下：

<form class="contact-form" method="POST" action="/submit-form">
  <div class="row">
    <div class="col-md-6">
      <input type="text" placeholder="Name" name="name">
    </div>
    <div class="col-md-6">
      <input type="email" placeholder="E-mail" name="email"> <!-- 改成email类型更符合规范 -->
    </div>
    <div class="col-md-6">
      <input type="text" placeholder="Subject" name="subject">
    </div>
    <div class="col-md-6">
      <input type="text" placeholder="How did you hear about me?" name="referral">
    </div>
    <div class="col-md-12">
      <textarea placeholder="Message" name="message"></textarea>
    </div>
  </div>
  <div class="text-center">
    <button class="site-btn" type="submit">Send</button> <!-- 明确标注submit类型 -->
  </div>
</form>

修改点说明：

• 给<form>加了method="POST"（提交数据用POST更安全）和action="/submit-form"（对应服务端的接口路径）
• 给每个输入项加了name属性——服务端就是靠这个属性来读取对应字段的值的
• 把邮箱输入框改成了type="email"，更符合HTML规范

接下来给你两种常用的服务端实现方案，选你顺手的来：

方案一：Node.js + Express + Nodemailer（前端友好型） #

如果你平时写JS多，这个方案上手最快，轻量又灵活。

步骤1：初始化项目装依赖 #

在项目根目录打开终端，跑这几条命令：

npm init -y
npm install express nodemailer cors

步骤2：写服务端代码（比如新建server.js） #

const express = require('express');
const nodemailer = require('nodemailer');
const cors = require('cors');

const app = express();
app.use(cors()); // 解决跨域问题
app.use(express.urlencoded({ extended: true }));
app.use(express.json());

// 配置邮件发送器（这里以Gmail为例，其他邮箱配置大同小异）
const transporter = nodemailer.createTransport({
  service: 'Gmail',
  auth: {
    user: '你的邮箱@gmail.com', // 你的发件邮箱
    pass: '你的邮箱授权码' // 注意：Gmail要开两步验证，用应用专用密码，不能直接用登录密码
  }
});

// 处理表单提交的接口
app.post('/submit-form', (req, res) => {
  // 从请求体里拿表单数据
  const { name, email, subject, referral, message } = req.body;

  // 组装邮件内容
  const mailOptions = {
    from: email, // 用用户填写的邮箱作为发件人
    to: '你要接收数据的邮箱@xxx.com', // 你的目标邮箱
    subject: `新表单提交：${subject}`,
    text: `
      姓名：${name}
      用户邮箱：${email}
      了解渠道：${referral}
      留言内容：${message}
    `
  };

  // 发送邮件
  transporter.sendMail(mailOptions, (error, info) => {
    if (error) {
      console.error('发送失败：', error);
      res.status(500).send('邮件发送失败，请稍后重试');
    } else {
      console.log('邮件已发送：', info.response);
      res.status(200).send('邮件发送成功！');
    }
  });
});

// 启动服务
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`服务跑在端口${PORT}啦`);
});

步骤3：启动服务 #

node server.js

测试的时候，前端页面提交表单就会触发这个接口啦。生产环境可以用PM2管理进程，或者部署到Vercel、Heroku这类平台。

方案二：PHP（适合有PHP环境的场景） #

如果你的服务器本身支持PHP，用这个方案更省心，不用额外搭Node环境。

步骤1：新建submit-form.php文件 #

<?php
// 只处理POST请求
if ($_SERVER["REQUEST_METHOD"] == "POST") {
  // 读取表单数据
  $name = $_POST['name'];
  $email = $_POST['email'];
  $subject = $_POST['subject'];
  $referral = $_POST['referral'];
  $message = $_POST['message'];

  // 配置邮件信息
  $targetEmail = "你要接收数据的邮箱@xxx.com"; // 你的目标邮箱
  $emailSubject = "新表单提交：{$subject}";
  $emailContent = "收到新的表单提交：\n\n".
                  "姓名：{$name}\n".
                  "用户邮箱：{$email}\n".
                  "了解渠道：{$referral}\n".
                  "留言内容：{$message}";

  // 设置邮件头（让收件人能回复用户）
  $headers = "From: {$email}\r\n";
  $headers .= "Reply-To: {$email}\r\n";

  // 发送邮件
  if(mail($targetEmail, $emailSubject, $emailContent, $headers)){
    echo "邮件发送成功！";
  } else {
    echo "邮件发送失败，请稍后重试";
  }
}
?>

步骤2：调整前端表单的action #

把表单的action="/submit-form"改成action="submit-form.php"，然后把前端HTML文件和这个PHP文件放在同一个支持PHP的服务器目录下（比如XAMPP的htdocs文件夹），启动服务器就能测试了。

一些重要提示 #

• 用Gmail发邮件的话，必须开启两步验证，然后生成应用专用密码，不能直接用邮箱登录密码，不然会被谷歌拦截
• 生产环境一定要对用户输入做验证和过滤，比如检查邮箱格式、防止XSS攻击，避免收到垃圾邮件
• 如果遇到发送失败的问题，检查服务器的邮件服务配置，或者改用SendGrid、Mailgun这类第三方邮件服务，稳定性更高

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