如何实现表单提交时同时触发PDF下载与管理员邮件发送？

核心思路 #

不能直接通过表单action同时完成两个操作，需要用JavaScript拦截表单默认提交行为，先把用户数据发送到后端接口（由后端处理邮件发送），成功后再触发PDF下载。

1. 前端代码修改 #

替换你现有表单代码为以下内容，添加JS事件处理逻辑：

<div>
<form id="downloadForm">
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="firstname" placeholder="Your name.." required>

  <label for="lname">Last Name</label>
  <input type="text" id="lname" name="lastname" placeholder="Your last name.." required>

  <label for="email">Email</label>
  <input type="email" id="email" name="email" placeholder="Your Email.." required>

  <label for="automation">Are You Running Esko's Automation Engine?</label>
  <select id="automation" name="automation" required>
    <option value="yes">Yes</option>
    <option value="no">No</option>
  </select>

  <input type="submit" value="GET IT">
</form>
</div>

<script>
document.getElementById('downloadForm').addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止表单默认跳转

  const formData = new FormData(this);

  // 发送用户数据到后端接口
  fetch('send-email.php', {
    method: 'POST',
    body: formData
  })
  .then(response => {
    if (response.ok) {
      // 邮件发送成功后，打开PDF链接触发下载
      window.open('https://www.the-grey-elephant.com/wp-content/uploads/2023/04/TGE-Ebook-8-Ways_Final.pdf', '_blank');
    } else {
      alert('提交失败，请重试');
    }
  })
  .catch(() => {
    alert('提交失败，请重试');
  });
});
</script>

• 给表单添加id方便JS获取
• 给必填字段加上required做基础验证
• 用fetch发送表单数据，避免页面刷新

2. 后端邮件处理代码（PHP） #

创建一个名为send-email.php的文件，放在你的网站根目录下（WordPress环境推荐放在主题目录），内容如下：

<?php
// 获取并清洗表单数据
$firstName = isset($_POST['firstname']) ? sanitize_text_field($_POST['firstname']) : '';
$lastName = isset($_POST['lastname']) ? sanitize_text_field($_POST['lastname']) : '';
$email = isset($_POST['email']) ? sanitize_email($_POST['email']) : '';
$automation = isset($_POST['automation']) ? sanitize_text_field($_POST['automation']) : '';

// 管理员邮箱地址
$adminEmail = 'your-admin-email@example.com';
$subject = '新的PDF下载用户信息';
$message = "用户信息:\n";
$message .= "姓名: {$firstName} {$lastName}\n";
$message .= "邮箱: {$email}\n";
$message .= "是否使用Esko Automation Engine: {$automation}";

// 设置邮件头部信息
$headers = "From: no-reply@your-domain.com\r\n";
$headers .= "Reply-To: {$email}\r\n";

// 发送邮件
if (mail($adminEmail, $subject, $message, $headers)) {
  echo 'Success';
} else {
  http_response_code(500);
  echo 'Failed';
}
?>

WordPress 适配优化

如果你的网站是WordPress，建议用WP内置的wp_mail()函数替代原生mail()，并通过WP的AJAX接口处理请求，避免单独PHP文件的安全问题：

1. 在主题的functions.php中添加以下代码：

// 注册AJAX动作
add_action('wp_ajax_send_pdf_user_info', 'send_pdf_user_info');
add_action('wp_ajax_nopriv_send_pdf_user_info', 'send_pdf_user_info');

function send_pdf_user_info() {
  // 验证请求合法性
  check_ajax_referer('pdf_download_nonce', 'nonce');

  // 获取并清洗数据
  $firstName = sanitize_text_field($_POST['firstname']);
  $lastName = sanitize_text_field($_POST['lastname']);
  $email = sanitize_email($_POST['email']);
  $automation = sanitize_text_field($_POST['automation']);

  $adminEmail = 'your-admin-email@example.com';
  $subject = '新的PDF下载用户信息';
  $message = "用户信息:\n";
  $message .= "姓名: {$firstName} {$lastName}\n";
  $message .= "邮箱: {$email}\n";
  $message .= "是否使用Esko Automation Engine: {$automation}";

  $headers = array('From: no-reply@your-domain.com');

  if (wp_mail($adminEmail, $subject, $message, $headers)) {
    wp_send_json_success();
  } else {
    wp_send_json_error('邮件发送失败');
  }
}

2. 修改前端JS的fetch部分：

// 添加隐藏的nonce字段到表单
const nonceField = document.createElement('input');
nonceField.type = 'hidden';
nonceField.name = 'nonce';
nonceField.value = '<?php echo wp_create_nonce('pdf_download_nonce'); ?>';
this.appendChild(nonceField);

fetch('<?php echo admin_url('admin-ajax.php'); ?>', {
  method: 'POST',
  body: new FormData(this),
  headers: {
    'X-Requested-With': 'XMLHttpRequest'
  }
})
.then(response => response.json())
.then(data => {
  if (data.success) {
    window.open('https://www.the-grey-elephant.com/wp-content/uploads/2023/04/TGE-Ebook-8-Ways_Final.pdf', '_blank');
  } else {
    alert(data.data || '提交失败，请重试');
  }
})
.catch(() => {
  alert('提交失败，请重试');
});

注意事项 #

• 替换代码中的your-admin-email@example.com和your-domain.com为实际信息
• 确保你的服务器支持PHP邮件发送功能（如果不支持，可改用SMTP服务）
• 生产环境建议添加更多后端验证逻辑，防止垃圾数据提交

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