From 892ddca71a4c2cd9e9af204bd00a891de0f0d12a Mon Sep 17 00:00:00 2001
From: Hazem Krimi <krimihazem1@gmail.com>
Date: Wed, 8 Nov 2023 19:07:54 +0100
Subject: [PATCH] Handle form without redirect

---
 assets/css/partials/contact-form.css | 29 +++++++++++++++++++------
 assets/js/partials/contact-form.js   | 32 ++++++++++++++++++++++++++--
 layouts/partials/contact-form.html   |  5 ++++-
 3 files changed, 56 insertions(+), 10 deletions(-)

diff --git a/assets/css/partials/contact-form.css b/assets/css/partials/contact-form.css
index 6634447..72936ca 100644
--- a/assets/css/partials/contact-form.css
+++ b/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;
 }
diff --git a/assets/js/partials/contact-form.js b/assets/js/partials/contact-form.js
index 11b87f8..3abd7e7 100644
--- a/assets/js/partials/contact-form.js
+++ b/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);
+    });
 });
diff --git a/layouts/partials/contact-form.html b/layouts/partials/contact-form.html
index 657bfc5..42a0699 100644
--- a/layouts/partials/contact-form.html
+++ b/layouts/partials/contact-form.html
@@ -17,5 +17,8 @@
     required
     rows="10"
   ></textarea>
-  <button type="submit">Submit</button>
+  <div>
+    <button type="submit">Submit</button>
+    <div id="submission-status"></div>
+  </div>
 </form>