From c5375903f3417499df30ac5920f06ed2fdc4270b Mon Sep 17 00:00:00 2001
From: Akshay <akshay.allen26200@gmail.com>
Date: Wed, 29 Jan 2025 12:53:06 +0530
Subject: [PATCH] Add success message to hero form

---
 assets/js/script.js | 26 +++++++++++++++++++++++++-
 index.html          |  8 +++-----
 2 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/assets/js/script.js b/assets/js/script.js
index da49fef..5f736b8 100644
--- a/assets/js/script.js
+++ b/assets/js/script.js
@@ -39,4 +39,28 @@ window.addEventListener("scroll", function () {
     header.classList.remove("active");
     backTopBtn.classList.remove("active");
   }
-});
\ No newline at end of file
+});
+
+// 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);
+  }
+});
diff --git a/index.html b/index.html
index 25e2fee..54917b1 100644
--- a/index.html
+++ b/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">