wilwaldon · borice1984 · Apr 17, 2026
diff --git a/templates/static/base/404.html b/templates/static/base/404.html
@@ -69,6 +69,6 @@ <h4>Contact</h4>
   </footer>
 
   <script type="module" src="js/main.js"></script>
-  <script src="js/heroImages.js"></script>
+  <script src="js/heroImages.js" defer></script>
 </body>
 </html>
diff --git a/templates/static/base/contact.html b/templates/static/base/contact.html
@@ -49,7 +49,7 @@ <h1 class="hero__title">Get in Touch</h1>
       <div class="container">
         <div class="grid grid--2">
           <div>
-            <form data-contact-form>
+            <form data-contact-form data-formspree-endpoint="">
               <div class="form-group">
                 <label for="name">Name <span class="text-primary">*</span></label>
                 <input type="text" id="name" name="name" required autocomplete="name">
@@ -139,6 +139,6 @@ <h4>Contact</h4>
   </footer>
 
   <script type="module" src="js/main.js"></script>
-  <script src="js/heroImages.js"></script>
+  <script src="js/heroImages.js" defer></script>
 </body>
 </html>
diff --git a/templates/static/base/error.html b/templates/static/base/error.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Error — {{business.name}}</title>
+  <meta name="robots" content="noindex">
+  <link rel="icon" type="image/svg+xml" href="favicon.svg">
+  <link rel="stylesheet" href="css/styles.css">
+</head>
+<body>
+
+  <!-- Header -->
+  <header class="header">
+    <div class="container header__inner">
+      <a href="index.html" class="header__logo" data-bind="business.name"></a>
+      <nav class="header__nav" data-nav aria-label="Main navigation"></nav>
+      <a href="contact.html" class="btn btn--primary header__cta">Contact Us</a>
+      <button class="header__hamburger" data-hamburger aria-label="Open menu" aria-expanded="false">
+        <span></span>
+      </button>
+    </div>
+  </header>
+
+  <!-- Mobile Menu -->
+  <div class="mobile-backdrop" data-mobile-backdrop></div>
+  <aside class="mobile-menu" data-mobile-menu aria-label="Mobile navigation">
+    <button class="mobile-menu__close" data-mobile-close aria-label="Close menu">✕</button>
+    <nav class="mobile-menu__nav" data-nav></nav>
+    <a href="contact.html" class="btn btn--primary btn--full mobile-menu__cta">Contact Us</a>
+  </aside>
+
+  <main>
+    <div class="error-page">
+      <p class="error-page__code">Error</p>
+      <h1 class="error-page__title">Something went wrong</h1>
+      <p class="error-page__text">An unexpected error occurred. Please try again or go back to the homepage.</p>
+      <a href="index.html" class="btn btn--primary btn--large">Back to Home</a>
+    </div>
+  </main>
+
+  <!-- Footer -->
+  <footer class="footer">
+    <div class="container">
+      <div class="footer__grid">
+        <div>
+          <strong data-bind="business.name" style="color: #fff; font-size: 1.125rem;"></strong>
+          <p class="footer__description" data-bind="business.description"></p>
+        </div>
+        <div>
+          <h4>Quick Links</h4>
+          <nav class="footer__links" data-nav></nav>
+        </div>
+        <div>
+          <h4>Contact</h4>
+          <p class="footer__contact-item" data-bind="business.address.street"></p>
+          <p class="footer__contact-item">
+            <span data-bind="business.address.city"></span>, <span data-bind="business.address.state"></span> <span data-bind="business.address.zip"></span>
+          </p>
+          <p class="footer__contact-item" data-bind="business.phone"></p>
+          <p class="footer__contact-item" data-bind="business.email"></p>
+          <div class="footer__social" data-social></div>
+        </div>
+      </div>
+      <div class="footer__bottom">
+        <p>© <span data-year></span> <span data-bind="business.name"></span>. All rights reserved.</p>
+      </div>
+    </div>
+  </footer>
+
+  <script type="module" src="js/main.js"></script>
+  <script src="js/heroImages.js" defer></script>
+</body>
+</html>
diff --git a/templates/static/base/index.html b/templates/static/base/index.html
@@ -193,7 +193,7 @@ <h4 class="footer__heading">Contact</h4>
   </footer>
 
   <script type="module" src="js/main.js"></script>
-  <script src="js/bleeding-edge.js"></script>
-  <script src="js/heroImages.js"></script>
+  <script src="js/bleeding-edge.js" defer></script>
+  <script src="js/heroImages.js" defer></script>
 </body>
 </html>
