added more modern styling to newsletter form

_pages/newsletter.html

@@ -11,28 +11,30 @@ permalink: /newsletter/
 
     <form id="newsletter-form">
         <div class="form-container">
+            <input type="text" class="form-control" id="firstName" name="firstName" required="" maxlength="80"
+                placeholder="">
             <label for="firstName" class="form-label">First Name *</label>
-            <input type="text" class="form-control" id="firstName" name="firstName" required="" maxlength="80">
         </div>
 
         <div class="form-container">
+            <input type="text" class="form-control" id="lastName" name="lastName" required="" maxlength="80"
+                placeholder="">
             <label for="lastName" class="form-label">Last Name *</label>
-            <input type="text" class="form-control" id="lastName" name="lastName" required="" maxlength="80">
         </div>
 
         <div class="form-container">
+            <input type="email" class="form-control" id="email" name="email" required="" maxlength="80" placeholder="">
             <label for="email" class="form-label">Email Address *</label>
-            <input type="email" class="form-control" id="email" name="email" required="" maxlength="80">
         </div>
 
         <div class="form-container">
+            <input type="text" class="form-control" id="company" name="company" maxlength="120" placeholder="">
             <label for="company" class="form-label">Company (optional)</label>
-            <input type="text" class="form-control" id="company" name="company" maxlength="120">
         </div>
 
         <div class="form-container">
+            <input type="text" class="form-control" id="role" name="role" maxlength="120" placeholder="">
             <label for="role" class="form-label">Role (optional)</label>
-            <input type="text" class="form-control" id="role" name="role" maxlength="120">
         </div>
 
         <div class="form-container">
@@ -49,7 +51,9 @@ permalink: /newsletter/
                 data-callback=captchaCallback></div>
         </div>
 
-        <button disabled type="submit" id="newsletter-form-submit-button">Submit</button>
+        <div class="form-container">
+            <button disabled type="submit" id="newsletter-form-submit-button">Submit</button>
+        </div>
     </form>
 
     <div id="subscribe-success-banner">
@@ -146,7 +150,7 @@ permalink: /newsletter/
                         showBanner("Error when trying to subscribe newsletter. Please try again later.", false);
                     },
                 });
-                
+
                 friendlyChallenge.autoWidget.reset();
             }
 

_sass/newsletter.scss

@@ -2,31 +2,63 @@ $info-input-text-size: 18px;
 $border-radius: 0.3em;
 
 #newsletter-form {
-    .form-container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
 
-        margin: 1em 0em 1em 0em;
+    .form-container {
+        min-width: 300px;
+        margin: 5px 20px;
+        position: relative;
 
         .form-label {
-            margin: 0.5em;
-            display: inline-block;
+            top: 0;
+            left: 0;
+            padding: 10px 0px;
+            color: gray;
             font-size: $info-input-text-size;
+            position: absolute;
+            transition: .5s;
         }
 
         .form-control {
             width: 100%;
-            margin: 0.5em;
-            border: 1px solid lightgray;
-            border-radius: $border-radius;
-            line-height: 2;
+            padding: 10px 0;
+            font-size: 16px;
+            color: black;
+            margin-bottom: 30px;
+            border: none;
+            border-bottom: 1px solid lightgray;
+            outline: none;
+            background: transparent;
         }
 
-        #newsletter-form-submit-button {
-            background-color: aqua;
+        .form-control:focus~.form-label,
+        .form-control:not(:placeholder-shown)~.form-label {
+            top: -20px;
+            left: 0;
+            font-size: $info-input-text-size - 4;
         }
 
         .privacy-policy-checkbox {
             margin: 0em 0em 0em 0.5em;
         }
+
+        #newsletter-form-submit-button {
+            margin: 1em 0em 1em 0.5em;
+            padding: 0.5em;
+            font-family: $font-title + 4;
+            width: 100px;
+            font-size: $info-input-text-size;
+            border: 1px solid lightgray;
+            border-radius: $border-radius;
+            color: white;
+            background-color: $col-sb-org-l1;
+        }
+
+        #newsletter-form-submit-button:hover {
+            background-color: $col-sb-org;
+        }
     }
 
     #frc-captcha {
@@ -41,22 +73,6 @@ $border-radius: 0.3em;
             background-color: $col-sb-org-l1;
         }
     }
-
-    #newsletter-form-submit-button {
-        margin: 1em 0em 1em 0.5em;
-        padding: 0.5em;
-        font-family: $font-title + 4;
-        width: 100px;
-        font-size: $info-input-text-size;
-        border: 1px solid lightgray;
-        border-radius: $border-radius;
-        color: white;
-        background-color: $col-sb-org-l1;
-    }
-
-    #newsletter-form-submit-button:hover {
-        background-color: $col-sb-org;
-    }
 }
 
 #subscribe-success-banner {