Hello, I am having trouble understanding why my form isn’t popping up when I press the button on my website. It works when I press the contact link on the menu but doesn’t work when I press the button. It is also closing when trying to enter information. I used HTML, CSS and JavaScript. Please advise! Thanks. Website is:
HTML:
<!–Contact–>
<button onclick=”openForm()” class=”open-button”> Contact </button>
<div class=”form-popup” id=”myForm”>
<form action=”
<h2>Contact</h2>
<input type=”text” placeholder=”Name” name=”name” required>
<input type=”text” placeholder=”Phone Number” name=”phone”>
<input type=”text” placeholder=”Email” name=”email” required>
<input type=”text” placeholder=”Detailed Message” name=”message”>
<button type=”submit” class=”btn”>Submit</button>
<button type=”button” class=”btn cancel” onclick=”closeForm()”>Close</button>
</form>
</div>
JavaScript:
// These functions open and close the contact form
function openForm() {
document.getElementById(“myForm”).style.display = “block”;
}
function closeForm() {
document.getElementById(“myForm”).style.display = “none”;
}
//adds
CSS:
/*Contact form
/* Makes contact form button slide in from right on page load */
@keyframes movePopup {
from {right: -40vw;}
to {bottom: 1.75vw;}
}
/*Button for contact form
.open-button {
bottom: 1.25vw;
right: 1.25vw;
width: 15vw;
background-color: #80CFDF;
color: white;
cursor: pointer;
position: fixed;
-webkit-animation: movePopup 2s;
animation: movePopup 2s;
}
/*The popup form
.form-popup {
z-index: 20;
display: none;
position: fixed;
bottom: 6px;
right: 6px;
}
/* Form styling */
.form-container {
max-width: 49vw;
padding: 9px;
background-color: rgba(0, 0, 0, 0.8);
}
/* Input fields */
.form-popup input[type=text], .form-container input[type=password] {
float: right;
width: 100%;
padding: .65vw;
margin: .6vw 0 .6vw 0;
background: white;
border: solid azure;
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
font-size: 1vw;
}
/
.form-popup .btn {
background-color: rgba(0, 0, 0, 0.6);
color: white;
margin-bottom:1vh;
margin-left: 65px;
width: 250px;
}
/* Close button */
.form-popup .cancel {
background-color: rgba(0, 0, 0, 0.6);
color: white;
width: 250px;
}
/* Button styling */
button {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
letter-spacing: .3vw;
font-size: 1vw;
padding: .5vw .5vw;
cursor: pointer;
width: 100%;
height: auto;
}
/* Hover effect for buttons */
button:hover, .form-container .btn:hover{
color: white;
background-color: black;
-webkit-transition-duration: 1s;
transition-duration: 1s;
}
.form-container .cancel:hover{
color: white;
background-color: darkred;
-webkit-transition-duration: 1s;
transition-duration: 1s;
border-style: solid;
border-color: black;
}