Updated form to submit to vendor

index.html

@@ -370,12 +370,8 @@
             </p>
           </div>
 
-          <form class="grid-trailing-form" action="#contact-confirmation" method="get">
+          <form id="inquiry-form" class="grid-trailing-form" method="POST">
-            <p class="form-disclosure" id="contact-form-disclosure">
+            <input type="hidden" name="access_key" value="e13bd9eb-b409-4b3f-936c-a938a701ee2e">
-              This form is a preview. Anything you enter stays in this page and is not sent to
-              the atelier or saved by this website.
-            </p>
-
             <div class="field-grid">
               <div class="field-group">
                 <label class="label-uppercase" for="inquiry-name">Your name</label>
@@ -388,8 +384,10 @@
               </div>
             </div>
 
+            <input type="checkbox" name="botcheck" class="hidden" style="display: none;">
+
             <div class="field-group">
-              <label class="label-uppercase" for="inquiry-organization">Your home, property, or organization</label>
+              <label class="label-uppercase" for="inquiry-organization">Describe the space</label>
               <input id="inquiry-organization" type="text" autocomplete="organization" required>
             </div>
 
@@ -398,15 +396,14 @@
               <textarea id="inquiry-project-brief" rows="5" required></textarea>
             </div>
 
-            <button class="button-filled label-uppercase" type="submit" aria-describedby="contact-form-disclosure">
+            <button class="button-filled label-uppercase" type="submit">
-              Preview your inquiry <span aria-hidden="true">→</span>
+              Submit your inquiry <span aria-hidden="true">→</span>
             </button>
-
-            <p class="target-notice" id="contact-confirmation" tabindex="-1">
-              This is where a confirmation would appear. Your message has not been sent to the
-              atelier or saved by this website.
-            </p>
           </form>
+
+          <p class="target-notice" id="contact-confirmation" class="hidden">
+            Please wait...
+          </p>
         </div>
       </section>
     </main>
@@ -429,7 +426,7 @@
               decoding="async"
             >
           </a>
-          <p class="text-muted-small">For the welcome you offer and the memories you make.</p>
+          <!--<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">
@@ -443,7 +440,7 @@
         </nav>
 
         <div class="space-above-on-mobile">
-          <p class="column-label label-uppercase">Pacific Northwest</p>
+          <p class="column-label label-uppercase">Proudly crafting in the Pacific Northwest</p>
           <p class="text-muted-small">We’d love to hear what you have in mind.</p>
           <a class="arrow-link label-uppercase text-paper" href="#contact">
             Start a conversation <span aria-hidden="true">→</span>
@@ -455,6 +452,49 @@
     </footer>
   </body>
 
+  <script>
+    const inquiryForm = document.getElementById("inquiry-form");
+    const confirmation = document.getElementById("contact-confirmation");
+
+    inquiryForm.addEventListener("submit", (event) => {
+      event.preventDefault();
+
+      inquiryForm.classList.add("hidden");
+      confirmation.classList.remove("hidden");
+      const data = new FormData(inquiryForm);
+      const object = Object.fromEntries(data);
+      const json = JSON.stringify(object);
+
+      fetch('https://api.web3forms.com/submit', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Accept': 'application/json'
+        },
+        body: json
+      })
+      .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.";
+        } else {
+          confirmation.innerHTML = json.message;
+        }
+      })
+      .catch((error) => {
+        console.error('Error:', error);
+        confirmation.innerHTML = "An error occurred. Please try again.";
+      })
+      .then((response) => {
+        inquiryForm.reset();
+        setTimeout(() => {
+          confirmation.classList.add("hidden");
+          inquiryForm.classList.remove("hidden");
+        }, 3000);
+      });
+    });
+  </script>
+
   <script>
     document.addEventListener("DOMContentLoaded", (event) => {
       gsap.registerPlugin(ScrollTrigger);

styles.css

@@ -79,6 +79,10 @@ ul {
   outline-offset: 0.3rem;
 }
 
+.hidden {
+  display: none;
+}
+
 /* Compose layout, typography, surfaces, and components independently.
    Responsive placement belongs to descriptive layout variants; IDs are anchors only. */
 .grid-twelve-columns {