✨ Added Success Message to Subscription Form

assets/css/style.css

@@ -1395,4 +1395,10 @@ body {
 
   .footer-top .container { grid-template-columns: 1fr 0.6fr 0.9fr 1fr; }
 
+}
+
+.success-message {
+  color: green;
+  font-size: 14px;
+  margin-top: 5px;
 }

assets/js/script.js

@@ -51,4 +51,20 @@ window.addEventListener("scroll", function () {
     header.classList.remove("active");
     backTopBtn.classList.remove("active");
   }
+});
+
+// Newsletter success message 
+document.getElementById("subscribe-form").addEventListener("submit", function(event) {
+  event.preventDefault(); // Prevent actual form submission
+
+  // Show the success message
+  document.getElementById("success-message").style.display = "block";
+
+  // Optionally, clear the input field
+  this.reset();
+
+  // Hide the message after a few seconds (optional)
+  setTimeout(() => {
+    document.getElementById("success-message").style.display = "none";
+  }, 3000);
 });

index.html

@@ -663,14 +663,16 @@ <h3 class="h3">
           </li>
 
           <li>
-            <form action="" class="footer-form">
+            <form action="" class="footer-form" id="subscribe-form">
               <input type="email" name="email_address" aria-label="email" placeholder="Email Address" required
                 class="input-field">
-
+          
               <button type="submit" class="btn btn-primary" aria-label="Submit">
                 <ion-icon name="chevron-forward-sharp" aria-hidden="true"></ion-icon>
               </button>
             </form>
+
+            <p id="success-message" class="success-message" style="display: none;">Thank you for subscribing!</p>
           </li>
 
           <li>