javascript - Contact form not sending [html, php, js] -

i'm trying send e-mail using contact form can't work. it's outputing sent m not getting any. tested sending mail simple php form , i'm getting mail fine it's not server presume.

explanation highly appreciated.

<form id="contact-form" action="email.php" method="post" class="clearfix">                     <div class="contact-box-hide">                         <div class="col-sm-6">                             <input type="text"  class="form-control" id="first_name" name="first_name" required placeholder="first name">                             <span class="first-name-error"></span>                         </div>                         <div class="col-sm-6">                             <input type="text"  class="form-control" id="last_name" name="last_name" required placeholder="last name">                             <span class="last-name-error"></span>                         </div>                         <div class="col-sm-6">                             <input type="email" class="form-control"  id="contact_email" name="contact_email" required placeholder="email address">                             <span class="contact-email-error"></span>                         </div>                         <div class="col-sm-6">                             <input type="text"  class="form-control" id="subject" name="contact_subject" required placeholder="subject">                             <span class="contact-subject-error"></span>                         </div>                         <div class="col-sm-10">                             <textarea class="form-control" rows="5" id="message" name="message" required placeholder="message"></textarea>                             <span class="contact-message-error"></span>                         </div>                         <div class="col-sm-2">                             <button id="contact-submit" class="btn custom-btn col-xs-12" type="submit" name="submit"><a href=""></a><i class="fa fa-rocket"></i></button>                             <span id="contact-loading" class="btn custom-btn col-xs-12"> <i class="fa fa-refresh fa-spin"></i> </span>                         </div>                     </div><!-- /.contact-box-hide -->                     <div class="contact-message"></div>                  </form><!-- /#contact-form -->       

php

<?php if($_request['first_name'] == '' || $_request['contact_email'] == '' ||        $_request['message'] == ''): return "error"; endif; if (filter_var($_request['contact_email'], filter_validate_email)): $subject = 'contact form'; // subject of email  // receiver email address $to = 'mail@domain.com';  //change email address yours   // prepare header $header = 'from: '. $_request['first_name'] . " " .$_request['last_name'] . '       <'. $_request['contact_email'] .'>'. "\r\n"; $header .= 'reply-to:  '. $_request['first_name'] . " "  .$_request['last_name'] . ' <'. $_request['contact_email'] .'>'. "\r\n"; $header .= 'x-mailer: php/' . phpversion();   $message .= 'name: ' . $_request['first_name'] . " " .$_request['last_name'] . "\n"; $message .= 'email: ' . $_request['contact_email'] . "\n"; $message .= 'subject: ' . $_request['contact_subject'] . "\n"; $message .= 'message: '. $_request['message'];  // send contact information $mail = mail( $to, $subject , $message, $header );   echo 'sent'; else:  return "error"; endif;   ?> 

js

$('#contact-submit').click(function () {     $('.first-name-error, .last-name-error, .contact-email-error, .contact-subject-error, .contact-message-error').hide();     var first_nameval = $('input[name=first_name]').val();     var last_nameval = $('input[name=last_name]').val();     var emailreg = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-za-z\-0-9]+\.)+[a-za-z]{2,}))$/igm;     var emailval = $('#contact_email').val();     var contact_subjectval = $('input[name=contact_subject]').val();     var messageval = $('textarea[name=message]').val();      //validate      if (first_nameval == '' || first_nameval == 'first name *') {         $('.first-name-error').html('<i class="fa fa-exclamation"></i> first name required.').fadein();         return false;     }     if (last_nameval == '' || last_nameval == 'last name *') {         $('.last-name-error').html('<i class="fa fa-exclamation"></i> last name required.').fadein();         return false;     }     if (emailval == "" || emailval == "email address *") {          $('.contact-email-error').html('<i class="fa fa-exclamation"></i> email address required.').fadein();         return false;      } else if (!emailreg.test(emailval)) {          $('.contact-email-error').html('<i class="fa fa-exclamation"></i> invalid email address.').fadein();         return false;     }      if (contact_subjectval == '' || contact_subjectval == 'subject *') {         $('.contact-subject-error').html('<i class="fa fa-exclamation"></i> subject required.').fadein();         return false;     }     if (messageval == '' || messageval == 'message *') {         $('.contact-message-error').html('<i class="fa fa-exclamation"></i> please provide message.').fadein();         return false;     }      var data_string = $('.contact-form').serialize();      $('#contact-submit').hide();     $('#contact-loading').fadein();     $('.contact-error-field').fadeout();      $.ajax({         type: "post",         url: "email.php",         data: data_string,          //success         success: function (data) {              $('.contact-box-hide').slideup();             $('.contact-message').html('<i class="fa fa-check contact-success"></i><div>your message has been sent.</div>').fadein();         },         error: function (data) {              $('.btn-contact-container').hide();             $('.contact-message').html('<i class="fa fa-exclamation contact-error"></i><div>something went wrong, please try again later.</div>').fadein();         }      }) //end ajax call     return false; }); 

