AJAX Contact form - not working properly - php

Question

I've created a simple AJAX, Jquery, PHP contact form on my website with inputs: Name, Email and Message. The problem is that when you write an actual email into the email field the message never comes to my inbox. It works only when the Email input field contains 1 word with no # sign.
My HTML:
<p class="form">Name</p>
<input type="text" name="userName" id="userName">
<p class="form">Email</p>
<input id="userEmail" type="email" name="userEmail">
<p class="form">Message</p>
<textarea id="msg" name="msg"></textarea><button onClick="sendContact();"></button>
My JavaScript:
function sendContact() {
jQuery.ajax({
url: "contact_me.php",
data:'userName='+$("#userName").val()+'&userEmail='+
$("#userEmail").val()+'&msg='+
$("#msg").val(),
type: "POST",
success:function(){
sendSuccess();
},
error:function (){}
});
};
My PHP:
<?php
$to = "dusset#gmail.com";
$from = $_POST['userEmail'];
$name = $_POST['userName'];
$subject = $name . "has sent you a message from .design";
$message = $name . " wrote the following:" . "\n\n" . $_POST['msg'];
$headers = "From:" . $from;
mail($to,$subject,$message,$headers);?>
Any idea what could be the problem, please?

Answer 1

Try changing how you pass the data to Ajax. An example:
function sendContact() {
jQuery.ajax({
url: "contact_me.php",
data: { userName: $("#userName").val(), userEmail: $("#userEmail").val(), msg: $("#msg").val()},
type: "POST",
success:function(){
sendSuccess();
},
error:function (){}
});
};