Updated form and messages

index.html

@@ -15,7 +15,7 @@
       href="https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600&display=swap"
       rel="stylesheet"
     >
-    <link rel="stylesheet" href="styles.css?version=reusable-classes">
+    <link rel="stylesheet" href="styles.css?version=form-refinement">
 
     <script src="https://cdn.jsdelivr.net/npm/gsap@3.15/dist/gsap.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/gsap@3.15/dist/ScrollTrigger.min.js"></script>
@@ -374,26 +374,26 @@
             <input type="hidden" name="access_key" value="e13bd9eb-b409-4b3f-936c-a938a701ee2e">
             <div class="field-grid">
               <div class="field-group">
-                <label class="label-uppercase" for="inquiry-name">Your name</label>
+                <label class="label-uppercase" for="name">Your name</label>
-                <input id="inquiry-name" type="text" autocomplete="name" required>
+                <input id="name" name="name" type="text" autocomplete="name" required>
               </div>
 
               <div class="field-group">
-                <label class="label-uppercase" for="inquiry-email">Email</label>
+                <label class="label-uppercase" for="email">Email</label>
-                <input id="inquiry-email" type="email" autocomplete="email" required>
+                <input id="email" name="email" type="email" autocomplete="email" required>
               </div>
             </div>
 
             <input type="checkbox" name="botcheck" class="hidden" style="display: none;">
 
             <div class="field-group">
-              <label class="label-uppercase" for="inquiry-organization">Describe the space</label>
+              <label class="label-uppercase" for="organization">Describe the space</label>
-              <input id="inquiry-organization" type="text" autocomplete="organization" required>
+              <input id="organization" name="organization" type="text" autocomplete="organization" required>
             </div>
 
             <div class="field-group">
-              <label class="label-uppercase" for="inquiry-project-brief">What do you have in mind?</label>
+              <label class="label-uppercase" for="project-brief">What do you have in mind?</label>
-              <textarea id="inquiry-project-brief" rows="5" required></textarea>
+              <textarea id="project-brief" name="project-brief" rows="5" required></textarea>
             </div>
 
             <button class="button-filled label-uppercase" type="submit">
@@ -401,9 +401,11 @@
             </button>
           </form>
 
-          <p class="target-notice" id="contact-confirmation" class="hidden">
+          <div class="grid-trailing-form vertical-centering hidden" id="contact-confirmation">
-            Please wait...
+            <p class="target-notice" id="confirmation-message">
-          </p>
+              Please wait...
+            </p>
+          </div>
         </div>
       </section>
     </main>
@@ -426,7 +428,6 @@
               decoding="async"
             >
           </a>
-          <!--<p class="text-muted-small">For the welcome you offer and the memories you make.</p>-->
         </div>
 
         <nav class="link-stack" aria-label="Footer navigation">
@@ -453,8 +454,10 @@
   </body>
 
   <script>
+    var success = false;
     const inquiryForm = document.getElementById("inquiry-form");
     const confirmation = document.getElementById("contact-confirmation");
+    const confirmationMessage = document.getElementById("confirmation-message");
 
     inquiryForm.addEventListener("submit", (event) => {
       event.preventDefault();
@@ -476,16 +479,21 @@
       .then(async (response) => {
         let json = await response.json();
         if (response.status === 200) {
-          confirmation.innerHTML = "Thank you for your interest! Noel Design Atelier will review your inquiry and contact you soon.";
+          success = true;
+          confirmationMessage.innerHTML = "Thank you for your interest! Noel Design Atelier will review your inquiry and contact you soon.";
         } else {
-          confirmation.innerHTML = json.message;
+          console.error('Error:', json);
+          confirmationMessage.innerHTML = json.message;
         }
       })
       .catch((error) => {
         console.error('Error:', error);
-        confirmation.innerHTML = "An error occurred. Please try again.";
+        confirmationMessage.innerHTML = "An error occurred. Please try again.";
       })
       .then((response) => {
+        if (success) {
+          return;
+        }
         inquiryForm.reset();
         setTimeout(() => {
           confirmation.classList.add("hidden");

styles.css

@@ -83,6 +83,10 @@ ul {
   display: none;
 }
 
+.vertical-centering {
+  align-self: center;
+}
+
 /* Compose layout, typography, surfaces, and components independently.
    Responsive placement belongs to descriptive layout variants; IDs are anchors only. */
 .grid-twelve-columns {
@@ -743,7 +747,6 @@ ul {
 }
 
 .target-notice {
-  display: none;
   margin-top: 1.5rem;
   padding: 1rem;
   border-left: 0.25rem solid var(--color-noel-red);