Why Is AJAX Used on Contact Forms?

AJAX-enabled forms have suddenly become a must-have for websites of all sizes.

Here are the top reasons why AJAX is quickly becoming popular to use on contact forms:

• For a way better user experience
• A lightning-fast loading time and increased WordPress site speed
• To keep modals and popups containing your form open so you can display a follow-up action or message to boost sales
• To provide visual cues and assurance that the form is processing

My way how to create ajax contact form that works

There are many tutorials how to create WordPress sjax contact form submit, but in my case I have Access-Control-Allow-Origin issue with error 400, I spend a lot of time to find where is a problem.  

My HMTL code is:

<div class="col-md-9 col-12 col-ms-12">
    <form id="contact-form" method="POST" class="w-100 p-1 " action="<?= admin_url('admin-ajax.php'); ?>">
	<input
	name="name"
	type="text"
	class="form-control rounded-0 border-0 shadow-none my-1" placeholder="Your Name:" />			        
	<input
	name="email"
	type="email"
	class="form-control rounded-0 border-0 shadow-none my-2" placeholder="Your E-mail:" required />		        
	<textarea
	name="message"
	class="form-control rounded-0 border-0 shadow-none my-1" rows="3" placeholder="You question:" required></textarea>		
	<div class="mb-3">
	<button
	id="form-submit"
	type="submit"
	class="btn btn-primary px-3 rounded-0 border-0 shadow-none my-1">
	Send
	</button>
        </div>			       
    </form>
</div>

jQuery code is:

$('#contact-form').submit(function (e) {
    e.preventDefault();
    $formSubmit = $('#form-submit');
    var form = $(this);				
    var formdata = false;
    if (window.FormData){
        formdata = new FormData(form[0]);
    }
    formdata.append("action", "contact_form_mail");
    $.ajax({
	type: 'POST',
	dataType: 'type',
	url:  $(this).attr('action'),
	data: formdata ? formdata : form.serialize(),
	cache: false,
	ontentType : false,
	processData : false,
     ).always(function (data) {
         if (data.status !== 200) {
	   alert('Error: ' + data.statusText + ' (' + data.status + ')');
	        $formSubmit
	          .parent()
	          .html('<strong>Error, failed to send the message </strong>');
	  }
	   $formSubmit.parent().html('Thank you for contacting us!');
	    $("#contact-form")[0].reset();
     });
});

I do not know why, but when I create and post data as new FormData(form[0]); everything will work, but when I create post object, WordPress shows Error 400.

My functions.php code

add_action( 'wp_ajax_contact_form_mail', 'contact_form_mail_callback' );
add_action( 'wp_ajax_nopriv_contact_form_mail', 'contact_form_mail_callback' );
function contact_form_mail_callback() {
    var_dump($_POST);
    //do what you whant
    wp_die();  
}