Merge pull request #35 from ananyag309/main

Added functionality to contact us page

index.html

@@ -298,7 +298,7 @@ <h6>Sarah Johnson</h6>
                 <div class="row justify-content-center">
                     <div class="col-md-6">
                         <h2 class="mb-4">Contact Us</h2>
-                        <form>
+                        <form id="contactForm">
                             <div class="mb-3">
                                 <input type="text" class="form-control" id="name" placeholder="Name" required>
                             </div>
@@ -314,11 +314,31 @@ <h2 class="mb-4">Contact Us</h2>
                             <div class="d-flex justify-content-center">
                                 <button type="submit" class="btn btn-outline-primary">Contact</button>
                             </div>
+
+                            <!-- Confirmation message directly after the submit button -->
+                            <div class="d-flex justify-content-center">
+                                <div id="confirmationMessage" class="alert alert-success mt-3" style="display: none;">
+                                    Thank you! Your message has been sent successfully.
+                                </div>
+                            </div>
                         </form>
                     </div>
                 </div>
             </div>
         </section>
+
+        <script>
+            document.getElementById('contactForm').addEventListener('submit', function(event) {
+                event.preventDefault(); // Prevents the form from being submitted to a server
+
+                // Show the confirmation message
+                document.getElementById('confirmationMessage').style.display = 'block';
+
+                // Clear form fields (optional)
+                document.getElementById('contactForm').reset();
+            });
+        </script>
+
     </main>
 
     <!-- Footer Section -->