HTML5 / PHP mailer function w/ javascript

Hello everyone,
Its a pleasure to be here … This is my first post . .

I’m pretty new in the web developping process. escpecially in Php. here is my question . .
I’ll be quite honest, I have purchased an html5 template for a my website, to my knowledge I have done all modification to it, text, css, scripts, etc . . although, I’m stuck with php in my contact form.
The reason to it is that there is Javascript involved. I have so many online tutorials on how to write a php mailer function, but non of them work and I’ll be honest I’m stuck with it.

So, dont wont someone to write me a code . . although, I’ll be greatful if someone will explain me what and how should I connect all those files in between them.
I will show you what I got . .

[B][SIZE=5]This is my Html Index.html() i will later save it as a .php[/SIZE][/B]

[code]
<form class=”fixed” id=”contact-form” name=”contact-form” method=”post” action=””>

<fieldset>

<div id=”formstatus”></div>

<input class=”span8″ id=”name” type=”text” name=”name” value=”” placeholder=”Your name”>

<input class=”span8″ id=”email” type=”text” name=”email” value=”” placeholder=”email”>

<input class=”span8″ id=”subject” type=”text” name=”subject” value=”” placeholder=”subject”>

<textarea class=”span8″ id=”message” name=”message” rows=”7″ cols=”25″ placeholder=”message”></textarea>

<input id=”submit” type=”submit” name=”submit” value=”submit”>

</fieldset>
</form>
[/code]

[B][SIZE=5]Here is the css for alerts / elements.css()[/SIZE][/B]

[code]
.alert {
padding: 13px 15px;
border: 1px solid #d1d1d1;
border-radius: 3px;
-webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
margin-bottom: 30px;
background-color: #f8f8f8;
}

.alert i {
position: relative;
top: 1px;
margin-right: 7px;
font-size: 16px;
}

.alert.info {
border: 1px solid #86cde3;
background-color: #cce9f2;
color: #3194b1;
}

.alert.success {
border: 1px solid #b3cda1;
background-color: #d8f1c6;
color: #749958;
}

.alert.error {
border: 1px solid #e1a1a1;
background-color: #f9d9d9;
color: #b55454;
}

.alert.warning {
border: 1px solid #d1c9ae;
background-color: #fbf4dd;
color: #978c68;
}
[/code]

[B][SIZE=5]Here is the layout.css[/SIZE][/B]

[code]
#contact { padding-top: 120px; }

/* Contact Info */

.contact-info {
list-style: none;
margin-bottom: 60px;
}

.contact-info li {
position: relative;
padding-left: 50px;
margin-bottom: 25px;
}

.contact-info li:last-child { margin-bottom: 0; }
.contact-info li a { color: #5f5f5f; }

.contact-info li i {
position: absolute;
top: 0;
left: 0;
display: inline-block;
width: 32px;
margin-right: 20px;
background-color: #252525;
color: #fff;
font-size: 14px;
line-height: 32px;
text-align: center;
}

#contact-form {
overflow: hidden;
margin: 60px 0 70px 0;
}

#contact-form fieldset { }

label.validation-error { color: #b55454; }

input.validation-error,
textarea.validation-error,
select.validation-error { border: 1px solid #a1a1a1; }

#contact-form #formstatus {}

#contact-form input[type=”text”],
#contact-form textarea {
padding: 20px;
border: none;
border-bottom: 1px solid #252525;
color: #5f5f5f;
resize: none;
}

#contact-form input[type=”submit”] {
border: 1px solid #252525;
margin-top: 60px;
background-color: transparent;
color: #252525;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}

#contact-form input[type=”submit”]:hover {
background-color: #252525;
color: #fff;
}
[/code]

[SIZE=5][B]and Here is my java script /script.js[/B][/SIZE]

[code]
function handleContactForm() {

if(typeof $.fn.validate != ‘undefined’){

$(‘#contact-form’).validate({
errorClass: ‘validation-error’, // so that it doesn’t conflict with the error class of alert boxes
rules: {
name: {
required: true
},
email: {
required: true,
email: true
},
subject: {
required: true
},
message: {
required: true
}
},
messages: {
name: {
required: “Field is required!”
},
email: {
required: “Field is required!”,
email: “Please enter a valid email address”
},
subject: {
required: “Field is required!”
},
message: {
required: “Field is required!”
}
},
submitHandler: function(form) {
var result;
$(form).ajaxSubmit({
type: “POST”,
data: $(form).serialize(),
url: “_layout/php/send.php”,
success: function(msg) {

if (msg == ‘OK’) {
result = ‘<div class=”alert success”><i class=”fa fa-check-circle-o”></i>The message has been sent!</div>’;
$(‘#contact-form’).clearForm();
} else {
result = ‘<div class=”alert error”><i class=”fa fa-times-circle”></i>’ + msg + ‘</div>’;
}
$(“#formstatus”).html(result);

},
error: function() {

result = ‘<div class=”alert error”><i class=”fa fa-times-circle”></i>There was an error sending the message!</div>’;
$(“#formstatus”).html(result);

}
});
}
});

}

}
[/code]

I will be super greatfull if someone can help me out . . .

Regards,
Eugene

Also in #PHP _↴