如何实现联系表单携带计算器JS数据通过PHP发送邮件

整个流程不需要引入复杂依赖，新手按以下3块处理即可跑通：

1. 前端：把JS存储的计算器数据和表单内容一起提交 #

不需要单独传输计算器数据，只要拦截联系表单的默认提交行为，把存计算器数值的JS对象转成JSON格式，追加到表单提交参数里即可。
示例代码（替换成你自己的表单ID、计算器对象变量名即可）：

// 替换成你项目里实际存储计算器输入/计算结果的JS对象
const calcInputRecord = {
  // 这里是示例字段，换成你自己存的实际内容，比如押金、租期、计算出的可返还金额等
  deposit: 0,
  totalMonth: 0,
  usedMonth: 0,
  refundResult: 0
}

// 绑定联系表单提交事件
document.querySelector('#contact-form').addEventListener('submit', async function(e) {
  // 阻止表单默认的页面跳转提交
  e.preventDefault()
  // 收集用户填写的姓名、邮箱、留言等表单字段
  const submitData = new FormData(this)
  // 把计算器数据转成JSON字符串，加入提交参数
  submitData.append('calc_data', JSON.stringify(calcInputRecord))

  // 提交到后端PHP文件
  const resp = await fetch('./send_mail.php', {
    method: 'POST',
    body: submitData
  })
  const result = await resp.json()
  alert(result.msg)
  if(result.code === 0) this.reset()
})

2. 后端：PHP接收参数、拼接邮件内容、发信 #

新建send_mail.php文件放在网站根目录，做参数校验、把前端传的计算器JSON转成可读文本，拼到邮件正文里调用邮件函数发送即可。
示例代码：

<?php
header('Content-Type: application/json; charset=utf-8');
// 配置项，替换成你自己的收信邮箱
$toEmail = '你的收信邮箱@example.com';
$mailTitle = '网站「联系我」新消息';

// 基础参数校验
if(empty($_POST['name']) || empty($_POST['email']) || empty($_POST['calc_data'])){
  echo json_encode(['code'=>1, 'msg'=>'请填写必填项']);
  exit;
}

// 处理接收的参数，做基础安全过滤
$userName = strip_tags(trim($_POST['name']));
$userEmail = filter_var(trim($_POST['email']), FILTER_VALIDATE_EMAIL);
if(!$userEmail){
  echo json_encode(['code'=>1, 'msg'=>'邮箱格式不正确']);
  exit;
}
$userMsg = empty($_POST['message']) ? '用户未填写留言' : strip_tags(trim($_POST['message']));
// 把前端传的计算器JSON转成PHP数组
$calcData = json_decode($_POST['calc_data'], true);
if(!$calcData){
  echo json_encode(['code'=>1, 'msg'=>'数据异常，请刷新重试']);
  exit;
}

// 把计算器数组拼接成可读的文本
$calcContent = "=== 用户计算器输入记录 ===\n";
// 字段映射，把你JS对象里的英文字段名换成对应的中文释义
$fieldTextMap = [
  'deposit' => '用户输入押金金额（元）',
  'totalMonth' => '合同总时长（月）',
  'usedMonth' => '已使用时长（月）',
  'refundResult' => '计算得出可返还金额（元）'
];
foreach($calcData as $key => $val){
  $fieldName = array_key_exists($key, $fieldTextMap) ? $fieldTextMap[$key] : $key;
  $calcContent .= "{$fieldName}：{$val}\n";
}

// 拼接完整邮件正文
$mailBody = "你收到一条新的联系表单提交：\n";
$mailBody .= "用户姓名：{$userName}\n";
$mailBody .= "联系邮箱：{$userEmail}\n";
$mailBody .= "用户留言：{$userMsg}\n\n";
$mailBody .= $calcContent;

// 设置邮件头，避免乱码
$headers = "From: 网站通知 <no-reply@你的网站域名>\r\n";
$headers .= "Reply-To: {$userEmail}\r\n";
$headers .= "Content-Type: text/plain; charset=utf-8\r\n";

// 发送邮件
$sendStatus = mail($toEmail, $mailTitle, $mailBody, $headers);

if($sendStatus){
  echo json_encode(['code'=>0, 'msg'=>'提交成功，我会尽快回复你']);
}else{
  echo json_encode(['code'=>1, 'msg'=>'提交失败，请稍后重试']);
}
?>

3. 调试&注意事项 #

• 测试阶段先把代码里$sendStatus = mail(...)这行注释，加一句var_dump($mailBody)先看拼接出来的邮件内容是不是符合预期，确认内容没问题再打开真实发信逻辑。
• 存计算器数据的JS对象里不要放DOM节点、函数这类无法被JSON序列化的内容，只存数字、字符串这类基础类型值，避免传参丢数据。
• 如果调用mail()函数发信失败，先检查服务器有没有开启邮件服务，配置好SMTP参数即可，不需要一开始就引入第三方邮件类库增加复杂度。
• 建议加简单的提交频率限制，比如同一个IP10分钟内最多提交3次，避免被恶意刷垃圾邮件。

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