Merge pull request #208 from ananyag309/default

Improved responsiveness to contact us page

index.html

@@ -512,7 +512,7 @@ <h2>Explore Popular Destinations</h2>
           <header class="form-head">
             <h2>Contact US</h2>
           </header>
-          <form action="https://formspree.io/f/mqkvkayy" method="POST">
+          <form id="contactForm" action="https://formspree.io/f/mqkvkayy" method="POST">
             <div class="name-form">
               <label for="name">Name : </label>
               <input id="name" type="text" name="name" required />
@@ -525,6 +525,15 @@ <h2>Contact US</h2>
           </form>
         </div>
       </section>
+
+      <!-- Add this custom popup HTML -->
+      <div id="confirmationPopup" class="popup" style="display: none;">
+        <div class="popup-content">
+          <h2>Thank You!</h2>
+          <p>Your message has been sent successfully. We will get back to you soon.</p>
+          <button onclick="closePopup()">Close</button>
+        </div>
+      </div>
     </main>
     <!-- ratings by user -->
     <section id="reviews" class="reviews-section">
@@ -692,5 +701,68 @@ <h2>Exclusive Deals and Offers!</h2>
         window.scrollTo({ top: 0, behavior: "smooth" }); // Smooth scroll to top
       };
     </script>
+    <!-- Add this at the end of the body, just before the closing </body> tag -->
+    <script>
+      document.getElementById('contactForm').addEventListener('submit', function(e) {
+        e.preventDefault();
+
+        // Submit the form data using fetch
+        fetch(this.action, {
+          method: 'POST',
+          body: new FormData(this),
+          headers: {
+            'Accept': 'application/json'
+          }
+        }).then(response => {
+          // Show the confirmation popup
+          document.getElementById('confirmationPopup').style.display = 'block';
+          // Reset the form
+          this.reset();
+        }).catch(error => {
+          console.error('Error:', error);
+          // Still show the confirmation popup even if there's an error
+          document.getElementById('confirmationPopup').style.display = 'block';
+        });
+      });
+
+      function closePopup() {
+        document.getElementById('confirmationPopup').style.display = 'none';
+      }
+    </script>
+    <style>
+      .popup {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.5);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: 1000;
+      }
+
+      .popup-content {
+        background-color: white;
+        padding: 20px;
+        border-radius: 5px;
+        text-align: center;
+      }
+
+      .popup-content h2 {
+        margin-top: 0;
+      }
+
+      .popup-content button {
+        margin-top: 10px;
+        padding: 5px 10px;
+        background-color: #007bff;
+        color: white;
+        border: none;
+        border-radius: 3px;
+        cursor: pointer;
+      }
+    </style>
   </body>
 </html>