如何使联系表单成功消息显示在同一页面中

Question

My website is one pager with nav that links to different parts of the page within the same document. So my contact is at stie.com/#contact rather than site.com/contact.html

I have my contact form coded in html using post method linking to mail.php. Upon hitting the submit button I get redirected to site.com/mail.php where the "Your message was succesfully sent" is displayed. How do I get it so that it displays right on top of the contact form since I don't have a contact.html file to turn into a contact.php and put the php code right where I want the success message to display?

<div class="row">
<div class="12u">
<form method="post" action="mail.php">
<div>
<div class="row half">
<div class="6u">
<input type="text" name="name" id="name" placeholder="Name" />
</div>
<div class="6u">
<input type="email" name="email" id="email" placeholder="Email" />
</div>
</div>
<div class="row half">
<div class="12u">
<input type="text" name="subject" id="subject" placeholder="Subject" />
</div>
</div>
<div class="row half">
<div class="12u">
<textarea name="message" id="message" placeholder="Message"></textarea>
</div>
</div>
<div class="row">
<div class="12u">
<a href="#" class="button form-button-submit">Send Message</a>
<a href="#" class="button button-alt form-button-reset">Clear Form</a>
</div>
</div>
</div>
</form>
</div>

My Mail.php

<?php

//GET INFO FROM CONTACT FORM
$name = $_POST['name'];
$email = $_POST['email'];
$subject = $_POST ['subject'];
$message = $_POST['message'];
$from .= $_POST ['email'];
$to = '[e-mail]';

// compose headers
$headers = "From: $email
";
$headers .= "Reply-To: $email
";

//POST SUBMIT
if ($_POST['sumbit']);
    if ($name != '' && $subject != '' && $message !='' && $email != '') {                
            if (mail ($to, $subject, $from, $message, $headers)) { 
            echo '<p>Your message has been sent!</p>';
        } else { 
            echo '<p>Something went wrong, go back and try again!</p>'; 
        }
    } else {
        echo '<p>Please fill in all required fields!!</p>';
    }
?>

Answer 1

You can use URL parameters with PHP:

<?php

$confDisplay = 'display:none;';

// if the url param exists, display confirmation
if(isset($_GET["confirm"]) && $_GET["confirm"]==true){
  $confDisplay = 'display:inline;';
}

?>

    ...
    <div style="<?php echo $confDisplay; ?>">
    Your form has been submitted!
    </div>
    ...

Just set your form action URL to the same page with ?confirm=true at the end.