Foundation contact form with abide - php is not working - php

Question

I have tried everything to get this form to work but no luck.
I guess abide is working now but my php is not sending the email. I don't even think that my php is getting called anyway.
my code is below
form code
line 434
<form id="myForm" data-abide action="mail.php" method="post">
<div class="contactform">
<div class="item item-pair">
<label for="name">Full Name
<input type="text" name="name" id="name" class="small-input cat_textbox" required pattern="[a-zA-Z]+" maxlength="255">
<small class="error small-input">Name is required and must be a string.</small>
</label>
<label for="email">Email Address
<input type="text" name="email" id="email" class="small-input cat_textbox" maxlength="255" required >
<small class="error small-input">An email address is required.</small>
</label>
</div>
<div class="item">
<label>Comments</label>
<textarea cols="10" name="message" id="message" rows="4" class="cat_listbox" required ></textarea>
<small class="error">Please enter your comments</small>
</div>
<div class="item">
<input class="button alert small" type="submit" value="Submit" id="catwebformbutton">
</div>
</div>
</form>
javascript code
line 627
<script>
$('#myForm').submit(function(e) {
//prevent default form submitting.
e.preventDefault();
$(this).on('valid', function() {
var name = $("input#name").val();
var email = $("input#email").val();
var message = $("textarea#message").val();
//Data for reponse
var dataString = 'name=' + name +
'&email=' + email +
'&message=' + message;
//Begin Ajax call
$.ajax({
type: "POST",
url:"mail.php",
data: dataString,
success: function(data){
$('.contactform').html("<div id='thanks'></div>");
$('#thanks').html("<h2>Thanks!</h2>")
.append("<p>Dear "+ name +", I will get back to you as soon as I can ;)</p>")
.hide()
.fadeIn(1500);
},
}); //ajax call
return false;
});
});
</script>
html link
http://tayrani.com
Please help
<?php
$name = $_POST["name"];
$email = $_POST["email"];
$comments = $_POST["message"];
$msg = "
Name:$name
Email:$email
Comment:
$comments";
$to = "tayrani#hotmail.com";
$subject = "website email";
$message = $msg;
$headers = "form";
mail($to,$subject,$message,$headers);
?>

Answer 1

Thanks for the help I got it working. It turned out to be Hotmail that is not accepting emails for some reason. So, I replaced the Hotmail account with a Gmail account and it worked. I also updated my code with the following
html code for the form
<form id="myForm" data-abide="ajax" action="mail.php" method="post">
<div class="contactform">
<div class="item item-pair">
<label for="name">Full Name
<input type="text" name="name" id="name" class="small-input cat_textbox" required pattern="[a-zA-Z]+" maxlength="255">
<small class="error small-input">Name is required and must be a string.</small>
</label>
<label for="email">Email Address
<input type="email" name="email" id="email" class="small-input cat_textbox" maxlength="255" required >
<small class="error small-input">An email address is required.</small>
</label>
</div>
<div class="item">
<label>Comments</label>
<textarea cols="10" name="message" id="message" rows="4" class="cat_listbox" required ></textarea>
<small class="error">Please enter your comments</small>
</div>
<div class="item">
<input class="button alert small" type="submit" value="Submit" id="catwebformbutton" name="btnSubmit">
</div>
</div>
</form>
My javascript code including fixing the submitting twice issue
<script>
$('#myForm').submit(function(e) {
//prevent default form submitting so it can run the ajax code first
e.preventDefault();
$(this).on('valid', function() { //if the form is valid then grab the values of these IDs (name, email, message)
var name = $("input#name").val();
var email = $("input#email").val();
var message = $("textarea#message").val();
//Data for reponse (store the values here)
var dataString = 'name=' + name +
'&email=' + email +
'&message=' + message;
//Begin Ajax call
$.ajax({
type: "POST",
url:"mail.php", //runs the php code
data: dataString, //stores the data to be passed
success: function(data){ // if success then generate the div and append the the following
$('.contactform').html("<div id='thanks'></div>");
$('#thanks').html("<br /><h4>Thanks!</h4>")
.append('<p><span style="font-size:1.5em;">Hey</span> <span class="fancy">'+ name +'</span>,<br />I´ll get back to you as soon as I can ;)</p>')
.hide()
.fadeIn(1500);
},
error: function(jqXHR, status, error){ //this is to check if there is any error
alert("status: " + status + " message: " + error);
}
}); //End Ajax call
//return false;
});
});
</script>
<script>
$(document).foundation('abide', 'events'); // this was originally before the above code, but that makes the javascript code runs twice before submitting. Moved after and that fixes it.
</script>
Here is the php code
<?php
if(isset($_POST["name"])){
$name = $_POST["name"];
$email = $_POST["email"];
$comments = $_POST["message"];
$msg = "
Name: $name
Email: $email
Comments:
$comments";
$to = "h2hussein#gmail.com";
$subject = "Tayrani.com Contact Form";
$headers = "From: <$email>";
mail($to,$subject,$msg,$headers);
}else{
}
?>
I struggled for 3 days to get this done but thanks to my colleague/friend Adam as he really helped me with it.
I hope this is useful for other people.
Thanks,
Hussein
tayrani.com