feat: Add Success Message to Newsletter Subscription Form

assets/js/script.js

@@ -37,4 +37,22 @@ window.addEventListener("scroll", function () {
     header.classList.remove("active");
     goTopBtn.classList.remove("active");
   }
+});
+
+document.getElementById('newsletterForm').addEventListener('submit', function (event) {
+  event.preventDefault(); // Prevent the default form submission behavior
+
+  // Simulate form submission (e.g., sending data to a server)
+  setTimeout(function () {
+    // Hide the form inputs and button
+
+    document.querySelector('.btn-primary').style.display = 'none';
+
+    // Show the success message
+    document.getElementById('successMessage').style.display = 'block';
+  // Hide the success message after 5 seconds
+  setTimeout(function () {
+    document.getElementById('successMessage').style.display = 'none';
+  }, 5000); // 5000 milliseconds = 5 seconds
+}, 500); // Simulate a delay for form processing
 });

index.html

@@ -1476,12 +1476,21 @@ <h3 class="h4 card-title">24/7 Support</h3>
               Authoritatively morph 24/7 potentialities with error-free partnerships.
             </p>
 
-            <form action="" class="newsletter-form">
-              <input type="email" name="email" required placeholder="Email Address" class="newsletter-input">
-
+            <form action="" class="newsletter-form" id="newsletterForm">
+              <input 
+                type="email" 
+                name="email" 
+                required 
+                placeholder="Email Address" 
+                class="newsletter-input"
+              >
               <button type="submit" class="btn btn-primary">Subscribe</button>
+              <!-- Success Message -->
+
             </form>
-
+<p id="successMessage" class="success-message" style="display: none; color: green; margin-top: 10px;">
+                Thank you for subscribing! We'll keep you updated with the latest news and offers.
+              </p>
           </div>
 
         </div>