Where is my POST() data going - php

Question

I'm developing a regular form in html using Jquery Ajax and PHP.
When i send the email via php function mail, i'm receiving the next email with the empty fields and I don't know why:
From:
E-Mail:
Message:
The code I'm using:
-PHP (sendMail.php):
<?php
if($_POST){
$name = $_POST['form_name'];
$email = $_POST['form_email'];
$content = $_POST['form_content'];
$from = 'Koke Contact Form';
$to = 'wheretosendit#gmail.com';
$subject = 'Someone is contacting';
$body = "From: $name\n E-Mail: $email\n Message:\n $content";
//send email
if (mail ($to, $subject, $body)) {
$result='<div class="alert alert-success">Thank You! I will be in touch</div>';
} else {
$result='<div class="alert alert-danger">Sorry there was an error sending your message. Please try again later</div>';
}
}
?>
-HTML
<form method = "post" id = "message" action = "sendMail.php">
<div class="row">
<div class = "yourinfo col-md-6">
<div class = "form-group" id = "nombre">
<label for = "input-name"> Tu nombre: </label>
<input id= "form-name" type= "text" class= "form-control gborder" name = "form-name">
</div>
<div class = "form-group " id = "email">
<label for = "input-email"> Tu email: </label>
<input id = "form-email" type= "email" class= "form-control gborder" name = "form-email">
</div>
</div>
<div class = "form-group col-md-6" id = "comment">
<label for = "input-content"> Mensaje: </label>
<textarea id = "form-content" class="form-control gborder" rows = "5" name = "form-content"></textarea>
</div>
</div>
<div class="form-group">
<div class = "text-center">
<input id="submit" name="submit" type="submit" value="ENVIAR" class="btn btn-primary">
</div>
</div>
</form>
-JQUERY
$('#message').submit(function() {
if($('#form-name').val() !== "" && $('#form-email').val() !== "" && $('#form-content').val() !== "") {
var data = {
name: $('#form-name').val(),
email: $('#form-email').val(),
content: $('#form-content').val()
};
$.ajax({
type: 'POST',
url: 'sendMail.php',
data: data,
success: function () {
$("html, body").animate({ scrollTop: 0 }, "slow");
$('#form-content').val("");
$('#form-name').val("");
$('#form-email').val("");
}
});
} return false;
});
As I said, I'm receiving the email but the From, E-mail and Message fields are empty. I've been fighting with this since 2 days ago.. I don't know how to fix it.
Thanks for your help!

Answer 1

You send from js array
var data = {
name: $('#form-name').val(),
email: $('#form-email').val(),
content: $('#form-content').val()
};
But in php you try to access to other fields
$name = $_POST['form_name'];
$email = $_POST['form_email'];
$content = $_POST['form_content'];
Ajax name and in php form_name, but must be name too.