I have a simple HTML-PHP contact form with some CSS.

I desire to prevent the default behavior of the form which leads the user into a blank PHP page after submission, and, to have the form being submitted via XHR instead backendly.

With the following code, I have managed to party achieve what I desire, but I have the problem where input from input fields doesn't arrive to my inbox (only the HTML arrives).

What I have tried

let contactForm = document.querySelector("#contact_form")
contactForm.addEventListener("submit", function(event){
	event.preventDefault()
	var xhr = new XMLHttpRequest();
	xhr.open(contactForm.method, contactForm.action, true);
	xhr.setRequestHeader('Accept', 'application/json; charset=utf-8');
	xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
	xhr.send();
});

Current output pattern

Desired output pattern

Notes

• If I don't use this JavaScript than everything arrives (the output is as expected) so I believe the code I have tried has a mistake or is incomplete; I think I lack some limit on preventDefault() so to limit it not to prevent the "input transmission" part of the behavior it prevents.