fix(footer): prevent newsletter form reload, add validation, and stop input expanding on focus

assets/js/newsletter.js

@@ -0,0 +1,69 @@
+// Newsletter subscription form handler
+document.addEventListener('DOMContentLoaded', function() {
+  const form = document.getElementById('newsletter-form');
+  const emailInput = document.getElementById('newsletter-email');
+  const messageDiv = document.getElementById('newsletter-message');
+
+  if (!form || !emailInput || !messageDiv) return;
+
+  /**
+   * Display a message to the user
+   * @param {string} text - Message text to display
+   * @param {boolean} isError - Whether this is an error message
+   */
+  function showMessage(text, isError) {
+    messageDiv.textContent = text;
+    messageDiv.style.color = isError ? '#ff6b6b' : '#00d3a9';
+    messageDiv.setAttribute('role', isError ? 'alert' : 'status');
+    messageDiv.setAttribute('aria-live', 'polite');
+  }
+
+  /**
+   * Clear the message display
+   */
+  function clearMessage() {
+    messageDiv.textContent = '';
+    messageDiv.removeAttribute('role');
+    messageDiv.removeAttribute('aria-live');
+  }
+
+  /**
+   * Validate email format
+   * @param {string} email - Email address to validate
+   * @returns {boolean} Whether the email is valid
+   */
+  function isValidEmail(email) {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+  }
+
+  // Clear message when user starts typing
+  emailInput.addEventListener('input', clearMessage);
+
+  // Handle form submission
+  form.addEventListener('submit', function(e) {
+    e.preventDefault();
+
+    const email = emailInput.value.trim();
+
+    // Check if email is empty
+    if (!email) {
+      showMessage('Please enter your email address', true);
+      emailInput.focus();
+      return false;
+    }
+
+    // Validate email format
+    if (!isValidEmail(email)) {
+      showMessage('Please enter a valid email address', true);
+      emailInput.focus();
+      return false;
+    }
+
+    // Success message
+    showMessage('Thank you for subscribing!', false);
+    emailInput.value = '';
+
+    return false;
+  });
+});

assets/scss/_footer_project.scss

@@ -263,17 +263,11 @@
     border-radius: 0.5rem;
     outline: none;
     color: $white;
+    transition: border-color 0.2s ease;
 
     &:focus {
-      padding: 1rem;
-      margin-right: 0.25rem;
-      width: 24rem;
-      height: 3.5rem;
-      border: 0.5px solid $white;
-      background: transparent;
-      border-radius: 0.5rem;
+      border: 1px solid $white;
       outline-width: 0;
-      color: $white;
     }
   }
 
@@ -286,6 +280,35 @@
     border: none;
   }
 
+  .newsletter-container {
+    display: flex;
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .newsletter-input-row {
+    display: flex;
+    align-items: center;
+  }
+
+  .newsletter-message {
+    margin-top: 0.5rem;
+    font-size: 0.9rem;
+    min-height: 1.5rem;
+  }
+
+  .visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
   .footer-hr {
     width: 100%;
     color: $white;

layouts/partials/footer.html

@@ -62,17 +62,33 @@ <h5 class="footer-h5"><a href="{{ .url }}">{{ .name }}</a></h5>
       </div>
       <div class="row footer-info2 subscribe">
         <div class="footer-end">
-          <form name="contactform">
+          <form name="contactform" id="newsletter-form" aria-label="Newsletter subscription form">
             <div>
               <p>
                 Subscribe to our Newsletter
               </p>
-              <input class="footer-input" type="email" placeholder="Email Address" />
-              <button class="footer-button" title="Subscribe" type="submit">Subscribe</button>
+              <div class="newsletter-container">
+                <div class="newsletter-input-row">
+                  <label for="newsletter-email" class="visually-hidden">Email Address</label>
+                  <input 
+                    class="footer-input" 
+                    id="newsletter-email" 
+                    type="email" 
+                    placeholder="Email Address" 
+                    aria-required="true"
+                    aria-describedby="newsletter-message"
+                    required 
+                  />
+                  <button class="footer-button" title="Subscribe" type="submit">Subscribe</button>
+                </div>
+                <div id="newsletter-message" class="newsletter-message" aria-live="polite"></div>
+              </div>
             </div>
           </form>
         </div>
       </div>
+      {{ $newsletter := resources.Get "js/newsletter.js" }}
+      <script src="{{ $newsletter.Permalink }}" defer></script>
     </div>
   </div>
   <hr class="footer-hr" />