I don't want the page to refresh after php executing

Question

<?php
  $sendTo = "example@example.nl"; //Receiver mail
  $name = ""; //Sender's Name
  $email = ""; //Sender's email address
  $phone = ""; //Sender's mobile number
  $subject = ""; //Subject of form
  $message = ""; //Message of form
  $nameErr = "";
  $emailErr = "";
  $subjectErr = "";
  $messageErr = "";
  $succesMessage = "";

  //On submitting form, below function will execute
  if (isset($_POST['submit'])) {
    //Check if name is not empty
    if (empty($_POST['name'])) {
      $nameErr = "Name is required.";
    } else {
      $name = test_input($_POST['name']);
      //Check if name only contains letters and whitespace
      if (!preg_match("/^[a-zA-Z ]*$/",$name)) {
        $nameErr = "Only letters and whitespace allowed.";
      }
    }

    //Check if email is not empty
    if (empty($_POST['email'])) {
      $emailErr = "Email is required.";
    } else {
      $email = test_input($_POST['email']);
      //Check if email format is correct
      if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $emailErr = "Invalid email format.";
      }
    }

    //Phone
    if (empty($_POST['phone'])) {
      $phone = "Phonenumber not submitted.";
    } else {
      $phone = test_input($_POST['phone']);
    }

    //Subject
    if (empty($_POST['subject'])) {
      $subjectErr = "Subject is required.";
    } else {
      $subject = test_input($_POST['subject']);
     }

    //Message
    if (empty($_POST['message'])) {
      $messageErr = "Message is required.";
    } else {
      $message = test_input($_POST['message']);
    }

    if( !($name=='') && !($email=='') && !($subject=='') &&!($message=='') ) {
      $emailSubject = "New form submission";
      $header= "You have received a new e-mail from " .$name;
      $txt = $subject. "\n\n" .$message. "\n\n" . "Contact Details" ."\n". "Name: " .$name. "\n" . "Email: " .$email. "\n" . "Phone: " . $phone;

      /* Send the message using mail() function */
      if(mail($sendTo, $emailSubject, $txt, $header)) {
        $successMessage = "Message sent successfully. I will contact you shortly.";
        } else {
        $emailErr = "Invalid Email";
      }
    }
}

function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>

So I have this code standing above all html, the code works fine! But I do not want the page to reload and start at the top of the page. I want it to stay at the bottom of the page, because that's where contact form is located. How do I fix this?

I have read a bit fixing this with JavaScript issues, but I don't get it clear for myself to change my own code.

Html here:
<div class="form-container"> <form class="ccform" id="ccform" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" method="post"> <span class="error"><?php echo $nameErr;?></span> <div class="ccfield"> <span class="ccform-icon"><i class="fa fa-user"></i></span> <input type="text" class="ccform-field" placeholder="*Full Name" name="name"> </div> <span class="error"><?php echo $emailErr;?></span> <div class="ccfield"> <span class="ccform-icon"><i class="fa fa-envelope"></i></span> <input type="email" class="ccform-field" placeholder="*Email" name="email"> </div> <div class="ccfield"> <span class="ccform-icon"><i class="fa fa-mobile-phone"></i></span> <input type="text" class="ccform-field" placeholder="Phonenumber" name="phone"> </div> <span class="error"><?php echo $subjectErr;?></span> <div class="ccfield"> <span class="ccform-icon"><i class="fa fa-info"></i></span> <input type="text" class="ccform-field" placeholder="*Subject" name="subject"> </div> <span class="error"><?php echo $messageErr;?></span> <div class="ccfield msgfield"> <span class="ccform-icon"><i class="fa fa-comment"></i></span> <textarea class="ccform-field" name="message" rows="8" placeholder="*Message"></textarea> </div> <div class="ccfield btnfield"> <input class="ccbtn" id="ccbtn" type="submit" value="Submit" name="submit"> </div> </form> <span class="error"><?php echo $succesMessage;?></span> </div>

Answer 1

I think what you want is submitting a form using Ajax. This is your original code:

<?php

  // .....

  //On submitting form, below function will execute
  if (isset($_POST['submit'])) {

      // ..... 

      // After processing your form data, you have to output your result here. For example:
      echo $message;

      // then exit php script, so that it will not generate HTML below
      exit;
  }
?>

Your HTML should have a form looks like this:

<form id="myForm" method="post" action="contact.php">
    // ......
    <button id="btSubmit" name="submit">Submit</button>
</form>

To not refresh a page you must use Ajax, here I use jQuery:

<script>
    $(function() {
         $('#btSubmit').click(function() {
              var method = $('#myForm').attr('method');
              var action = $('#myForm').attr('action');
              $.ajax({
                  url: action, 
                  method: method,
                  data: $('#myForm').serialize();
                  success: function(data) { 
                       // your response data
                  }
              });
         });
    });        
</script>