Update index.html

index.html

@@ -1387,15 +1387,43 @@ <h4>Legal</h4><br>
                 <section class="footer-col">
                   <h4>RAPIDOC Newsletter</h4><br>
                   <p>
-                    Subscribe to our newsletter for a weekly dose
-                    of news, updates, helpful tips, and
-                    exclusive offers.
+                      Subscribe to our newsletter for a weekly dose
+                      of news, updates, helpful tips, and
+                      exclusive offers.
                   </p>
                   <form action="#" class="subscribe-form">
-                    <input type="email" placeholder="Your email" required>
-                    <button type="submit">SUBSCRIBE</button>
+                      <input type="email" placeholder="Your email" required>
+                      <button type="submit">SUBSCRIBE</button>
                   </form>
-                </section>
+                  <p class="confirmation-message">Thank you for subscribing!</p>
+              </section>
+              <style>
+                .confirmation-message {
+                    display: none;
+                    color: green;
+                    margin-top: 10px;
+                }
+            </style>
+
+              <script>
+                  document.querySelector('.subscribe-form').addEventListener('submit', function(event) {
+                      event.preventDefault(); // Prevent the form from submitting in the traditional way
+
+                      // Here you would normally send the form data to the server using fetch or XMLHttpRequest
+                      // For demonstration purposes, we'll just show the confirmation message
+
+                      const confirmationMessage = document.querySelector('.confirmation-message');
+                      confirmationMessage.style.display = 'block'; // Show the confirmation message
+
+                      // Clear the input field
+                      this.querySelector('input[type="email"]').value = '';
+
+                      // Optionally, you can hide the confirmation message after a few seconds
+                      setTimeout(() => {
+                          confirmationMessage.style.display = 'none';
+                      }, 5000); // Hide after 5 seconds
+                  });
+                  </script>
             </div>
         </div>
     </div>