form submission

scj/README.md

@@ -22,7 +22,8 @@ It's a static site — upload everything in `scj/` to the document root for the
 ## The inquiry form (two modes)
 
 1. **Now — `mailto:` (zero setup).** Submitting the form opens the visitor's email app with a pre-filled message to `stormcloudjumpers@gmail.com`. Works out of the box.
-2. **Upgrade — send via Gmail, no email app needed.** Deploy `form-handler.gs` as a Google Apps Script web app (5-minute steps are in that file), copy the resulting `/exec` URL, and paste it into `FORM_ENDPOINT` near the top of `script.js`. The form will then email submissions straight to the inbox and fall back to `mailto:` only if the request fails.
+2. **Upgrade — send via Gmail, no email app needed.** Deploy `form-handler.gs` as a Google Apps Script web app (5-minute steps are in that file), copy the resulting `/exec` URL, and paste it into `FORM_ENDPOINT` near the top of `script.js`. The form will then email submissions straight to the inbox and fall back to `mailto:` only if the request fails. **This is the current plan** (routes through her own Gmail — no third-party vendor, no cost).
+3. **Future — fully self-hosted (once the web host is chosen).** If the host runs PHP (most shared hosts do), a small `contact.php` can send the mail from our own server — no Google involved. If the site lands on Netlify/Cloudflare/Vercel, use that platform's built-in form/function handler. Either is a small swap on the same form; the front-end doesn't change. Deferred until hosting is decided.
 
 ## Updating content (common edits)
 

scj/index.html

@@ -339,7 +339,7 @@
           <textarea name="message" rows="4" placeholder="Species, age, color preference, shipping questions…"></textarea>
         </label>
         <button type="submit" class="btn btn--primary btn--block">Send Inquiry</button>
-        <p class="form__note">Sending opens your email app addressed to Storm Cloud Jumpers. Prefer to email directly? Write to <a href="mailto:stormcloudjumpers@gmail.com" class="accent">stormcloudjumpers@gmail.com</a>.</p>
+        <p class="form__note">Your message goes straight to our inbox — we'll reply within a day or two. Prefer to email directly? Write to <a href="mailto:stormcloudjumpers@gmail.com" class="accent">stormcloudjumpers@gmail.com</a>.</p>
         <p class="form__msg form__msg--ok" id="formOk" hidden>Thanks! Your message is ready to send — we'll reply within a day or two.</p>
       </form>
     </div>

scj/script.js

@@ -18,7 +18,7 @@
      back to mailto only if the request fails.
   ---------------------------------------------------------- */
   var CONTACT_EMAIL = 'stormcloudjumpers@gmail.com';
-  var FORM_ENDPOINT = ''; // e.g. 'https://script.google.com/macros/s/XXXX/exec'
+  var FORM_ENDPOINT = 'https://script.google.com/macros/s/AKfycbzwcGznA_bTggaE1xxqNh0DY0yBJnDJ5ZbZp8uw4lVcYWaxvfZorKAHgNw0hdzxtWljOA/exec';
 
   var $ = function (s, c) { return (c || document).querySelector(s); };
   var $$ = function (s, c) { return Array.prototype.slice.call((c || document).querySelectorAll(s)); };
@@ -116,17 +116,26 @@
       };
 
       if (FORM_ENDPOINT) {
-        // Progressive enhancement: POST to Google Apps Script (sends via Gmail).
-        var body = new URLSearchParams(data).toString();
+        // Progressive enhancement: POST to Google Apps Script (sends via her Gmail).
+        // Apps Script web apps don't send CORS headers, so we use no-cors and
+        // treat a resolved request as success (the opaque response can't be read).
+        // A genuine network failure rejects and falls back to mailto.
+        var btn = form.querySelector('button[type="submit"]');
+        if (btn) { btn.disabled = true; btn.textContent = 'Sending…'; }
         fetch(FORM_ENDPOINT, {
           method: 'POST',
-          headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-          body: body
-        }).then(function (r) {
-          if (!r.ok) throw new Error('bad status');
-          if (ok) { ok.textContent = 'Thanks! Your inquiry has been sent — we’ll reply within a day or two.'; ok.hidden = false; }
+          mode: 'no-cors',
+          body: new URLSearchParams(data)
+        }).then(function () {
+          if (ok) {
+            ok.className = 'form__msg form__msg--ok';
+            ok.textContent = 'Thanks! Your inquiry has been sent — we’ll reply within a day or two.';
+            ok.hidden = false;
+          }
           form.reset();
-        }).catch(finishMailto);
+        }).catch(finishMailto).then(function () {
+          if (btn) { btn.disabled = false; btn.textContent = 'Send Inquiry'; }
+        });
       } else {
         finishMailto();
       }