Show/Hide Text on Button Click

by nlafakis

HTML

<!DOCTYPE html>
<html>

  <head>
  </head>

  <body>
    <div class="form_container">
      <div class="header" id="header">
        <p>This is the header text for the form</p>
        <h3>THAT NEEDS TO DISAPPEAR</h3>
      </div>
      <div class="form">
        <!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
        <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
        <script>
          hbspt.forms.create({
            region: "na1",
            portalId: "3436466",
            formId: "223015bd-07c7-4a06-84f1-1056b6e50bb6",
            onFormSubmitted: function($form) {
              document.getElementById("header").style.display = "hidden";
            }

          });

        </script>
      </div>
    </div>
  </body>

</html>

CSS

@import url("https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i");

.form_container {
  margin: auto;
  height: 900px;
  width: 360px;
  background-color: #444;
  border-radius: 4px;
}

.form {
  height: 850px;
  width: 320px;
  margin: auto;
  border-radius: 2px;
  padding-top: 20px;
}

#header {
  padding-top: 3%;
  background-color: #018e54;
  width: 340px;
  margin: auto;
  height: 80px;
}

p {
  text-align: center;
  color: white;
  font-family: Montserrat, sans-serif;
  font-size: 1.2rem;
  line-height: 2rem;
  margin: 0px;
  padding: 0px;
}

h3 {
  color: white;
  text-align: center;
  font-family: Montserrat, sans-serif;
  letter-spacing: 1px;
  font-size: 1.2rem;
  line-height: 2rem;
  margin: 0px;
  padding: 0px;
}