title: PHP contact form with HTML5 validation, display a message?
body: <p>I have a working php contact form, with HTML5 validation for inputs ( added required to them, and type name/email), but I have one problem.</p>
  
  <p>when message is sent it opens a new tab and it says thank you your message was sent, which is normal because of process.php</p>
  
  <pre><code>&lt;?php
  //Retrieve form data. 
  //GET - user submitted data using AJAX
  //POST - in case user does not support javascript, we'll use POST instead
  $name = ($_GET['name']) ? $_GET['name'] : $_POST['name'];
  $email = ($_GET['email']) ?$_GET['email'] : $_POST['email'];
  $website = ($_GET['website']) ?$_GET['website'] : $_POST['website'];
  $comment = ($_GET['comment']) ?$_GET['comment'] : $_POST['comment'];
  //flag to indicate which method it uses. If POST set it to 1
  if ($_POST) $post=1;
  //Simple server side validation for POST data, of course, 
  //you should validate the email
  if (!$name) $errors[count($errors)] = 'Please enter your name.';
  if (!$email) $errors[count($errors)] = 'Please enter your email.'; 
  if (!$comment) $errors[count($errors)] = 'Please enter your message.'; 
  //if the errors array is empty, send the mail
  if (!$errors) {
      //recipient - change this to your name and email
      $to = 'youremail@email.com';    
      //sender
      $from = $email;
  
      //subject and the html message
      $subject = 'Hello from ' . $name;    
      $message = '
      &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
      &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
      &lt;head&gt;&lt;/head&gt;
      &lt;body&gt;
      &lt;table&gt;
          &lt;tr&gt;&lt;td&gt;Name: &lt;/td&gt;&lt;td&gt;' . $name . '&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;Email: &lt;/td&gt;&lt;td&gt;' . $email . '&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;Message: &lt;/td&gt;&lt;td&gt;' . nl2br($comment) . '&lt;/td&gt;&lt;/tr&gt;
      &lt;/table&gt;
      &lt;/body&gt;
      &lt;/html&gt;';
      //send the mail
      $result = sendmail($to, $subject, $message, $from);
  
      //if POST was used, display the message straight away
      if ($_POST) {
          if ($result) echo 'Thank you! We have received your message.';
          else echo 'Sorry, unexpected error. Please try again later';
  
      //else if GET was used, return the boolean value so that 
      //ajax script can react accordingly
      //1 means success, 0 means failed
      } else {
          echo $result;    
      }
  //if the errors array has values
  } else {
      //display the errors message
      for ($i=0; $i&lt;count($errors); $i++) echo $errors[$i] . '&lt;br/&gt;';
      echo '&lt;a href="index.html"&gt;Back&lt;/a&gt;';
      exit;
  }
  //Simple mail function with HTML header
  function sendmail($to, $subject, $message, $from) {
      $headers = "MIME-Version: 1.0" . "\r\n";
      $headers .= "Content-type:text/html;charset=iso-8859-1" . "\r\n";
      $headers .= 'From: ' . $from . "\r\n";
  
      $result = mail($to,$subject,$message,$headers);
  
      if ($result) return 1;
      else return 0;
  }
  ?&gt;
  </code></pre>
  
  <p>but how can I make it show the message under submit button?
  this is HTML side</p>
  
  <pre><code>    &lt;form method="post" action="process.php"&gt;
  &lt;div class="element"&gt;
      &lt;label&gt;&lt;i class="icon-user"&gt;&lt;/i&gt;&lt;/label&gt;
      &lt;input type="name" name="name" placeholder="write your name here" class="text" required/&gt;
  &lt;/div&gt;
  &lt;br&gt;
  &lt;div class="element"&gt;
      &lt;label&gt;&lt;i class="icon-envelope"&gt;&lt;/i&gt;&lt;/label&gt;
      &lt;input type="email" name="email" placeholder="write your e-mail here" class="text" required/&gt;
  &lt;/div&gt;
  &lt;br&gt;
  &lt;div class="element"&gt;
      &lt;label&gt;&lt;i class="icon-comment"&gt;&lt;/i&gt;&lt;/label&gt;
      &lt;textarea name="comment" placeholder="write your message here" class="text textarea"required&gt;&lt;/textarea&gt;
  &lt;/div&gt;
  &lt;br&gt;
  &lt;div class="element el-submit"&gt;
  
      &lt;input class="submit" type="submit" id="submit"/&gt;
  
  &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I mean, when I press submit button and it's alright I want to display a message like "your message was sent", but I want it under submit button, not in a new page</p>