Contact Form Diving Club HTML5 CSS3 jQuery

I have been asked for some help from my father who is a student at University currently in his 4th year studying Animation. He has asked me to design a website as part of his compulsary topic E & E which accounts for 40% of his year grade!! They have chosen to produce Television Music Videos and need a website to be designed to showcase what they do and services offered. I agreed to lend a helping hand where I can.

Trying to get a contact us form to work to send to a gmail account: "vastgsm@gmail.com" just as a test. Once it works with my gmail account I will change it to my domain email address: "contact@imademedia.co.uk". but and not having much luck!, can you help please?

I am new here, I have searched Google for the answer but not had much luck so far! However I did lots of results via Google here but none of the results have fixed the contact form.

The directory the websites resides in is NOT at the parent www level its with a subfolder within.

http://www.imademedia.co.uk/dc/Diving_Club.zip <------As you can see its NOT in the root of "/WWW" aka or "public_html"

The only errors that FireBug throws up from inside "Google Chrome is errors relating to Google maps.

I have tried different web hosting providers including HostSurfUk and JustHost with the contact form but that does not work either. I seeked tech support fro my hosts to see if there any kind of special pre-requists needed to get this working but there are none. I have tried upgrading the jQuery to the very latest 1.8.3 but that did not resolve the issue. I have tried a whole heap of contact forms too, but not much luck there either.

I even followed the advice to upgrade to AJAX contact form but no luck there either. I contacted Tech Support at Template Monster for some help with the contact form but they say as it is NOT one of their premium templates they can not offer any technical support. Google only churns up so much but a lot of it is unrelated linking to other non related issues.

To make life easier for those who can assist I will include as much details as I can to help trouble shoot my problem with a Non Working Contact-Form.
The template I have chosen as an example is a FREE template from Template-Monster and redistribuitable. Here is a link to the FREE template.

http://blog.templatemonster.com/2012/08/20/free-website-template-jquery-slider-diving-club/

Included in the template is 6 folders

Bat "MailHandler.php"

"css" "forms.css", "grid.css", "ie.css", "prettyPhoto.css", "reset.css", "style.css"

documentation "JustSliderManual.html"
-JustSlider_v.4.1
css "demo.css", "fonts.css", "idea.css", "ie.css", "prettyPhoto.css", "reset.css", "style.css"

images (too many to list here)

js "too many to list here" however, I did notice the document "forms.js" and "javascript.js" these two files are NOT in the main parent directory but in the documentation folder instead. I did place these into the main "/js" directory and edited the contacts.html file to include the script in the load up of the document but this made no difference either.

images (far too many images to list but not relevant to list them to troubleshoot this issue.

js "calendar-events.js", "fullcalendar.min", "html5.js", "jquery.cycle.all.min.js", "jquery.easing.1.3.js", "jquery.prettyPhoto.js", "jquery-1.7.1.min.js", "jquery-ui-1.8.17.custom.min.js", "PIE.htc", "PIE.php", "slider.js", "superfish.js", "tms-0.4.1.js"

screenshots

Also included is the essentials too.
home.html
about.html
gallery.html
calendar.html
contacts.html
members_info.html

The part I believe to be editable regions are these below. . .

contacts.html - These are at the TOP of my html.

    <script src="js/jquery-1.7.1.min.js"></script>
    <script src="js/superfish.js"></script>
    <script src="js/jquery.easing.1.3.js"></script>
    <script src="js/tms-0.4.1.js"></script>
    <script src="js/slider.js"></script>
    <script src="js/jquery.prettyPhoto.js"></script>
    <script src="js/forms.js"></script>
    <script src="http://malsup.github.com/jquery.form.js"></script>

I also added this snippet too

    <script>
            // wait for the DOM to be loaded
            $(document).ready(function() {
                // bind 'myForm' and provide a simple callback function
                $('#myForm').ajaxForm(function() {
                    alert("Thank you for your comment!");
                });
            });
        </script>

Also here is the Form HTML code.

    <!-- Form (start) -->
                            <div class="col-12">
                                <h3>Feedback</h3>
                                <form id="contact-form" method="post">
                                  <fieldset>
                                    <label class="name">
                                        <input type="text" value="Your Name" onfocus="if(this.value=='Your Name'){this.value=''}" onblur="if(this.value==''){this.value='Your Name'}">
                                    </label>
                                    <label class="phone">
                                        <input type="text" value="Telephone" onfocus="if(this.value=='Telephone'){this.value=''}" onblur="if(this.value==''){this.value='Telephone'}">
                                    </label>
                                    <label class="email">
                                      <input type="email" value="Email" onfocus="if(this.value=='Email'){this.value=''}" onblur="if(this.value==''){this.value='Email'}">
                                    </label>
                                    <label class="message">
                                      <textarea onfocus="if(this.value=='Message'){this.value=''}" onblur="if(this.value==''){this.value='Message'}">Message</textarea>
                                    </label>
                                    <div class="btns">
                                        <a class="button" onClick="document.getElementById('contact-form').reset()">Clear</a>
                                        <a class="button" onClick="document.getElementById('contact-form').submit()">Send</a>
                                    </div>
                                  </fieldset>
                                </form>
                            </div>
                        </div>
                    </article>
                </div>
            </section>
    <!-- Form (stop) -->

"MailHandler.php" -

    <?php
        $owner_email = "owner_email";
        $headers = 'From:' . $_POST["email"];
        $subject = 'A message from your site visitor ' . $_POST["name"];
        $messageBody = "";

I noticed some other templates and websites have this file "MailHandler.ashx" I tried adding this to the "bat" directory but this made no difference, still not working.

"forms.js" -

    (function($){
        $.fn.extend({
            forms:function(opt){
                if(opt===undefined)
                    opt={}
                this.each(function(){
                    var th=$(this),
                        data=th.data('forms'),
                        _={
                            errorCl:'error',
                            emptyCl:'empty',
                            invalidCl:'invalid',
                            successCl:'success',
                            successShow:'4000',
                            mailHandlerURL:'bin/contacts.html',
                            ownerEmail:'vastgsm@gmail.com',
                            stripHTML:true,
                            smtpMailServer:'localhost',
                            targets:'input,textarea',
                            controls:'a[data-type=reset],a[data-type=submit]',
                            validate:true,
                            rx:{

Also at the bottom of the "forms.js" I have included the following snippet below.

    })(jQuery)
    $(function(){
        $('#contact-form').forms({
            ownerEmail:'vastgsm@gmail.com'
        })
    })

Above is a snippet from the "forms.js" as you can see I edited the lines that I believe to be editable but this had no affect either.

Running out of ideas now, not sure what to do now. . . ? ? ?
confuzed.com brrrrrrrrr.......

Kindest regards,
Adam
vastgsm@gmail.com