I do not have much experience with, especially with dealing with the client-side and I'm struggling when dealing with a form submission after the user clicks on the 'Send Message' button.

Here is the code snippet for the form:

<form onsubmit="sendMail()" method="post" id="contactForm" target="_blank">
    <label for="fullName">Full Name: </label><br>
    <input type="text" name="fullName" id="fullName" required><br>

    <label for="phoneNumber">Phone Number: </label><br>
    <input type="text" name="phoneNumer" id="phoneNumber" required><br>

    <label for="eMail">Email: </label><br>
    <input type="email" name="eMail" id="eMail" required><br>

    <label for="emailTitle">Subject: </label><br>
    <input type="text" name="emailTitle" id="emailTitle" required><br>

    <label for="userMessage">Message: </label><br>
    <textarea name="userMessage" id="userMessage" required></textarea><br>

    <button id="formSubmit" type="submit">Send Message</button>
</form>

Ideally, the sendMail() function would display a thank you message by modifying the DOM and then I would like it to wait for about 3 seconds before using the mailto happens. The issue is that the delay happens when I have target="_blank" on the form, but when I remove it, then the page simply refreshes. Any idea of why this would be happening?

Here's the code for the sendMail function.

function sendMail(){
    
    getFeedback(); 
    setTimeout(() => {
        let emailSubject = document.getElementById('emailTitle').value;  
        let emailBody = `${document.getElementById('fullName').value}\n${document.getElementById('phoneNumber').value}\n${document.getElementById('eMail').value}\n${document.getElementById('userMessage').value}`;
        document.location.href = `mailto:customersupport@sidekick.edu?subject=${encodeURIComponent(emailSubject)}&body=${encodeURIComponent(emailBody)}`;
    }, 3000);
    
}