From fbe30d448c5a4dc6c35b0a3828af2139aecff5af Mon Sep 17 00:00:00 2001
From: Akshay <akshay.allen26200@gmail.com>
Date: Mon, 10 Feb 2025 10:27:43 +0530
Subject: [PATCH] feat: Add success message to contact form

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

diff --git a/assets/js/script.js b/assets/js/script.js
index 3aba540..7ad74c8 100644
--- a/assets/js/script.js
+++ b/assets/js/script.js
@@ -74,4 +74,26 @@ const navigateTab = function () {
   lastTabCard = this;
 }
 
-addEventOnelem(tabCard, "click", navigateTab);
\ No newline at end of file
+addEventOnelem(tabCard, "click", navigateTab);
+
+
+document.getElementById('contactForm').addEventListener('submit', function (event) {
+  event.preventDefault(); 
+
+
+  setTimeout(function () {
+
+    document.querySelector('input[name="name"]').value = '';
+    document.querySelector('input[name="email_address"]').value = '';
+    document.querySelector('input[name="subject"]').value = '';
+    document.querySelector('textarea[name="message"]').value = '';
+
+
+    document.getElementById('successMessage').style.display = 'block';
+
+
+    setTimeout(function () {
+      document.getElementById('successMessage').style.display = 'none';
+    }, 5000); 
+  }, 500); 
+});
\ No newline at end of file
diff --git a/index.html b/index.html
index 1ca90f0..f99f72a 100644
--- a/index.html
+++ b/index.html
@@ -873,18 +873,16 @@ <h2 class="h2 section-title has-underline">
 
           <div class="wrapper">
 
-            <form action="" class="contact-form">
-
+            <form action="" class="contact-form" id="contactForm">
               <input type="text" name="name" placeholder="Your Name" required class="input-field">
-
               <input type="email" name="email_address" placeholder="Your Email" required class="input-field">
-
               <input type="text" name="subject" placeholder="Subject" required class="input-field">
-
               <textarea name="message" placeholder="Your Message" class="input-field"></textarea>
-
               <button type="submit" class="btn btn-primary">Send Now</button>
-
+              <!-- Success Message -->
+              <p class="success-message" id="successMessage" style="display: none; color: green; margin-top: 10px; font-size: 14px;">
+                Your message has been sent successfully! We'll get back to you soon.
+              </p>
             </form>
 
             <ul class="contact-card">