you message "sent" because didnt check whether mail sent or not, add additional "if-else" check mail sent, code shown below
there error in php, remove "." message(only once) else $message wont initialized. found error in js, have called class instead of id
corrected all, , updated code below

         <?php     if($_request['first_name'] == '' || $_request['contact_email'] == '' ||        $_request['message'] == ''):         return "error";     endif;     if (filter_var($_request['contact_email'], filter_validate_email)):         $subject = 'contact form'; // subject of email          // receiver email address         $to = 'mail@domain.com';  //change email address yours           // prepare header         $header = 'from: '. $_request['first_name'] . " " .$_request['last_name'] . '       <'. $_request['contact_email'] .'>'. "\r\n";         $header .= 'reply-to:  '. $_request['first_name'] . " "  .$_request['last_name'] . ' <'. $_request['contact_email'] .'>'. "\r\n";         $header .= 'x-mailer: php/' . phpversion();           $message= 'name: ' . $_request['first_name'] . " " .$_request['last_name'] . "\n";         $message.= 'email: ' . $_request['contact_email'] . "\n";         $message.= 'subject: ' . $_request['contact_subject'] . "\n";         $message.= 'message: '. $_request['message'];          // send contact information         $mail = mail( $to, $subject , $message, $header );         if($mail) {   // added if-else check             echo 'sent';         }         else         {             echo "mail couldnt send";         }     else:         return "error";     endif;      ?>  

now replace js code this(shown below)

       <script>             $('#contact-submit').click(function () {                 $('.first-name-error, .last-name-error, .contact-email-error, .contact-subject-error, .contact-message-error').hide();                 var first_nameval = $('input[name=first_name]').val();                 var last_nameval = $('input[name=last_name]').val();                 var emailreg = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-za-z\-0-9]+\.)+[a-za-z]{2,}))$/igm;                 var emailval = $('#contact_email').val();                 var contact_subjectval = $('input[name=contact_subject]').val();                 var messageval = $('textarea[name=message]').val();                  //validate                  if (first_nameval == '' || first_nameval == 'first name *') {                     $('.first-name-error').html('<i class="fa fa-exclamation"></i> first name required.').fadein();                     return false;                 }                 if (last_nameval == '' || last_nameval == 'last name *') {                     $('.last-name-error').html('<i class="fa fa-exclamation"></i> last name required.').fadein();                     return false;                 }                 if (emailval == "" || emailval == "email address *") {                      $('.contact-email-error').html('<i class="fa fa-exclamation"></i> email address required.').fadein();                     return false;                  } else if (!emailreg.test(emailval)) {                      $('.contact-email-error').html('<i class="fa fa-exclamation"></i> invalid email address.').fadein();                     return false;                 }                 if (contact_subjectval == '' || contact_subjectval == 'subject *') {                     $('.contact-subject-error').html('<i class="fa fa-exclamation"></i> subject required.').fadein();                     return false;                 }                 if (messageval == '' || messageval == 'message *') {                     $('.contact-message-error').html('<i class="fa fa-exclamation"></i> please provide message.').fadein();                     return false;                 }                  var data_string = $('#contact-form').serialize();     console.log(data_string);                 $('#contact-submit').hide();                 $('#contact-loading').fadein();                 $('.contact-error-field').fadeout();                  $.ajax({                     type: "post",                     url: "email.php",                     data: data_string,                      //success                     success: function (data) {                         console.log("response php is"+data);                         if(data == "sent")  //success                         {                             $('.contact-box-hide').slideup();                             $('.contact-message').html('<i class="fa fa-check contact-success"></i><div>your message has been sent.</div>').fadein();                         }                         else  // other sent error                         {                             $('.btn-contact-container').hide();                             $('.contact-message').html('<i class="fa fa-exclamation contact-error"></i><div>something went wrong, please try again later.</div>').fadein();                         }                      },                     error: function (data) {                         console.log("ajax failed");                         $('.btn-contact-container').hide();                         $('.contact-message').html('<i class="fa fa-exclamation contact-error"></i><div>something went wrong, please try again later.</div>').fadein();                     }                  }); //end ajax call                   return false;             });              </script>  

screenshot submitted