Add success message to hero form on successful submission

assets/js/script.js

@@ -39,4 +39,28 @@ window.addEventListener("scroll", function () {
     header.classList.remove("active");
     backTopBtn.classList.remove("active");
   }
-});
+});
+
+// Hero form variables
+const heroForm = document.querySelector("[data-hero-form]");
+const heroFormInput = document.querySelector("[data-hero-form-input]");
+const successMessage = document.getElementById("hero-success-message");
+
+// Listen for form submit
+heroForm.addEventListener("submit", function (e) {
+  e.preventDefault(); // Prevent the default form submission
+
+  // Check if the form is valid
+  if (heroForm.checkValidity()) {
+    // Show success message
+    successMessage.style.display = "block";
+
+    // Clear the form input field
+    heroFormInput.value = "";
+
+    // Hide the success message after 3 seconds
+    setTimeout(() => {
+      successMessage.style.display = "none";
+    }, 3000);
+  }
+});

index.html

@@ -113,13 +113,11 @@ <h2 class="h1 hero-title">Make Chat Easy For Today's Digital Customers</h2>
               increase your sale.
             </p>
 
-            <form action="" class="hero-form">
-              <input type="email" name="email_address" placeholder="Enter Your Email" aria-label="Enter Your Email"
-                required class="input-field">
-
+            <form action="" class="hero-form" data-hero-form>
+              <input type="email" name="email_address" placeholder="Enter Your Email" aria-label="Enter Your Email" required class="input-field" data-hero-form-input>
               <button type="submit" class="btn btn-primary">Start Free Trial</button>
             </form>
-
+            <div id="hero-success-message" style="display: none; color: green;">Thank you! Your email has been successfully submitted.</div>
             <ul class="hero-list">
 
               <li class="hero-item">