How to create a pop up contact form that return success message in the place of the send button?

Question

I have HTML pop up a contact form that I need help with to return a success message on the page or in the place of the send button.

<div class="form-popup" id="myForm">
   <form id="myForm" action="action_page.php" method="post" enctype="multipart/form-data" class="form-container">
      <h1>Contact</h1>
      <input type="text" placeholder="Name" name="name" required>
      <input type="text" placeholder="Email" name="email" required>
      <textarea rows="4" cols="33.5" placeholder="Your message..." name="message" required tabindex="35"></textarea>
      <button type="submit" class="btn">Send</button>
      <button type="button" class="btn cancel" onclick="closeForm()">Close</button>
   </form>
</div>



  <?php
    $name = $_POST['Name'];
    $email = $_POST['Email'];
    $message = $_POST['Message'];
    $from = 'From: mywebsite.com'; 
    $to = 'sk@gmail.com'; 
    $subject = 'Message from MyWebsite';

    $headers = 'From: mywebsite.com' . "\r\n" . 
    'Reply-To: ' . $email . "\r\n" .
    'X-Mailer: PHP/' . phpversion();


    $body = "Name: $name\n Email: $email\n Message:\n $message";

?>

//please refer to my PHP code below that communicates with my HTML file.
currently after PHP submits my form it redirects to the homepage. I want 

it to stay on same page and display Message sent Successfully in the send button.

<?php
if ($_POST['submit']) {
    if (mail ($to, $subject, $body, $headers)) { 

        header("Location: http://www.mywebsite.com");


    } else { 
        echo '<p>Oops! An error occurred. Try sending your message again.</p>'; 
    }
}
?>

Answer 1

You should place php code above html and check if the request is POST or GET. the header("Location: http://www.mywebsite.com"); is redirecting to the home page. Instead of that create the variable that storing message(success or error) and if the request is POST show it on your form

<?php
$showMsg = false;
if ($_POST['submit']) {
    $name = $_POST['Name'];
    $email = $_POST['Email'];
    $message = $_POST['Message'];
    $from = 'From: mywebsite.com'; 
    $to = 'sk@gmail.com'; 
    $subject = 'Message from MyWebsite';

    $headers = 'From: mywebsite.com' . "\r\n" . 
    'Reply-To: ' . $email . "\r\n" .
    'X-Mailer: PHP/' . phpversion();


    $body = "Name: $name\n Email: $email\n Message:\n $message";
   if (mail ($to, $subject, $body, $headers)) { 


    $showMsg = "SUCCESS";


 } else { 
     $showMsg = "ERROR";
    }
 }
    
?>
<div class="form-popup" id="myForm">
   <form id="myForm" action="action_page.php" method="post" enctype="multipart/form-data" class="form-container">
      <h1>Contact</h1>
      <input type="text" placeholder="Name" name="name" required>
      <input type="text" placeholder="Email" name="email" required>
      <textarea rows="4" cols="33.5" placeholder="Your message..." name="message" required tabindex="35"></textarea>
 <?php if( $showMsg) {?> 
     <?= $showMsg ?> 
 <?php } else { ?>
      <button type="submit" name="submit" class="btn">Send</button>
 <?php } ?>
      <button type="button" class="btn cancel" onclick="closeForm()">Close</button>
   </form>
</div>

Answer 2

This solution requies JQuery to run!

$('#myForm').submit(function(e){
//DO YOUR STUFF
e.preventDefault()//Remove this line if you want to submit the form
$('#send').hide();
$('.success').show();
});

<script 
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>
<div class="form-popup">

        <form id="myForm" action="action_page.php" method="post" enctype="multipart/form-data" class="form-container">
        <h1>Contact</h1>
        <input type="text" placeholder="Name" name="name" required>
        <input type="text" placeholder="Email" name="email" required>
        <textarea rows="4" cols="33.5" placeholder="Your message..." name="message" required tabindex="35"></textarea>

  <div class="success" style="display:none;">
      SUCCESS MESSAGE
  </div>
  <div class="buttons">
      <button type="submit" class="btn" id="send">Send</button>
      <button type="button" class="btn cancel" onclick="closeForm()">Close</button>
  </div>
</div>

UPDATE for author:

 <div class="form-popup">

        <form id="myForm" action="action_page.php" method="post" enctype="multipart/form-data" class="form-container">
        <h1>Contact</h1>
        <input type="text" placeholder="Name" name="name" required>
        <input type="text" placeholder="Email" name="email" required>
        <textarea rows="4" cols="33.5" placeholder="Your message..." name="message" required tabindex="35"></textarea>

  <div class="success" style="display:none;">
  SUCCESS MESSAGE
  </div>
  <div class="buttons">
  <button type="submit" class="btn" id="send">Send</button>
  <button type="button" class="btn cancel" onclick="closeForm()">Close</button>
  </div>
</div>

 <script 
  src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
 </script>
 <script>
        $('#myForm').submit(function(e){
        //DO YOUR STUFF
        e.preventDefault()//Remove this line if you want to submit the form
        $('#send').hide();
        $('.success').show();
     });
 </script>