Update member_registration.html

genomicsafrica · Jun 7, 2024 · fb3c35b · fb3c35b
1 parent 5c78d28
commit fb3c35b
Showing 1 changed file with 72 additions and 39 deletions.
diff --git a/member_registration.html b/member_registration.html
@@ -1,34 +1,57 @@
+---
+layout: default
+---
+
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Member Registration</title>
     <style>
-        .form {
-            display: flex;
-            flex-direction: column;
-            width: 300px;
-            margin: auto;
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #f4f4f4;
+            margin: 0;
+            padding: 20px;
+        }
+        .form-container {
+            background-color: #fff;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            max-width: 600px;
+            margin: 20px auto;
+        }
+        .form-container h1 {
+            text-align: center;
+            color: #333;
         }
         .form label {
+            display: block;
             margin-top: 10px;
+            color: #333;
         }
         .form input[type="text"],
         .form input[type="email"],
-        .form input[type="radio"] {
+        .form input[type="url"],
+        .form input[type="submit"] {
+            width: 100%;
+            padding: 10px;
             margin-top: 5px;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            box-sizing: border-box;
         }
         .form .container {
             display: flex;
             align-items: center;
+            margin-top: 10px;
         }
-        .form .container span {
-            margin-left: 5px;
+        .form .container label {
+            margin-right: 10px;
         }
         .form input[type="submit"] {
-            margin-top: 20px;
-            padding: 10px;
             background-color: #4CAF50;
             color: white;
             border: none;
@@ -40,34 +63,44 @@
     </style>
 </head>
 <body>
-    <h1>Member Registration</h1>
-    <script type="text/javascript">var submitted=false;</script>
-    <iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted) {window.location='/registered';}"></iframe>
-    <form class="form" target="hidden_iframe" onsubmit="submitted=true;" action="https://docs.google.com/forms/d/e/1FAIpQLSenCYMl_vX-L9XP4N1CwOPT5L89Pk_bICzKfPlqbhvfKHtgEw/viewform">
-        <label>Name</label>
-        <input name="entry.287414696" type="text" required />
-        <label>Email</label>
-        <input name="emailAddress" type="email" required />
-        <label>Institute</label>
-        <input name="entry.173623171" type="text" />
-        <label>Website</label>
-        <input name="entry.846401907" type="text" />
-        <label>Twitter</label>
-        <input name="entry.1785595554" type="text" />
-        <label>GitHub</label>
-        <input name="entry.804654090" type="text" />
-        <label>Interests</label>
-        <input name="entry.1840383585" type="text" />
-        <label>Show email on Members page?</label>
-        <div class="container">
-            <label>Yes
-                <input type="radio" checked="checked" name="entry.460495396" value="Yes">
-            </label>
-            <label>No
-                <input type="radio" name="entry.460495396" value="No">
-            </label>
-        </div>
-        <input type="submit" value="Register" />
-    </form>
+    <div class="form-container">
+        <h1>Member Registration</h1>
+        <script type="text/javascript">var submitted=false;</script>
+        <iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted) {window.location='/registered';}"></iframe>
+        <form class="form" target="hidden_iframe" onsubmit="submitted=true;" action="https://docs.google.com/forms/d/e/1FAIpQLSenCYMl_vX-L9XP4N1CwOPT5L89Pk_bICzKfPlqbhvfKHtgEw/viewform">
+            <label for="name">Name</label>
+            <input id="name" name="entry.287414696" type="text" required />
+
+            <label for="email">Email</label>
+            <input id="email" name="emailAddress" type="email" required />
+
+            <label for="institute">Institute</label>
+            <input id="institute" name="entry.173623171" type="text" />
+
+            <label for="website">Website</label>
+            <input id="website" name="entry.846401907" type="url" />
+
+            <label for="twitter">Twitter</label>
+            <input id="twitter" name="entry.1785595554" type="text" />
+
+            <label for="github">GitHub</label>
+            <input id="github" name="entry.804654090" type="text" />
+
+            <label for="interests">Interests</label>
+            <input id="interests" name="entry.1840383585" type="text" />
+
+            <label>Show email on Members page?</label>
+            <div class="container">
+                <label for="yes">Yes
+                    <input id="yes" type="radio" checked="checked" name="entry.460495396" value="Yes">
+                </label>
+                <label for="no">No
+                    <input id="no" type="radio" name="entry.460495396" value="No">
+                </label>
+            </div>
+
+            <input type="submit" value="Register" />
+        </form>
+    </div>
 </body>
 </html>