diff --git a/templates/static/base/js/forms.js b/templates/static/base/js/forms.js
@@ -1,5 +1,13 @@
 /**
- * forms.js — Contact form validation and mailto: fallback submission
+ * forms.js — Contact form validation and submission
+ *
+ * Submission strategy (in priority order):
+ *   1. If the form has data-formspree-endpoint set, POST via fetch (works on S3/static hosts)
+ *   2. Otherwise, fall back to a mailto: link (opens local mail client)
+ *
+ * To enable Formspree, create a free form at https://formspree.io and add
+ * the endpoint to your contact form:
+ *   <form data-contact-form data-formspree-endpoint="https://formspree.io/f/YOUR_ID">
  */
 
 function initForms() {
@@ -13,7 +21,7 @@ function initForms() {
   });
 }
 
-function handleSubmit(form) {
+async function handleSubmit(form) {
   // Check honeypot
   var honeypot = form.querySelector('[data-honeypot]');
   if (honeypot && honeypot.value) return;
@@ -35,37 +43,54 @@ function handleSubmit(form) {
         if (msg) msg.textContent = error.message;
       }
     });
-    // Focus first error
     errors[0].element.focus();
     return;
   }
 
-  // Gather form data
-  var name = form.querySelector('[name="name"]');
-  var email = form.querySelector('[name="email"]');
-  var phone = form.querySelector('[name="phone"]');
-  var message = form.querySelector('[name="message"]');
+  var endpoint = form.getAttribute('data-formspree-endpoint');
 
-  // Build mailto link
-  var businessEmail = '';
-  if (window.siteData && window.siteData.business) {
-    businessEmail = window.siteData.business.email || '';
-  }
+  if (endpoint) {
+    var submitBtn = form.querySelector('[type="submit"]');
+    if (submitBtn) submitBtn.disabled = true;
+
+    try {
+      var res = await fetch(endpoint, {
+        method: 'POST',
+        body: new FormData(form),
+        headers: { 'Accept': 'application/json' }
+      });
+      if (!res.ok) throw new Error('Submission failed');
+    } catch (err) {
+      console.error('Form submission error:', err);
+      if (submitBtn) submitBtn.disabled = false;
+      return;
+    }
+  } else {
+    // Fallback: mailto
+    var name = form.querySelector('[name="name"]');
+    var email = form.querySelector('[name="email"]');
+    var phone = form.querySelector('[name="phone"]');
+    var message = form.querySelector('[name="message"]');
+
+    var businessEmail = '';
+    if (window.siteData && window.siteData.business) {
+      businessEmail = window.siteData.business.email || '';
+    }
 
-  var subject = 'Contact from ' + (name ? name.value : 'Website');
-  var body = '';
-  if (name) body += 'Name: ' + name.value + '\n';
-  if (email) body += 'Email: ' + email.value + '\n';
-  if (phone && phone.value) body += 'Phone: ' + phone.value + '\n';
-  if (message) body += '\nMessage:\n' + message.value;
+    var subject = 'Contact from ' + (name ? name.value : 'Website');
+    var body = '';
+    if (name) body += 'Name: ' + name.value + '\n';
+    if (email) body += 'Email: ' + email.value + '\n';
+    if (phone && phone.value) body += 'Phone: ' + phone.value + '\n';
+    if (message) body += '\nMessage:\n' + message.value;
 
-  var mailtoLink = 'mailto:' + encodeURIComponent(businessEmail) +
-    '?subject=' + encodeURIComponent(subject) +
-    '&body=' + encodeURIComponent(body);
+    var mailtoLink = 'mailto:' + encodeURIComponent(businessEmail) +
+      '?subject=' + encodeURIComponent(subject) +
+      '&body=' + encodeURIComponent(body);
 
-  window.location.href = mailtoLink;
+    window.location.href = mailtoLink;
+  }
 
-  // Show success state
   var successEl = form.parentElement.querySelector('.form-success');
   if (successEl) {
     form.style.display = 'none';
@@ -102,7 +127,7 @@ function validate(form) {
 }
 
 function isValidEmail(email) {
-  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+  return /^[a-zA-Z0-9._%+\-]+@[a-zA-Z0-9.\-]+\.[a-zA-Z]{2,}$/.test(email);
 }
 
 export { initForms };
diff --git a/templates/static/base/page-2.html b/templates/static/base/page-2.html
@@ -91,6 +91,6 @@ <h4>Contact</h4>
   </footer>
 
   <script type="module" src="js/main.js"></script>
-  <script src="js/heroImages.js"></script>
+  <script src="js/heroImages.js" defer></script>
 </body>
 </html>
diff --git a/templates/static/base/page-3.html b/templates/static/base/page-3.html
@@ -91,6 +91,6 @@ <h4>Contact</h4>
   </footer>
 
   <script type="module" src="js/main.js"></script>
-  <script src="js/heroImages.js"></script>
+  <script src="js/heroImages.js" defer></script>
 </body>
 </html>
diff --git a/templates/static/base/page-4.html b/templates/static/base/page-4.html
@@ -90,6 +90,6 @@ <h4>Contact</h4>
   </footer>
 
   <script type="module" src="js/main.js"></script>
-  <script src="js/heroImages.js"></script>
+  <script src="js/heroImages.js" defer></script>
 </body>
 </html>