How to make the "Submit" button on form send form details to designated email - html

Question

I have created a basic form, where the user has to input various contact details. My Send button however, does not work. Im trying to use HTML and CSS only for this form, but I'm not opposed to using JS if that's what is needed for this to be functional.
I have looked up various ways for a solution, but most things involve using php, which is not something I am able to use for this. As stated before, I'm really just trying to stick with HTML.
My button does have type="submit" and href="myemail#email.com" (I have my actual email in there). However, my button does not click, or at least it does not give the appearance of clicking nor does it send anything to my email. I also thought it was just a web browser issue, but I have tried both chrome and safari and no luck.
<section class="modal-section">
<button class="modal-button" id="open">Click Me</button>
<div class="modal-container" id="modal_container">
<div class="modal">
<div class="form-container" id="form-container">
<h1 class="form-header">Connect With Me.</h1>
<p>I would love to respond to your queries and help you succeed. Feel free to contact me!</p>
<div class="contact-box">
<div class="contact-left">
<h3 class="form-header3">Send your request</h3>
<form>
<div class="input-row">
<div class="input-group">
<label>Name</label>
<input type="text" placeholder="Your Name" required>
</div>
<div class="input-group">
<label>Phone</label>
<input type="text" placeholder="[phone]">
</div>
</div>
<div class="input-row">
<div class="input-group">
<label>Email</label>
<input type="email" placeholder="YourEmail#Email.com" required>
</div>
<div class="input-group">
<label>Subject</label>
<input type="text" placeholder="You're Hired!" required>
</div>
</div>
<label>Message</label>
<textarea rows="5" placeholder="You are so cool, please make my website cool too!" required></textarea>
<button class="form-button" type="submit" value="Send" href="mailto:johnsonisaiah13#yahoo.com">SEND</button>
</form>
</div>
<div class="contact-right">
<h3 class="form-header3">Reach Me</h3>
<table>
<tr>
<td>Email</td>
<td>Johnsonisaiah13#yahoo.com</td>
</tr>
<tr>
<td>Location</td>
<td>Fort Stockton, TX</td>
</tr>
</table>
</div>
</div>
</div>
<button class="modal-button" id="close">Close Me</button>
</div>
</div>
</section>
/* //////////////////////////////////////////////////////////////
//////////////// MODAL SECTION ///////////////////////
////////////////////////////////////////////////////////////// */
.modal-section {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
}
.modal-container {
background-color: rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 200vh; /* make 100 for smaller screen */
opacity: 0;
pointer-events: none;
}
.modal-button {
/* background-color: #39FF14;
color: #1F2022;
border-radius: 5px;
padding: 10px 25px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
font-size: 14px; */
background-color: white;
padding: 10px 18px;
font-weight: bold;
color: #1F2022;
display: inline-block;
margin: 30px 0;
border-radius: 5px;
}
.modal-button:hover {
background-color: #39FF14;
}
.modal {
background-color: white;
padding: 30px 50px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
width: 1000px;
max-width: 100%;
text-align: center;
}
.modal-header {
margin: 0;
}
.modal-text {
font-size: 14px;
opacity: 0.7;
}
.modal-container.show {
opacity: 1;
pointer-events: auto;
}
/* <!-- /////////////////////////////////////////////////////////////
///////////////////// CONTACT ME / HIRE ME /////////////////////////
///////////////////////////////////////////////////////////// --> */
.form-container {
width: 80%;
margin: 50px auto;
}
.contact-box {
background: white;
display: flex;
}
.contact-left {
flex-basis: 60%;
padding: 40px 60px;
}
.contact-right {
flex-basis: 40%;
padding: 40px;
background: #39FF14;
}
.form-header {
margin-bottom: 10px;
color: white;
}
.form-container p {
margin-bottom: 40px;
color: white;
}
.input-row {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.input-row .input-group {
flex-basis: 45%;
}
input {
width: 100%;
border: none;
border-bottom: 1px solid #39FF14;
outline: none;
padding-bottom: 5px;
}
textarea {
width: 100%;
border: 1px solid #39FF14;
outline: none;
padding: 10px;
box-sizing: border-box;
}
label {
margin-bottom: 6px;
display: block;
color: black;
}
.form-button {
background-color: #39FF14;
width: 100px;
border: none;
outline: none;
color: black;
height: 35px;
border-radius: 30px;
margin-top: 20px;
box-shadow: 0px 5px 15px 0px rgba(0, 14.5, 38.9, 48.6);
pointer-events: auto;
}
.form-header3 {
/* color: orange; */
font-weight: 600;
margin-bottom: 30px;
}
tr td:first-child {
padding-right: 20px;
}
tr td {
padding-top: 20px;
}

Answer 1

You can try refering to this old question some time ago. Not sure if it still works, but hope it helps.
html button to send email