Php Contact form portion of HTML5 site not working

I currently have my site www.vivascoaching.com up and I cannot seem to get the contact form portion of the page to email me back when that form I have there is filled out. Currently I have an index.html file and a separate php file called callback.php I am new to php so I am not sure if this is the correct way to do it.

This is the index.html file:

<!DOCTYPE HTML>
<html>
<head>
   <title>Vivas Coaching-Main</title>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="../style/main.css">
   <link rel="stylesheet" href="../style/normalize.css">

</head>


<body>
   <header>
      <img src="Images/logo.png" alt="logo" width="465px" height="135px" align="middle">
   </header>
   
   <div class="left_column">
   <nav id="secondarylinks">
      <ul>
         <li><a href="register.html" title="Register">Register</a></li>
         <li><a href="dates.html" title="Dates">Dates</a></li>
         <li><a href="pricing.html" title="Pricing">Pricing</a></li>
         <li><a href="forms.html" title="Forms">Forms</a></li>
      </ul>
   </nav>
   </div>
   
   <div class="middle_column">
   <nav id="mainlinks">
      <ul>
         <li><a href="index.html" title="Main">Main</a></li>
         <li><a href="classes.html" title="Classes">Classes</a></li>
         <li><a href="teambuilding.html" title="Team Building">Team Building</a></li>
      </ul>
   </nav>

  <img src="Images/SAT summer flyer.jpg" alt="SAT summer flyer" width="800px" height="800px">
   <footer>
      <p>&copy;VivasCoaching 2016</p>
   </footer>
   </div>

   <div class="right_column">
   <h2>Contact Us</h2>
   <p>(646)316-8481/<br>(403)718-0159</p>
   <p>Please fill out the information below and we will get back to you as soon as possible!<p>

   <form method="post" action="callback.php">
      <label for="firstname">First Name: </label>
      <input type="text" name="firstname"/>

      <label for="lastname">Last Name: </label>
      <input type="text" name="lastname"/>

      <label for="email">Email: <span class="required"></label>
      <input type="text" name="email"/>

      <label>*What is 2+2? (Anti-spam)</label>
      <input name="human" placeholder="Type Here">
      
      <label for="message"> Message:  <span class="required"></label>
      
      <textarea id="message" name="message" cols="25" rows="10" placeholder="Type your message here!"></textarea>
      <input type="submit" id="submit"/>
   </form>
   </div>

</body>
</html>

And this is the callback.php:

<?php
   
   $firstname = $_POST['firstname'];  
   $lastname = $_POST['lastname']; 
   $email = $_POST['email']; 
   $message = $_POST['message'];
   $to = 'vivascoaching@gmail.com';
   $subject = 'inquiry';
   $human = $_POST['human'];
   $submit = $_POST['submit'];


   $body ="From: $firstname\n $lastname\n Email: $email\n Message:\n $message";


   if ($_POST['submit'] && $human == '4') {				 
        if (mail ($to, $subject, $body)) { 
	    echo '<p>Your message has been sent!</p>';
	} else { 
	    echo '<p>Something went wrong, go back and try again!</p>'; 
	} 
    } else if ($_POST['submit'] && $human != '4') {
	echo '<p>You answered the anti-spam question incorrectly!</p>';
    }  

?>

Solution

EDITED

I've edited your code dude. And the inputs are incorrect. I mean you can use <input type="email" name="email" placeholder="email" /> for email. (a @domain will be needed on that input.) Also, you can use a required. Something like <input type="text" name="test" required />.

I've edited your callback. Use this.

check edit 3

I got rid of isset($_POST['submit']), that was a headache!

EDIT 2:

NEVER use quotes (' or ") for numbers in php. Thats not needed.

EDIT 3 (hope the last one.)

If you want to show the message on index, i use headers to redirect with GET requests.

For example: index.php

<!doctype html>
<html>
<head>
</head>
<body>
<?php
error_reporting(0) // prevent undefined index.
if(isset($_GET['success']) && $_GET['success']) {
echo "<p>Your message has been sent!</p>";
} elseif(isset($_GET['error']) && $_GET['error'] && isset($_GET['message'])) {
echo $_GET['message']; // Print message like ?error=true&message=test.
//  echo '<p>'.$_GET['message'].'</p>'; if you don't know how to add html before it.
}
?>
</body>
</html>

(index needs to be .php)!

callback.php will be:

<?php
if(isset($_POST['human']) && isset($_POST['email'])) {  
   $firstname = $_POST['firstname'];  
   $lastname = $_POST['lastname']; 
   $email = $_POST['email']; 
   $message = $_POST['message'];
   $to = 'vivascoaching@gmail.com';
   $subject = 'inquiry';
   $human = $_POST['human'];


   $body ="From: $firstname\n $lastname\n Email: $email\n Message:\n $message";


   if ($human == 4) {                
        if (mail ($to, $subject, $body)) { 
        header('location:index.php?success=true');
    } else { 
        header('location:index.php?error=true&message=Something went wrong, go back and try again!');
    } 
    } else if ($human != 4) {
        header('location:index.php?error=true&message=You answered the anti-spam question incorrectly!');
    }  
} else { header('location:index.php?error=true&message=Form is incomplete.'); }
?>