提交 html 表单上显示成功消息

我试图在提交按钮上方显示成功消息，但它引导我进入表单页面。这里是。

我在尝试着：

<!-- The form is on the deck.html page -->
<div class="row footer-newsletter justify-content-center">
    <div class="col-lg-6">
        <form action="forms/subscribe.php" method="post">
            <input type="email" name="email" placeholder="Enter your Email"><input type="submit" value="Subscribe">
        </form>
    </div>

我在电子邮件中收到表单输入，那么下面的代码哪里错了？

    // Create email headers
    $headers = 'From: ' . $email_from . "\r\n" .
    'Reply-To: ' . $email_from . "\r\n" .
    'X-Mailer: PHP/' . phpversion();
    @mail($email_to, $email_subject, $email_message, $headers);
?>

<!-- include your own success HTML here.

    So I am getting form details to email, but the success
    message below is appearing on /forms/subscribe.php
    where actually I am looking to display just above
    button

-->

    Thank you for contacting us. We will be in touch with you very soon.

<?php

我尝试了提交弹出窗口、警报框，但它总是将我带到订阅页面，并且我希望在订阅按钮之前显示。

我们需要：

1. 捕获并停止提交事件继续
2. 显示消息
3. 一段时间后（假设 2 秒），继续提交。

检查下面的代码：

我们将事件侦听器附加到表单。当“提交”事件发生时，我们要执行我们的代码。这e变量代表事件。我们想要阻止事件执行其正常操作（在本例中，将用户发送到另一个页面），所以我们说e.preventDefault().

我创建了一个p表单顶部带有消息的元素。这个元素默认是隐藏的，但是如果我们添加一个类show看来。所以，这就是我们所做的。阻止事件继续后，我们将此类添加到消息中。

最后，我们使用setTimeout()函数计数到 2 秒（2000 毫秒），然后执行form.submit()，它将用户发送到订阅页面。

const form = document.querySelector('form');
const thankYouMessage = document.querySelector('#thank-you-message');
form.addEventListener('submit', (e) => {
  e.preventDefault();
  thankYouMessage.classList.add('show');
  setTimeout(() => form.submit(), 2000);
});

#thank-you-message {
  display: none;
}

#thank-you-message.show {
  display: block;
}

 <p id="thank-you-message">
   Thank you for contacting us. We will be in touch with you very soon.
 </p>
 <form action="forms/subscribe.php" method="post">
   <input type="email" name="email" placeholder="Enter your Email">
   <input type="submit" value="Subscribe">
 </form>