Отображение сообщения об успехе при отправке формы html

Question

Я пытаюсь отобразить сообщение об успехе чуть выше кнопки отправки, но оно направляет меня на страницу формы. Вот то, что я пытаюсь сделать -

//form is on 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 succes 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

Я пытался отправить всплывающее окно с предупреждением, но мне всегда приходилось подписываться на страницу, и я хочу отобразить перед тем, как кнопка подписки

Answer 1

Что нам нужно сделать, это:

1. Захват и остановка продолжения отправки события
2. Показать сообщение
3. Через некоторое время (скажем, 2 секунды ), продолжайте отправку.

Проверьте код ниже:

Мы прикрепляем слушатель события к форме. Когда происходит событие submit, мы хотим выполнить наш код. Переменная 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>