PHP Contact form used in HTML 5 Template but not e

I have a contact-form.php and one index.html file as follows. but when click on submit to send email it reload the page and nothing happened, again the home page of site is refreshed. where is my problem?

I see lots of SO links but I couldn't find the problem. I attached here the codes. all of these two files are in the same folder on PHP Server.

<!-- CONTACT FORM -->
                                <div class="">
                                    <form id="contact-form" action="contact-form.php" method="POST">

                                        <div class="row">
                                            <div class="col-md-12 mb-30">
                                                <!-- <label>Your name *</label> -->
                                                <input type="text" value="" data-msg-required="Please enter your name"
                                                    maxlength="100" class="controled" name="name" id="name"
                                                    placeholder="NAME" required>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-12 mb-30">
                                                <!-- <label>Your email address *</label> -->
                                                <input type="email" value=""
                                                    data-msg-required="Please enter your email address"
                                                    data-msg-email="Please enter a valid email address" maxlength="100"
                                                    class="controled" name="email" id="email" placeholder="EMAIL"
                                                    required>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-12 mb-40">
                                                <!-- <label>Message *</label> -->
                                                <textarea maxlength="5000" data-msg-required="Please enter your message"
                                                    rows="3" class="controled" name="message" id="message"
                                                    placeholder="MESSAGE" required></textarea>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-12 text-center-xxs">
                                                <input type="submit" value="SEND MESSAGE" class="button medium gray"
                                                    data-loading-text="Loading...">
                                            </div>
                                        </div>

                                    </form>
                                    <div class="alert alert-success hidden animated fadeIn" id="contactSuccess">
                                        <strong>Success!</strong> Your message has been sent to us.
                                    </div>

                                    <div class="alert alert-danger hidden animated shake" id="contactError">
                                        <strong>Error!</strong> There was an error sending your message.
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>

and

<?php 
if(isset($_POST['submit'])){
    $to = "bbbbb@gmail.com"; 
    $from = $_POST['email']; 
    $first_name = $_POST['name'];
    $subject = "Form submission";
    $message = $first_name . " " . " wrote the following:" . "\n\n" .             $_POST['message'];


    $headers = "From:" . $from;

   $mail_status= mail($to,$subject,$message,$headers);


    }

if ($mail_status) { ?>
    <script language="javascript" type="text/javascript">
        window.location.href = 'index.html#contactSuccess';
    </script>
<?php
}
else { ?>
    <script language="javascript" type="text/javascript">
                window.location.href = 'index.html#contactSuccess';
    </script>
<?php
}
?>

Put a name on your HTML submit button:

<input type="submit" name="submit" value="SEND MESSAGE" class="button medium gray"
                                                        data-loading-text="Loading...">

EDIT:

Firstly, put your final if inside the $_POST['submit'] if. You only ever do that on submission, and $mail_status is only ever set inside it:
Use $_GET params, rather than# ... those are use to scroll to an anchor that is named the same.
Convert index.html to index.php so you can control what DIV to display using PHP.

$result = $_GET['result'] will contain anything after the = in the URL with ?result=

So then

if($result == 'success') { 
?> <!-- Show Success Div --> <?php 
} else { 
?><!-- Show error DIV --> <?php

Here's your PHP with the changes to the redirect URL to use $_GET params and index.html convert to PHP:

<?php
if (isset($_POST['submit'])) {
    $to         = "bbbbb@gmail.com";
    $from       = $_POST['email'];
    $first_name = $_POST['name'];
    $subject    = "Form submission";
    $message    = $first_name . " " . " wrote the following:" . "\n\n" . $_POST['message'];


    $headers = "From:" . $from;

    $mail_status = mail($to, $subject, $message, $headers);
    if ($mail_status) {
?>
   <script language="javascript" type="text/javascript">
        window.location.href = 'index.php?result=success';
    </script>
<?php
    } else {
?>
   <script language="javascript" type="text/javascript">
                window.location.href = 'index.php?result=failed';
    </script>
<?php
    }

}
?>