Handle form without redirect

assets/css/partials/contact-form.css

@@ -7,18 +7,13 @@
 
 input,
 textarea,
-button {
+button,
+#submission-status {
   border: none;
   border-radius: 0.5625rem;
   color: var(--text);
 }
 
-button {
-  padding: 1rem 2.8rem;
-  background-color: var(--button-background);
-  color: var(--white);
-}
-
 input,
 textarea {
   padding: 1.2rem 1.9rem;
@@ -42,6 +37,26 @@ form textarea {
   width: 100%;
 }
 
+form div {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: start;
+}
+
+form button, form #submission-status {
+  padding: 1rem 2.8rem;
+  background-color: var(--button-background);
+  color: var(--white);
+}
+
+
+form #submission-status {
+  margin-left: auto;
+  width: auto;
+  display: none;
+}
+
 form button {
   cursor: pointer;
 }

assets/js/partials/contact-form.js

@@ -1,4 +1,32 @@
-document.querySelector('form').addEventListener('submit', (event) => {
+const form = document.querySelector('form');
+const submissionStatus = form.querySelector('#submission-status');
+
+form.addEventListener('submit', (event) => {
   event.preventDefault();
-  console.log(new FormData(event.target));
+
+  fetch(event.target.action, {
+    method: event.target.method,
+    body: new FormData(event.target),
+    headers: {
+      Accept: 'application/json',
+    },
+  })
+    .then((response) => {
+      if (response.ok) {
+        submissionStatus.innerHTML = 'Message sent successfully!';
+        submissionStatus.style.display = 'block';
+        form.reset();
+      }
+    })
+    .catch((error) => {
+      submissionStatus.innerHTML = 'Error sending message!';
+      submissionStatus.style.display = 'block';
+      console.error(error);
+    })
+    .finally(() => {
+      setTimeout(() => {
+        submissionStatus.innerHTML = '';
+        submissionStatus.style.display = 'none';
+      }, 5000);
+    });
 });

layouts/partials/contact-form.html

@@ -17,5 +17,8 @@
     required
     rows="10"
   ></textarea>
+  <div>
     <button type="submit">Submit</button>
+    <div id="submission-status"></div>
+  </div>
 </form>