无法确定HTML+JavaScript联系表单数据提交去向及邮件发送方案

一、提交后页面刷新的原因 #

你的代码存在两个核心问题导致提交后页面刷新：

1. 页面同时存在两个独立表单：一个是HTML里的静态表单，另一个是Form.js动态创建的表单，两者无关联，提交时都会触发浏览器默认的页面跳转行为。
2. 动态创建的表单action属性为空，浏览器默认会将表单数据提交到当前页面URL，进而引发页面刷新。

二、实现表单发送邮件到指定邮箱 #

前端无法直接发送邮件，必须借助后端脚本处理。以下是基于PHP的落地解决方案，同时整理现有代码避免表单重复问题：

步骤1：整理静态表单代码 #

删除Form.js中动态创建表单的全部代码，保留你已有的功能正常的静态表单，补全<form>标签核心属性：

<form id="contact-form" action="send-email.php" method="POST">
  <div class="input-wrapper">
    <input type="text" name="fullname" class="form-input" placeholder="Full name" required data-form-input>
    <input type="email" name="email" class="form-input" placeholder="Email address" required data-form-input>
  </div>
  <textarea name="message" class="form-input" placeholder="Your Message" required data-form-input></textarea>
  <button class="form-btn" type="submit" disabled data-form-btn >
    <ion-icon name="paper-plane"></ion-icon>
    <span>Send Message</span>
  </button>
</form>

• action="send-email.php"：指定表单提交到后端处理脚本
• method="POST"：采用POST方式传递表单数据，比GET更安全

步骤2：编写后端邮件处理脚本 #

在网站根目录创建send-email.php文件，写入以下代码：

<?php
// 接收表单提交的字段数据
$fullname = $_POST['fullname'];
$email = $_POST['email'];
$message = $_POST['message'];

// 替换为你的目标邮箱地址
$to = "your-email@example.com";
// 邮件主题
$subject = "新的联系消息：来自{$fullname}";
// 邮件内容格式化
$body = "提交人姓名：{$fullname}\n提交人邮箱：{$email}\n\n消息内容：\n{$message}";
// 设置邮件头（支持回复到提交人邮箱）
$headers = "From: {$email}\r\n";
$headers .= "Reply-To: {$email}\r\n";

// 执行邮件发送
if(mail($to, $subject, $body, $headers)) {
  echo "<script>alert('消息发送成功！'); window.location.href='/';</script>";
} else {
  echo "<script>alert('消息发送失败，请稍后重试！'); window.history.back();</script>";
}
?>

• 将your-email@example.com替换成你自己的邮箱
• window.location.href='/'可替换为你的网站首页地址，让用户成功提交后返回站点

步骤3：可选：实现无刷新提交（AJAX方式） #

如果不想提交后刷新页面，可添加以下JS代码实现异步提交：

const form = document.getElementById('contact-form');
form.addEventListener('submit', function(e) {
  // 阻止默认页面跳转
  e.preventDefault();
  // 收集表单数据
  const formData = new FormData(this);
  
  // 发送异步请求
  fetch('send-email.php', {
    method: 'POST',
    body: formData
  })
  .then(res => res.text())
  .then(data => {
    alert(data.includes('成功') ? '消息发送成功！' : '消息发送失败，请稍后重试！');
    // 重置表单并恢复提交按钮禁用状态
    form.reset();
    document.querySelector('[data-form-btn]').disabled = true;
  })
  .catch(() => alert('网络异常，请检查连接后重试！'));
});

三、注意事项 #

• 确保你的服务器支持PHP及mail()函数（多数虚拟主机默认支持），若不支持可改用Node.js、Python等其他后端语言实现对应逻辑。
• 为避免垃圾邮件骚扰，可后续添加验证码功能（如数字验证码、滑块验证）。

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