Javascript code popup doesn't stay active after onclick event

Question

JavaScript Noob

On the footer of the site I'm trying to display the contact info with a popup like form whenever I copied the code to new page or new device the button clicked opens the form but then the form closes immediately Is there a way to fix this?

<button class="open-button" onclick="openForm()">
            Contact Us</button>
            <div class="form-popup">
              <form class="form-container" id="myForm">
              <h1>info@indiepump.com</h1>
              <button type="button" class="btn-cancel" onclick="closeForm()">&times;</button>
              </form>
            </div>

            <script>
              function openForm() {
                //openForm().stopPropagation();
                document.getElementById("myForm").style.display = "flex";
              }
              function closeForm() {
                document.getElementById("myForm").style.display = "none";
              }
            </script>

And the CSS part:

.open-button {
  background-image: url(/usr/fsociety/indiepump_test/test_4/social_icons/email.png);
  background-repeat: no-repeat;
  background-color: transparent;
  padding: 17px 21px;
  border: none;
  cursor: pointer;
  position: fixed;
  justify-content: space-between;
  align-items: center;
  vertical-align: middle;
  text-align: right;
  text-decoration: none;
  font-size: 0.9rem;
  margin-left: 1rem;
  height: 27px;
  width: 121px;
  padding: 3px 3px;
  padding-left: 3px;
  color: red;
}

.form-popup {
  display: none;
  position: fixed;
  align-items: center;
  justify-content: space-between;
  vertical-align: middle;
  bottom: 2.5rem;
  left: 2rem;
  border: 1px solid red;
  border-radius: 10px;
  color: red;
  font-size: 0.7rem;
  z-index: 10000;
}

.form-container {
  display: flex;
  max-width: 300px;
  width: 300px;
  height: 50px;
  align-items: center;
  justify-content: space-between;
  vertical-align: middle;
  text-align: center;
  padding: 10px;
  background-color: #f9e3d5;
  z-index: 100000;
}

.btn-cancel {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  vertical-align: middle;
  text-align: center;
  width: 25px;
  height: 25px;
  border: none;
  background-color: transparent;
  color: red;
  font-size: 1.9rem;
  cursor: pointer;
}

I've already tried Google search solutions to no avail.

Also different methods from other helpful sites but every time I change something the button doesn't work at all.

Answer 1

After click on button the element with .form-popup class does not show because in your CSS you have set display:none :

.form-popup {
    display: none;
    ....
}

So you need to set display:flex or block for .form-popup too.

Here is working sample:

 function openForm() { document.getElementById("myForm").parentElement.style.display = "flex"; document.getElementById("myForm").style.display = "flex"; } function closeForm() { document.getElementById("myForm").style.display = "none"; document.getElementById("myForm").parentElement.style.display = "none"; }

 .open-button { background-image: url(/usr/fsociety/indiepump_test/test_4/social_icons/email.png); background-repeat: no-repeat; background-color: transparent; padding: 17px 21px; border: none; cursor: pointer; position: fixed; justify-content: space-between; align-items: center; vertical-align: middle; text-align: right; text-decoration: none; font-size: 0.9rem; margin-left: 1rem; height: 27px; width: 121px; padding: 3px 3px; padding-left: 3px; color: red; }.form-popup { display: none; position: fixed; align-items: center; justify-content: space-between; vertical-align: middle; bottom: 2.5rem; left: 2rem; border: 1px solid red; border-radius: 10px; color: red; font-size: 0.7rem; z-index: 10000; }.form-container { display: flex; max-width: 300px; width: 300px; height: 50px; align-items: center; justify-content: space-between; vertical-align: middle; text-align: center; padding: 10px; background-color: #f9e3d5; z-index: 100000; }.btn-cancel { display: flex; align-items: center; margin-bottom: 1rem; vertical-align: middle; text-align: center; width: 25px; height: 25px; border: none; background-color: transparent; color: red; font-size: 1.9rem; cursor: pointer; }

 <button class="open-button" onclick="openForm()"> Contact Us </button> <div class="form-popup"> <form class="form-container" id="myForm"> <h1>info@indiepump.com</h1> <button type="button" class="btn-cancel" onclick="closeForm()">&times;</button> </form> </div>

Answer 2

@Alireza Ahmadi

Reposting the new code...

 function openForm() { document.getElementById("myForm").parentElement.style.display = "flex"; document.getElementById("myForm").style.display = "flex"; } function closeForm() { document.getElementById("myForm").style.display = "none"; document.getElementById("myForm").parentElement.style.display = "none"; }

 .open-button { background-image: url(/usr/fsociety/indiepump_test/test_4/social_icons/email.png); background-repeat: no-repeat; background-color: transparent; padding: 17px 21px; border: none; cursor: pointer; position: fixed; justify-content: space-between; align-items: center; vertical-align: middle; text-align: right; text-decoration: none; font-size: 0.9rem; margin-left: 1rem; height: 27px; width: 121px; padding: 3px 3px; padding-left: 3px; color: red; }.form-popup { display: none; position: fixed; align-items: center; justify-content: space-between; vertical-align: middle; bottom: 2.5rem; left: 2rem; border: 1px solid red; border-radius: 10px; color: red; font-size: 0.7rem; z-index: 10000; }.div-form { display: flex; max-width: 300px; width: 300px; height: 50px; align-items: center; justify-content: space-between; vertical-align: middle; text-align: center; padding: 10px; background-color: #f9e3d5; z-index: 100000; }.btn-cancel { display: flex; align-items: center; margin-bottom: 1rem; vertical-align: middle; text-align: center; width: 25px; height: 25px; border: none; background-color: transparent; color: red; font-size: 1.9rem; cursor: pointer; }

 <button class="open-button" onclick="openForm()"> Contact Us</button> <div class="form-popup"> <div class="div-form" id="myForm"> <form class="form-container"> <h1>info@indiepump.com</h1> <button type="button" class="btn-cancel" onclick="closeForm()">&times;</button> </form> </div> </div>

Right now the button doesn't do anything the page only shows that is refreshing