My contact form is clearing after i click submit one time and only sends empty data to my email using emailjs

Question

So I am fairly new to web development and I am making a contact form for my personal website. I made a contact form before and it worked perfectly but I didnt like the way it looked so I made a nicer looking one and now it doesnt work when I click submit the first time but it still clears the form. It only sends an email if the form is empty and the email it sends is empty.

I'm confident my javascript is correct but im not sure why my form is acting this way.

HTML

            <form>
                <div class="row">
                    <div class="input-group">
                        <input type="text" id="name" required>
                        <label for="name"><i class="fa-solid fa-user"></i> Your Name</label>
                    </div>
                    <div class="input-group">
                        <input type="text" id="phone" required>
                        <label for="phone"><i class="fas fa-phone-square-alt"></i> Phone No.</label>
                    </div>
                </div>
               
                <div class="input-group">
                    <input type="email" id="email" required>
                    <label for="email"><i class="fas fa-envelope"></i> Email Address</label>
                </div>
                <div class="input-group">
                    <textarea id="message" rows="8" required></textarea>
                    <label for="message"><i class="fas fa-comments"></i> Your Message</label>
                </div>
                <button class="btn btn-primary" type="submit" onclick="sendMail()">Submit <i class="fas fa-paper-plane"></i></button>
            </form>
        </div>

JS

    var params = {
        name : document.getElementById("name").value, 
        phone : document.getElementById("phone").value ,
        email : document.getElementById("email").value, 
        message : document.getElementById("message").value, 
    }
    emailjs.send("service_xnukp8n", "template_mv0tglo", params).then(function (res){
        alert("Your form was sent successfully! " + res.status);
    })
    .catch((err) => console.log(err));
}

Any explanation or tips are appreciated!