Index.php opens instead of Sending the Message

I have searched PHP contact form script won't run/ page opens instead

click submit in html and run php code

But couldnt get an answer - it did not work.

As the header suggests : I am trying to submit information displayed on a web page to an email address listed.

Here is the send message part of my html : {

 <div class="col-md-5 col-md-push-2">
             <div class="form">
                <form method="post" action="contactform/index.php">
                   <div class="form-group">
                        <label>First Name</label>
                        <input name="fname" placeholder="Type Here">
                         <div class="validation"></div>
                  </div>
                    <div class="form-group">
                    <label>Last Name</label>
                    <input name="surname" placeholder="Type Here">
                     <div class="validation"></div>
                  </div>
                      <div class="form-group">
                    <label>ID Number (For Voting)</label>
                    <input name="idnumb" placeholder="Type Here">
                     <div class="validation"></div>
                  </div>
                      <div class="form-group">
                    <label>Address</label>
                    <input name="addr" placeholder="Type Here">
                     <div class="validation"></div>
                  </div>
                      <div class="form-group">
                    <label>Email</label>
                    <input name="email" type="email" placeholder="Type Here">
                      <div class="validation"></div>
                  </div>
                       <div class="form-group">       
                    <label>Message</label>
                    <textarea name="message" placeholder="Type Here"></textarea>
                      <div class="validation"></div>
                  </div>       
                    <label>*What is 2+2? (Anti-spam)</label>
                    <input name="human" placeholder="Type Here">
              <div class="text-center"><button id="submit" name="submit" type="submit" value="Submit">Send Message</button></div>  
                </form>

} This is a code snippet and contains closing at the bottom

There is a contactform.js for validation. Then there is the php file index.php located in a folder on the server called contactform :

{

<?php
    $firstname = $_POST['fname'];
    $surname = $_POST['surname'];
    $idnumb = $_POST['idnumb'];
    $address = $_POST['addr'];
    $email = $_POST['email'];
    $message = $_POST['message'];
    $from = 'From: Test'; 
    $to = 'avahed87@gmail.com'; 
    $human = $_POST['human'];

    $body = "Registration from $firstname $surname\n ID:$idnumb\n  Email : $email\n Address : $address\n Message:\n $message";

    if ($_POST['submit'] && $human == '4') {                 
        if (mail ($to, $subject, $body, $from)) { 
        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>';
    }
?>

}

Basically I need to send this info the email address attached. I am fairly new to web development so any advice or reference to a tutorial would be helpful.

I mimiced the code from http://tangledindesign.com/how-to-create-a-contact-form-using-html5-css3-and-php/