templates/registration.html

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="/static/styles.css" rel="stylesheet">

<body>

<div class="logo-header"><img src="/static/logos/K-BUG.png" width="150px" /></div>

<div style="width:80%; margin: 0 auto;">
    <h1>Thank you for your interest in joining K-BUG for our Spring meeting!</h1>

    <p>
      Join us for the Kansas Blackboard User Group 2022 Spring Virtual Conference. The K-BUG Spring Symposium will be a virtual event on Thursday, March 3, 2022. For more information on the conference or the agenda, visit our <a href="https://community.blackboard.com/groups/events/item/60/94/1484" target="_blank">Blackboard Community page</a> (requires a community account to access).
    </p>
    
    <p>
        To register for the event, simply click the button below. We will ask you a few questions, and then we will give you your access information. There won't be an email, so please be sure to copy or write down the URL, username, and password you are provided.
    </p>
    
    <button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Sign Up</button>
</div>

<div id="id01" class="modal">
    
  <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
  <form class="modal-content" action="/register/" method="POST">
    <div class="container">
        <div class="logo-header"><img src="/static/logos/K-BUG.png" width="150px" /></div>
        <h1>K-BUG 2021 Spring Virtual Conference Registration</h1>

        <div><h2>Contact Information:</h2>
          <p><input type="text" placeholder="First name..." oninput="this.className = ''" name="fname"></p>
          <p><input type="text" placeholder="Last name..." oninput="this.className = ''" name="lname"></p>
          <p><input type="text" placeholder="E-mail..." oninput="this.className = ''" name="email"></p>
          <p><input type="text" placeholder="Institution name..." oninput="this.className = ''" name="institution"></p>
          <p><input type="text" placeholder="Job Title..." oninput="this.className = ''" name="title"></p>
        </div>

            <div class="clearfix">
        <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
        <button type="submit" class="signupbtn">Sign Up</button>
      </div>
    </div>
  </form>
</div>

<script>
// Get the modal
var modal = document.getElementById('id01');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>
</body>
</html>