How do I make contact form success message appear in same page

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 = 'email@site.com';

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

//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.

Answer 2

Make your action field empty. Put action="" instead of action="mail.php" Then include your mail.php content inside your contact page. As you know, you have to save that page as PHP, too; for example, mycontactform.php. In this way you have more control over the content and format of the "your message submitted" message. If you separate mail.php you can't address divisions in the mycontactform.php.

Security and vulnerability of PHP codes you are using should be addressed after you have completed the page coding and tested it as up and running in your desired format, since it needs more in-depth study of PHP conventions and usages. source: A Set of Step by Step Tutorials Using HTML5, CSS3 and PHP (8)

Answer 3

Note that your script mail.php is vulnerable to headers injection attack. You need to escape your variable $_POST['email']. You have to remove the special characters \\n and \\r . This can be made easily by using the str_replace function.