Merge Power Automate form integration

Author: Larissa Whitney Cox

public/scripts/contact-form.js

@@ -0,0 +1,91 @@
+(function () {
+  const endpoint =
+    'https://defaultb5687cc343ce40ed91fd6a67198489.81.environment.api.powerplatform.com:443/powerautomate/automations/direct/workflows/67f7bf7e639044d8a78de32f1691dfa1/triggers/manual/paths/invoke?api-version=1&sp=%2Ftriggers%2Fmanual%2Frun&sv=1.0&sig=U8kmHBuwfedGCM7VufLr_6FtbDcgLhgwSTbeE26hdQs';
+
+  const forms = document.querySelectorAll('[data-contact-form]');
+
+  if (!forms.length) {
+    return;
+  }
+
+  const setStatus = (form, message, state) => {
+    const status = form.querySelector('[data-contact-status]');
+
+    if (!status) {
+      return;
+    }
+
+    status.textContent = message;
+    status.dataset.state = state;
+  };
+
+  const getValue = (formData, key) => String(formData.get(key) || '').trim();
+
+  forms.forEach((form) => {
+    form.addEventListener('submit', async (event) => {
+      event.preventDefault();
+
+      if (!form.reportValidity()) {
+        return;
+      }
+
+      const formData = new FormData(form);
+      const honeypot = getValue(formData, 'company');
+
+      if (honeypot) {
+        form.reset();
+        setStatus(form, 'Thanks, your message has been sent.', 'success');
+        return;
+      }
+
+      const submitButton = form.querySelector('button[type="submit"]');
+      const originalButtonText = submitButton ? submitButton.textContent : '';
+      const payload = {
+        firstName: getValue(formData, 'firstName'),
+        lastName: getValue(formData, 'lastName'),
+        email: getValue(formData, 'email'),
+        message: getValue(formData, 'message'),
+        sourcePage: window.location.href,
+        formSource: form.dataset.formSource || 'Website',
+        siteName: 'collabor8 Architecture + Design (BC)',
+        submittedAt: new Date().toISOString(),
+      };
+
+      setStatus(form, 'Sending...', 'pending');
+
+      if (submitButton) {
+        submitButton.disabled = true;
+        submitButton.textContent = 'Sending';
+      }
+
+      try {
+        const response = await fetch(endpoint, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify(payload),
+        });
+
+        if (!response.ok) {
+          throw new Error(`Power Automate returned ${response.status}`);
+        }
+
+        form.reset();
+        setStatus(form, 'Thanks, your message has been sent.', 'success');
+      } catch (error) {
+        console.error('Contact form submission failed:', error);
+        setStatus(
+          form,
+          'Sorry, something went wrong. Please email info@c8bc.ca directly.',
+          'error',
+        );
+      } finally {
+        if (submitButton) {
+          submitButton.disabled = false;
+          submitButton.textContent = originalButtonText || 'Submit';
+        }
+      }
+    });
+  });
+})();

src/components/ContactSplitSection.astro

@@ -15,24 +15,29 @@ const { id = 'how-to-connect' } = Astro.props;
         </h2>
       </div>
 
-      <form class="contact-form">
+      <form class="contact-form" data-contact-form data-form-source="Recent Projects">
         <label>
           <span>First Name*</span>
-          <input type="text" name="first-name" placeholder="First Name*" />
+          <input type="text" name="firstName" placeholder="First Name*" autocomplete="given-name" required />
         </label>
         <label>
           <span>Last Name</span>
-          <input type="text" name="last-name" placeholder="Last Name" />
+          <input type="text" name="lastName" placeholder="Last Name" autocomplete="family-name" />
         </label>
         <label class="contact-form__full">
           <span>Email*</span>
-          <input type="email" name="email" placeholder="Email*" />
+          <input type="email" name="email" placeholder="Email*" autocomplete="email" required />
         </label>
         <label class="contact-form__full contact-form__message">
           <span>Message*</span>
-          <textarea name="message" placeholder="Message*"></textarea>
+          <textarea name="message" placeholder="Message*" required></textarea>
         </label>
-        <button type="button">Submit</button>
+        <label class="contact-form__honeypot" aria-hidden="true" tabindex="-1">
+          <span>Company</span>
+          <input type="text" name="company" autocomplete="off" tabindex="-1" />
+        </label>
+        <button type="submit">Submit</button>
+        <p class="contact-form__status" data-contact-status aria-live="polite"></p>
       </form>
     </div>
   </div>

src/layouts/Layout.astro

@@ -30,5 +30,6 @@ const base = import.meta.env.BASE_URL.endsWith('/')
   </head>
   <body class="site-shell">
     <slot />
+    <script src={`${base}scripts/contact-form.js`} defer></script>
   </body>
 </html>

src/pages/index.astro

@@ -316,24 +316,29 @@ const leadership = [
             </h2>
           </div>
 
-          <form class="contact-form">
+          <form class="contact-form" data-contact-form data-form-source="Homepage">
             <label>
               <span>First Name*</span>
-              <input type="text" name="first-name" placeholder="First Name*" />
+              <input type="text" name="firstName" placeholder="First Name*" autocomplete="given-name" required />
             </label>
             <label>
               <span>Last Name</span>
-              <input type="text" name="last-name" placeholder="Last Name" />
+              <input type="text" name="lastName" placeholder="Last Name" autocomplete="family-name" />
             </label>
             <label class="contact-form__full">
               <span>Email*</span>
-              <input type="email" name="email" placeholder="Email*" />
+              <input type="email" name="email" placeholder="Email*" autocomplete="email" required />
             </label>
             <label class="contact-form__full contact-form__message">
               <span>Message*</span>
-              <textarea name="message" placeholder="Message*"></textarea>
+              <textarea name="message" placeholder="Message*" required></textarea>
             </label>
-            <button type="button">Submit</button>
+            <label class="contact-form__honeypot" aria-hidden="true" tabindex="-1">
+              <span>Company</span>
+              <input type="text" name="company" autocomplete="off" tabindex="-1" />
+            </label>
+            <button type="submit">Submit</button>
+            <p class="contact-form__status" data-contact-status aria-live="polite"></p>
           </form>
         </div>
       </div>

src/styles/global.css

@@ -913,6 +913,14 @@ nav {
   grid-column: 1 / -1;
 }
 
+.contact-form__honeypot {
+  position: absolute;
+  left: -9999px;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
 .contact-form button {
   grid-column: 1 / -1;
   justify-self: center;
@@ -927,10 +935,34 @@ nav {
   cursor: pointer;
 }
 
+.contact-form button:disabled {
+  cursor: wait;
+  opacity: 0.72;
+}
+
 .contact-form button:hover {
   background: var(--brand-orange);
 }
 
+.contact-form__status {
+  grid-column: 1 / -1;
+  justify-self: center;
+  margin: 0;
+  min-height: 1.2em;
+  color: var(--color-muted);
+  font-size: 0.84rem;
+  line-height: 1.35;
+  text-align: center;
+}
+
+.contact-form__status[data-state="success"] {
+  color: var(--brand-orange);
+}
+
+.contact-form__status[data-state="error"] {
+  color: #9d2e1c;
+}
+
 .section-link {
   display: inline-flex;
   align-items: center;