HTML表单提交后在按钮上方显示成功消息的问题

你的核心痛点是默认表单提交会跳转到处理页面，要实现原地显示消息，得用异步提交（AJAX）来避免页面跳转，同时调整PHP的响应方式。下面是一步步的具体解决方案：

1. 调整HTML结构，新增消息显示容器 #

先给表单加个ID方便JS定位，再在提交按钮上方加一个默认隐藏的消息容器：

<!-- The form is on the deck.html page -->
<div class="row footer-newsletter justify-content-center">
  <div class="col-lg-6">
    <!-- 新增：用于显示成功/失败消息的容器 -->
    <div id="subscribe-status" style="display: none; color: #28a745; margin-bottom: 12px;"></div>
    <form id="subscribe-form" action="forms/subscribe.php" method="post">
      <input type="email" name="email" placeholder="Enter your Email">
      <input type="submit" value="Subscribe">
    </form>
  </div>
</div>

2. 用JavaScript实现异步提交 #

用原生JS监听表单提交事件，阻止默认跳转行为，通过AJAX把数据发送到PHP处理：

// 获取表单和消息容器元素
const subscribeForm = document.getElementById('subscribe-form');
const statusElement = document.getElementById('subscribe-status');

// 监听表单提交事件
subscribeForm.addEventListener('submit', function(e) {
  // 阻止表单默认跳转
  e.preventDefault();
  
  // 收集表单数据
  const formData = new FormData(this);

  // 发送异步请求
  fetch(this.action, {
    method: this.method,
    body: formData
  })
  .then(response => response.text())
  .then(result => {
    // 显示成功消息
    statusElement.textContent = result;
    statusElement.style.display = 'block';
    // 可选：清空输入框
    this.reset();
    // 可选：5秒后自动隐藏消息
    setTimeout(() => {
      statusElement.style.display = 'none';
    }, 5000);
  })
  .catch(error => {
    // 显示失败提示
    statusElement.textContent = '订阅失败，请稍后重试';
    statusElement.style.color = '#dc3545';
    statusElement.style.display = 'block';
  });
});

3. 修改PHP代码，返回响应文本 #

把原来直接输出HTML的逻辑改成返回纯文本（也可以用JSON格式，扩展性更强），让AJAX能正确接收并处理：

<?php
// 替换成你实际的接收邮箱
$email_to = "your-email@example.com";
$email_from = $_POST['email'];
$email_subject = "New Subscription Request";
$email_message = "Received new subscription email: " . $email_from;

// 构建邮件头
$headers = 'From: ' . $email_from . "\r\n" .
'Reply-To: ' . $email_from . "\r\n" .
'X-Mailer: PHP/' . phpversion();

// 发送邮件并返回响应
if(@mail($email_to, $email_subject, $email_message, $headers)) {
  echo "Thank you for contacting us. We will be in touch with you very soon.";
} else {
  echo "Subscription failed, please try again later.";
}
?>

为什么这么做？ #

• 异步提交（AJAX）让表单数据在后台发送，页面不会跳转，完美实现原地显示消息的需求；
• 消息容器默认隐藏，只有提交后才显示，不会干扰初始页面布局；
• PHP根据邮件发送结果返回不同文本，JS可以灵活处理成功/失败的提示。

这样修改后，用户提交表单时页面完全不会跳转，成功消息会直接显示在提交按钮上方啦！

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