Tried to add the contact form --> js is not working atm

py/static/contact.js

@@ -0,0 +1,26 @@
+
+document.addEventListener('DOMContentLoaded', function() {
+  const contactForm = document.getElementById('contactForm');
+
+  if (contactForm) {
+    contactForm.addEventListener('submit', function(event) {
+      event.preventDefault(); // Prevent the form from submitting the traditional way
+
+      // Generate a random ticket number
+      const ticketNumber = Math.floor(Math.random() * 1000000); // Generates a random number between 0 and 999999
+
+      // Retrieve form values
+      const name = encodeURIComponent(document.getElementById('name').value);
+      const email = encodeURIComponent(document.getElementById('email').value);
+      const message = encodeURIComponent(document.getElementById('message').value);
+
+      // Construct the mailto link
+      const subject = `Support Ticket #${ticketNumber}`;
+      const body = `Name: ${name}%0AEmail: ${email}%0AMessage:%0A${message}`;
+      const mailtoLink = `mailto:example@example.com?subject=${subject}&body=${body}`;
+
+      // Open the default mail client
+      window.location.href = mailtoLink;
+    });
+  }
+});

py/static/styles.css

@@ -249,4 +249,45 @@ header a:hover {
 }
 .input button:hover {
     background-color: var(--input-button-hover-color);
-}
+}
+
+/* Form styling */
+form {
+    max-width: 600px;
+    margin: 0 auto;
+    background: var(--input-background-color); /* Use the input background color variable */
+    padding: 20px;
+    border-radius: 2em; /* Match the border radius used in other sections */
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
+}
+
+form label {
+    color: var(--text-color); /* Use the text color variable */
+    display: block; /* Ensure labels are block elements */
+    margin-bottom: 5px; /* Add some space below labels */
+}
+
+form input,
+form textarea {
+    color: var(--text-color); /* Use the text color variable */
+    background-color: var(--history-background-color); /* Use a contrasting background */
+    border: 1px solid var(--input-button-color); /* Use the input button color for borders */
+    border-radius: 4px;
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 15px;
+}
+
+form button {
+    background-color: var(--input-button-color); /* Use the input button color */
+    color: var(--background-color); /* Use the background color for text */
+    border: none;
+    padding: 10px 20px;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.3s; /* Smooth transition for hover effect */
+}
+
+form button:hover {
+    background-color: var(--input-button-hover-color); /* Use the hover color variable */
+}