title: Replacing HTML form with success message after submit, form sends mail using separate php file
body: <p>I have an html contact form which is built into index.html, and then I have a mail.php file that sends a mail and also uses some Javascript. When I fill in form and submit, I have coded it to send the mail and then it pops up with a success message box and then redirects back to index.html.</p>
  
  <p>What I would like is for the form to be replaced with the success message, to avoid a page refresh and also to avoid the popup message box.</p>
  
  <p>form from index.html:</p>
  
  <pre><code>&lt;form  action="mail.php" method="POST"&gt;
      &lt;div class="row uniform"&gt;
      &lt;div class="6u 12u$(xsmall)"&gt;
          &lt;input type="text" name="name" id="name" value="" placeholder="Name" /&gt;
      &lt;/div&gt;
      &lt;div class="6u$ 12u$(xsmall)"&gt;
          &lt;input type="email" name="email" id="email" value="" placeholder="Email" /&gt;
      &lt;/div&gt;
      &lt;div class="12u$"&gt;
          &lt;!--&lt;div class="select-wrapper"&gt;
  
          &lt;/div&gt;--&gt;
      &lt;/div&gt;
      &lt;div class="12u$"&gt;
          &lt;textarea name="message" id="message" placeholder="Enter your message" rows="6"&gt;&lt;/textarea&gt;
      &lt;/div&gt;
          &lt;center&gt;&lt;div class="g-recaptcha" data-sitekey=""&gt;&lt;/div&gt;&lt;/center&gt;
      &lt;div class="12u$"&gt;
          &lt;ul class="actions"&gt;
          &lt;li&gt;&lt;input type="submit" value="Send Message" class="special" /&gt;&lt;/li&gt;
          &lt;li&gt;&lt;input type="reset" value="Reset" /&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>php file, email address and recaptcha token removed for obvious reasons:</p>
  
  <pre><code>&lt;?php $name = $_POST['name'];
  $email = $_POST['email'];
  $message = $_POST['message'];
  $formcontent = "From: $name \n email: $email \n Message: $message";
  $recipient = 'email address here';
  $subject = 'Message from Website';
  $mailheader = "From: $email \r\n";
  $captcha;
  {
    if(isset($_POST['g-recaptcha-response']))
      {
        $captcha=$_POST['g-recaptcha-response'];
      }
    if(!$captcha)
      {
        echo '&lt;script language="javascript"&gt;';
        echo 'alert("Please check the Captcha")';
        echo '&lt;/script&gt;';
        exit;  
      }
    $response=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=&amp;response=".$captcha."&amp;remoteip=".$_SERVER['REMOTE_ADDR']);
    if($response.success==false)
    {
      echo '&lt;h2&gt;Please do not try and spam here.&lt;/h2&gt;';
    }else
    {
  mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
  echo '&lt;script language="javascript"&gt;';
  echo 'alert("Your Message successfully sent, we will get back to you ASAP.");';
  echo 'window.location.href="index.html";';
  echo '&lt;/script&gt;';
    }
  } ?&gt;
  </code></pre>
  
  <p>This is a topic that I have actually looked at:</p>
  
  <p><a href="https://stackoverflow.com/questions/30935579/clear-form-after-submit-and-success-message">Clear form after submit and success message</a></p>