form post is now done in javascript, added a confirmation when a mess…

…age has been sent
aurelienLavanchy · Sep 26, 2024 · 004198b · 004198b
1 parent 5a69d27
commit 004198b
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 10 deletions.
diff --git a/contact.html b/contact.html
@@ -20,7 +20,7 @@
       </nav>
       <h1>Contact</h1>
       <section class="contact">
-        <script src="./form.js" async></script>
+        <script src="./main.js" async></script>
         <aside class="no-selection">
           <h2>Coordonnées</h2>
           <p class="email">
@@ -53,11 +53,7 @@ <h2>Coordonnées</h2>
           </ul>
         </aside>
         <article>
-          <form
-            id="contact-form"
-            action="https://formspree.io/f/xgvwjjav"
-            method="post"
-          >
+          <form id="contact-form">
             <h2 class="no-selection">Envoyer un message</h2>
             <noscript
               ><b class="noscript"
@@ -85,7 +81,7 @@ <h2 class="no-selection">Envoyer un message</h2>
                 name="subject"
                 placeholder=". . ."
                 maxlength="150"
-                minlength="8"
+                minlength="6"
                 required
               />
               <span class="field-info subject">Max. 150 caractères</span>
@@ -103,6 +99,9 @@ <h2 class="no-selection">Envoyer un message</h2>
               <span class="field-info message">Max. 500 caractères</span>
             </label>
             <button type="submit">Envoyer</button>
+            <div id="message-sent" class="no-selection hidden">
+              Message envoyé !
+            </div>
           </form>
         </article>
       </section>

diff --git a/form.js → main.js b/form.js → main.js
@@ -6,6 +6,7 @@ const messageFieldLimit = 500;
 const messageForm = document.querySelector("#contact-form");
 const emailButton = document.querySelector("#email");
 const emailCopied = document.querySelector("#email-copied");
+const emailSentMessage = document.querySelector("#message-sent");
 
 // Logic
 function checkFieldLimit(field, limit) {
@@ -37,17 +38,41 @@ function checkForErrors(field, fieldCheck, limit) {
   }
 }
 
+async function sendData(name, subject, message) {
+  const formData = new FormData();
+
+  formData.append("name", name);
+  formData.append("subject", subject);
+  formData.append("message", message);
+
+  try {
+    const response = await fetch("https://formspree.io/f/xgvwjjav", {
+      method: "POST",
+      body: formData,
+    });
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+function resetForm() {
+  messageForm.reset();
+}
+
 function handleSubmit() {
   const nameField = {
     content: document.querySelector("#name").value.length,
+    textContent: document.querySelector("#name").value,
     limit: nameFieldLimit,
   };
   const subjectField = {
     content: document.querySelector("#subject").value.length,
+    textContent: document.querySelector("#subject").value,
     limit: subjectFieldLimit,
   };
   const messageField = {
     content: document.querySelector("#message").value.length,
+    textContent: document.querySelector("#message").value,
     limit: messageFieldLimit,
   };
 
@@ -104,10 +129,30 @@ function handleSubmit() {
   for (const item of fields) {
     checkForErrors(item.field, item.fieldCheck, item.limit);
   }
+
+  const allChecksPassed =
+    !nameFieldCheckFailed &&
+    !subjectFieldCheckFailed &&
+    !messageFieldCheckFailed;
+
+  if (allChecksPassed) {
+    sendData(
+      nameField.textContent,
+      subjectField.textContent,
+      messageField.textContent
+    );
+    resetForm();
+    emailSentMessage.classList.remove("hidden");
+    emailSentMessage.classList.add("shown");
+    setTimeout(() => {
+      emailSentMessage.classList.remove("shown");
+      emailSentMessage.classList.add("hidden");
+    }, 2400);
+  }
 }
 
 messageForm.addEventListener("submit", (e) => {
-  /* e.preventDefault(); */
+  e.preventDefault();
   handleSubmit();
 });
 

diff --git a/style.css b/style.css
@@ -171,6 +171,7 @@ object[type="application/pdf"] {
     display: flex;
     flex-direction: column;
     width: 100%;
+    position: relative;
 
     input {
       padding: 0 6px;
@@ -181,6 +182,8 @@ object[type="application/pdf"] {
       padding: 2px 8px;
       align-self: center;
       font-family: "IBM Plex Sans";
+      cursor: pointer;
+      z-index: 1;
     }
 
     label {
@@ -225,8 +228,7 @@ object[type="application/pdf"] {
 #email-copied {
   margin-left: 8px;
   transition: opacity 0.3s ease;
-  position: relative;
-  top: 0.375rem;
+  vertical-align: middle;
 }
 
 p.email {
@@ -240,6 +242,12 @@ h1 {
 
 .hidden {
   opacity: 0;
+  z-index: -1;
+}
+
+.shown {
+  z-index: 2;
+  opacity: 1;
 }
 
 footer {
@@ -251,3 +259,13 @@ footer {
   width: var(--document-width);
   padding-bottom: 1rem;
 }
+
+#message-sent {
+  transition: opacity 0.3s ease;
+  position: absolute;
+  bottom: -0.3125rem;
+  width: 100%;
+  text-align: center;
+  padding: 0.25rem 0.5rem;
+  background-color: var(--background-color);
+}