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="[email protected]" (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 >
<button id="open">Click Me</button>
<div id="modal_container">
<div >
<div id="form-container">
<h1 >Connect With Me.</h1>
<p>I would love to respond to your queries and help you succeed. Feel free to contact me!</p>
<div >
<div >
<h3 >Send your request</h3>
<form>
<div >
<div >
<label>Name</label>
<input type="text" placeholder="Your Name" required>
</div>
<div >
<label>Phone</label>
<input type="text" placeholder="(888) 888-8888">
</div>
</div>
<div >
<div >
<label>Email</label>
<input type="email" placeholder="[email protected]" required>
</div>
<div >
<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 type="submit" value="Send" href="mailto:[email protected]">SEND</button>
</form>
</div>
<div >
<h3 >Reach Me</h3>
<table>
<tr>
<td>Email</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Location</td>
<td>Fort Stockton, TX</td>
</tr>
</table>
</div>
</div>
</div>
<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;
}
CodePudding user response：
You can try refering to this old question some time ago. Not sure if it still works, but hope it helps.
CodePudding user response：
This might not answer but in the future, if you want to send it to your email directly, you should check out https://formspree.io/ it is free, and works perfectly for me.