added styling

static/css/index.css

@@ -536,4 +536,41 @@ header .navbar.animate {
 
 #contact .btn:focus {
     box-shadow: none !important;
+}
+
+#contact form .form-control {
+    background-color: var(--secondary-color);
+    color: var(--text-color);
+    border-radius: .7rem;
+    border: 1px solid var(--text-secondary-color);
+    box-shadow: 0px 8px 56px rgb(15 80 100 / 5%);
+}
+
+#contact-form-status {
+    position: fixed;
+    bottom: 10px;
+    right: 10px;
+    z-index: 1;
+    transform: translate3d(0, 0, 0);
+}
+
+#contact-form-status svg {
+    height: 18px;
+    width: 18px;
+}
+
+#contact-form-status button {
+    border-radius: 50%;
+    border: none;
+    background-color: white;
+    padding: 0.5rem;
+    margin-left: 0.5rem;
+    box-shadow: 0px 8px 56px rgb(15 80 100 / 5%);
+    font-size: .6rem !important;
+}
+
+#contact-form-status .alert {
+    border-radius: 0.5rem;
+    box-shadow: 0px 8px 56px rgb(15 80 100 / 5%);
+    padding: .5rem 1rem;
 }

static/js/contact.js

@@ -0,0 +1,45 @@
+async function handleFormspreeSubmit(event) {
+  event.preventDefault();
+  var form = document.getElementById("contact-form");
+  var data = new FormData(event.target);
+  fetch(event.target.action, {
+    method: form.method,
+    body: data,
+    headers: {
+      Accept: "application/json",
+    },
+  })
+    .then((response) => {
+      if (response.ok) {
+        contactAlert("success", "Thanks for your submission!");
+        form.reset();
+      } else {
+        response.json().then((data) => {
+          var errMessage = data.errors;
+          for (var i = 0; i < errMessage.length; i++) {
+            contactAlert("danger", errMessage[i].message);
+          }
+        });
+      }
+    })
+    .catch((error) => {
+      contactAlert("danger", "Oops! There was a problem submitting your form");
+    });
+}
+
+function contactAlert(type, message) {
+  var contactFormStatus = document.getElementById("contact-form-status");
+  var alert = `<div class="alert alert-${type} d-flex align-items-center" role="alert">
+                     <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Success:">
+                        <use xlink:href="#check-circle-fill" />
+                    </svg>
+                    <div>${message}</div>
+                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
+                </div>`;
+  contactFormStatus.innerHTML = alert;
+
+  // Remove alert after 3 seconds
+  setTimeout(function () {
+    contactFormStatus.innerHTML = "";
+  }, 3000);
+}