My form button needs to be clicked twice for the form to show error / success message

I made a contact form with html, css, JavaScript and with php mailer as backend that is sending form info to my e-mail and google spreadsheet.

My form submits successfully every time, but I need to click the submit button twice for the success message.

the Git repository with the full code:
https://github.com/FranjoDumanovsky/Bar-crawl-zagreb

main JS file

Appreciate every little help.

Submit Function

function submitForm() {
if (nameInputValidation && emailInputValidation && numberOfPeopleValidation && phoneInputValidation && isChecked && foundAboutUsValidation) {
submissionAlert.classList.add("show");
successMessage.classList.add("show");
const scriptURL = "[GOOGLE-SCRIPT]";
fetch(scriptURL, { method: "POST", body: new FormData(form) })
.then(successMessage.classList.add("show"))
.catch(errorMessage.classList.add("show"));
// Send data to PHP script with AJAX request
var xhr = new XMLHttpRequest();
xhr.open("POST", "./phpmailer/index.php", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
successMessage.classList.add(".show");
} else {
errorMessage.classList.add(".show");
}
};
// Get form data
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var message = document.getElementById("message").value;
var dateFor = document.getElementById("date-for").value;
var phoneNumber = document.getElementById("phoneNumber").value;
var numberOfPeople = document.getElementById("numberOfPeople").value;
var foundAboutUs = document.getElementById("foundAboutUs").value;
xhr.send(
"name=" +
name +
"&email=" +
email +
"&message=" +
message +
"&phoneNumber=" +
phoneNumber +
"&date-for=" +
dateFor +
"&numberOfPeople=" +
numberOfPeople +
"&foundAboutUs=" +
foundAboutUs
);
phoneInput.parentElement.style.display = "none";
} else {
checkInputs();
}
}

HTML Form without unnecessary inputs

<form name="contact-form" class="contact" id="contact-form" onsubmit="event.preventDefault(); submitForm();">
<div class="form-group">
<button type="submit" name="submit" value="Send Message" class="btn btn-primary" id="submit-btn">Submit</button>
</div>
</form> 

I have tried many different things such as

-> Putting onSubmit="event.preventDefault(); submitForm();" on form
-> putting onClick="onSubmit('event)" on button element, having event prevent default on function.
-> Event listener having anonymous function handling the submit code
->Event listener for button having Click event, or for Form having onSubmit event.

When I made it so it needs to be clicked once, the error & success messages wouldn't show because the prevent default wouldn't work i guess.
In case it didn't refresh the page, the button would have to be clicked twice

I tried using some stackOverflow anwsers, but I haven't had any luck with it. It either has to be clicked twice, or the preventDefault doesn't work and the page refreshes before error / success messages.

When I check your main JS file I see that you implemented the fetch() request wrong.

Here is your code on line 185:

fetch(scriptURL, { method: "POST", body: new FormData(form) })
.then(successMessage.classList.add("show"))
.catch(errorMessage.classList.add("show"));

Here is how you should implement fetch:

fetch(scriptURL, { method: "POST", body: new FormData(form) })
.then(response => {
if(response.ok) {
successMessage.classList.add("show");
} else {
throw new Error('Form submission failed');
}
})
.catch(error => {
errorMessage.classList.add("show");
});

with the event.preventDefault() function added to the top of your submitForm() function.

You've also wrongly implemented the classList.add() on line 195 and 197. Here is your code:

        successMessage.classList.add(".show");
errorMessage.classList.add(".show");

Remove the dots before the "show".

Next, you've created an XMLHttpRequest and defined its onreadystatechange function. But you've done this after you've opened the request. The onreadystatechange function might not work as expected because of this. You should rearrange the order from this

xhr.open("POST", "./phpmailer/index.php", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function () {...};

to this

xhr.onreadystatechange = function () {...};
xhr.open("POST", "./phpmailer/index.php", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

See if these changes can solve your issue.