🎉 Added Success Message to Newsletter Form

assets/css/style.css

@@ -1104,4 +1104,13 @@ body.nav-active { overflow: hidden; }
 
   .feature-list { grid-template-columns: 1fr 1fr; }
 
-}
+}
+
+.success-message {
+  color: white;  
+  font-size: 15px;
+  margin-top: 10px;
+  display: none;
+  text-align: center;
+  font-weight: 600;
+}

assets/js/script.js

@@ -140,4 +140,32 @@ const initAccordion = function (currentAccordion) {
 
 }
 
-for (let i = 0, len = accordions.length; i < len; i++) { initAccordion(accordions[i]); }
+for (let i = 0, len = accordions.length; i < len; i++) { initAccordion(accordions[i]); }
+
+// News letter succes message 
+document.getElementById("newsletterForm").addEventListener("submit", function(event) {
+  event.preventDefault(); // Prevent actual form submission
+
+  let emailInput = document.getElementById("newsletterEmail").value.trim();
+  let successMessage = document.getElementById("successMessage");
+
+  if (!validateEmail(emailInput)) {
+      alert("Please enter a valid email address.");
+      return;
+  }
+
+  // Show success message and reset the form
+  successMessage.style.display = "block";
+  this.reset();
+
+  // Hide message after 3 seconds
+  setTimeout(() => {
+      successMessage.style.display = "none";
+  }, 3000);
+});
+
+// Email validation function
+function validateEmail(email) {
+  let re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  return re.test(email);
+}

index.html

@@ -859,18 +859,22 @@ <h2 class="h2 section-title">
       <div class="footer-list">
 
         <p class="h4 footer-list-title">Our Newsletter</p>
-
+    
         <p class="footer-text">
-          Subscribe to our newsletter to get our news & deals delivered to you.
+            Subscribe to our newsletter to get our news & deals delivered to you.
         </p>
-
-        <form action="" class="input-wrapper">
-          <input type="email" name="email_address" placeholder="Email Address" required class="input-field">
-
-          <button type="submit" class="submit-btn">Join</button>
+
+        <form id="newsletterForm" class="input-wrapper">
+            <input type="email" name="email_address" id="newsletterEmail" placeholder="Email Address" required class="input-field">
+            <button type="submit" class="submit-btn">Join</button>
         </form>
-
-      </div>
+
+        <p id="successMessage" class="success-message" style="display: none;">
+            🎉 Thank you for subscribing! Check your inbox for updates.
+        </p>
+
+       </div>
+
 
     </div>
   </footer>