/    Sign up×
Community /Pin to ProfileBookmark

Help with pop-up form

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: https://stephaniecadd.github.io./
HTML:
<!–Contact–>
<button onclick=”openForm()” class=”open-button”> Contact </button>
<div class=”form-popup” id=”myForm”>
<form action=”https://formspree.io/xvobopkd” method=”POST” class=”form-container”>
<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;
}
/*
Submit button */
.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;
}

to post a comment
JavaScript

4 Comments(s)

Copy linkTweet thisAlerts:
@sdawncauthorApr 02.2020 — link to website if it helps:

https://stephaniecadd.github.io./
Copy linkTweet thisAlerts:
@NachfolgerApr 02.2020 — @sdawnc#1616895

I won't lie, this question had me stumped for a minute. Take a look at the blue element in my screenshot (&lt;div class="btn cancel" onclick="closeForm()"&gt;). This blue element is the parent to all nodes after it, which means, any time anything is clicked, it calls closeForm(). I would suspect that you messed up a close tag and it caused that element to become the parent node to everything after it. This also explains why the prompt closes anytime you attempt to fill it out.

[upl-image-preview url=https://www.webdeveloper.com/assets/files/2020-04-02/1585864673-528142-image.png]

I don't have the time to figure out where the missing close tag is, but I trust that you are able to find it on your own.
Copy linkTweet thisAlerts:
@sdawncauthorApr 02.2020 — Wow!! Thank you so much! That's exactly what it was. I was totally stumped and couldn't figure it out so I'm really glad to get your help on that.
Copy linkTweet thisAlerts:
@sdawncauthorApr 02.2020 — @Nachfolger#1616899 Wow!! Thank you so much! That's exactly what it was. I was totally stumped and couldn't figure it out so I'm really glad to get your help on that.
×

Success!

Help @sdawnc spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 4.25,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...