@bettercms-ai/astro 0.22.1 → 0.24.0

package/components/BcmsForm.astro

@@ -1,279 +1,360 @@
----
-/**
- * <BcmsForm> — renders a BetterCMS form with conditional fields, honeypot and
- * optional Turnstile. Submits JSON to the public forms endpoint with
- * progressive enhancement (falls back to a normal POST without JS).
- *
- * Markup is class-driven and unstyled — the host owns CSS (matches the
- * server-side renderer's class names: bcms-form, bcms-field, bcms-check, …).
- */
-import config from "bettercms:config";
-import type { DeliveryForm, DeliveryFormField } from "@bettercms-ai/sdk";
-import { getCountries, getCountryCallingCode, isSupportedCountry, getExampleNumber } from "libphonenumber-js/min";
-import phoneExamples from "libphonenumber-js/mobile/examples";
-
-interface Props {
-  form: DeliveryForm;
-  turnstileSiteKey?: string | null;
-  class?: string;
-  /** Anything else lands on the <form> itself. <BcmsBlocks> uses this to put a form block's
-   *  `data-bcms-block` marker on its own root — without it the attribute is passed as a prop
-   *  nothing reads, the marker silently vanishes, and a top-level form becomes a section the
-   *  Visual Editor cannot see. Caught by the marker canary in blocks.test.ts. */
-  [key: `data-${string}`]: unknown;
-}
-
-const { form, turnstileSiteKey, class: className, ...rest } = Astro.props;
-const action = `${config.apiUrl}/api/v1/forms/public/${encodeURIComponent(form.id)}/submissions`;
-
-const INPUT_TYPE: Partial<Record<DeliveryFormField["type"], string>> = {
-  email: "email",
-  number: "number",
-  phone: "tel",
-  date: "date",
-  url: "url",
-};
-
-/**
- * Calling-code options for a phone picker. Frontmatter only — this runs at build/SSR time and
- * ships ZERO bytes of libphonenumber to the visitor; the inline script below never sees it.
- *
- * Every libphonenumber helper is wrapped in an arrow rather than passed as a bare callback:
- * `.filter`/`.map` hand it the array INDEX as its `metadata` argument and it throws.
- */
-const REGION_NAMES =
-  typeof Intl !== "undefined" && typeof Intl.DisplayNames === "function"
-    ? new Intl.DisplayNames(["en"], { type: "region" })
-    : null;
-
-let countryCache: { iso: string; name: string; code: string; trunk: boolean }[] | null = null;
-const countryList = () => {
-  if (countryCache) return countryCache;
-  countryCache = getCountries()
-    .filter((iso) => isSupportedCountry(iso))
-    .map((iso) => {
-      let name = iso as string;
-      try {
-        name = REGION_NAMES?.of(iso) ?? iso;
-      } catch {
-        name = iso;
-      }
-      let trunk = false;
-      try {
-        const ex = getExampleNumber(iso, phoneExamples);
-        if (ex) {
-          const national = ex.formatNational().replace(/\D/g, "");
-          trunk = national.length > String(ex.nationalNumber).length && national.startsWith("0");
-        }
-      } catch {
-        trunk = false;
-      }
-      return { iso: iso as string, name, code: getCountryCallingCode(iso), trunk };
-    })
-    .sort((a, b) => a.name.localeCompare(b.name));
-  return countryCache;
-};
-
-const showTurnstile = Boolean(form.turnstileEnabled && turnstileSiteKey);
----
-
-<form
-  class={`bcms-form${className ? ` ${className}` : ""}`}
-  method="post"
-  action={action}
-  data-bcms-form={form.id}
-  data-bcms-form-success={form.successMessage ?? "Thanks!"}
-  data-bcms-form-redirect={form.redirectUrl ?? ""}
-  {...rest}
->
-  {form.fields?.map((f) => {
-    const wrapAttrs = {
-      "data-bcms-form-field": f.key,
-      ...(f.showIf ? { "data-bcms-showif": JSON.stringify(f.showIf) } : {}),
-    };
-    // Every author-editable string carries a `data-bcms-form-part` so the Visual Editor can
-    // repaint it live. A string the dock can edit but cannot mark shows stale on the canvas.
-    const help = f.helpText
-      ? <span class="bcms-field-help" data-bcms-form-part="help">{f.helpText}</span>
-      : null;
-    if (f.type === "hidden") return <input type="hidden" name={f.key} value={f.defaultValue ?? ""} />;
-    if (f.type === "checkbox" || f.type === "consent")
-      return (
-        <label class="bcms-check" {...wrapAttrs}>
-          <input type="checkbox" name={f.key} required={f.required} />
-          {/* The ` *` marker is emitted for EVERY field type, by every renderer — the
-              Visual Editor's live patch rewrites this span as `label + marker`, so a
-              renderer that omitted it would drop the star on edit and grow one back on
-              the next reload. */}
-          <span data-bcms-form-part="label">{f.label}{f.required ? " *" : ""}</span>
-          {help}
-        </label>
-      );
-    // Pick-one / pick-many are option GROUPS. Without this branch both fell through
-    // to the `<input type={INPUT_TYPE[f.type] ?? "text"}>` below and shipped as a
-    // single-line text box on every Astro site.
-    if (f.type === "radio" || f.type === "checkboxes") {
-      const multi = f.type === "checkboxes";
-      return (
-        <fieldset class={`bcms-field bcms-field--${multi ? "checkboxes" : "radio"}`} {...wrapAttrs}>
-          <legend data-bcms-form-part="label">{f.label}{f.required ? " *" : ""}</legend>
-          {(f.options ?? []).map((o) => (
-            <label class="bcms-option">
-              {/* `required` on each radio is the native "pick one"; on checkboxes it
-                  would demand every box, so the API enforces non-empty instead. */}
-              <input type={multi ? "checkbox" : "radio"} name={f.key} value={o} required={!multi && f.required} />
-              <span data-bcms-form-part="option">{o}</span>
-            </label>
-          ))}
-          {help}
-        </fieldset>
-      );
-    }
-    return (
-      <div class="bcms-field" {...wrapAttrs}>
-        <label for={`bcms-f-${f.key}`} data-bcms-form-part="label">{f.label}{f.required ? " *" : ""}</label>
-        {f.type === "textarea" ? (
-          <textarea id={`bcms-f-${f.key}`} name={f.key} placeholder={f.placeholder} required={f.required}>
-            {f.defaultValue ?? ""}
-          </textarea>
-        ) : f.type === "select" ? (
-          <select id={`bcms-f-${f.key}`} name={f.key} required={f.required}>
-            {(f.options ?? []).map((o) => <option value={o} data-bcms-form-part="option">{o}</option>)}
-          </select>
-        ) : f.type === "phone" && f.ui?.countryPicker ? (
-          /* A country select plus a tel input, submitting ONE E.164 value. `required` belongs
-             on the number only — a select always has a value and would never block. */
-          <span class="bcms-phone">
-            <select class="bcms-phone-country" name={`${f.key}__country`} aria-label="Country code">
-              <option value="" selected={!f.ui.defaultCountry}>International</option>
-              {countryList().map((c) => (
-                <option value={c.iso} data-cc={c.code} data-trunk={c.trunk ? "1" : undefined} selected={c.iso === f.ui!.defaultCountry}>
-                  {c.name} +{c.code}
-                </option>
-              ))}
-            </select>
-            <input
-              type="tel"
-              id={`bcms-f-${f.key}`}
-              name={f.key}
-              placeholder={f.placeholder}
-              value={f.defaultValue}
-              required={f.required}
-              autocomplete="tel"
-              dir="ltr"
-            />
-          </span>
-        ) : (
-          <input
-            type={INPUT_TYPE[f.type] ?? "text"}
-            id={`bcms-f-${f.key}`}
-            name={f.key}
-            placeholder={f.placeholder}
-            value={f.defaultValue}
-            required={f.required}
-          />
-        )}
-        {help}
-      </div>
-    );
-  })}
-
-  {form.honeypotField && (
-    <input type="text" name={form.honeypotField} tabindex="-1" autocomplete="off" style="position:absolute;left:-9999px" aria-hidden="true" />
-  )}
-
-  {showTurnstile && <div class="cf-turnstile" data-sitekey={turnstileSiteKey}></div>}
-
-  <button type="submit">{form.submitLabel || "Submit"}</button>
-  <p class="bcms-form-msg" hidden></p>
-</form>
-
-{showTurnstile && <script is:inline src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>}
-
-<script is:inline>
-  // Compose one E.164 value from a country-picker phone field. CANONICAL COPY is
-  // PHONE_COMPOSE_JS in the backend's src/lib/sites/render-page.ts, and this file is pinned
-  // against it byte for byte by src/__tests__/content/form-script-pin.test.ts. All three
-  // vanilla lanes are inline script text on someone else's page and cannot import at runtime,
-  // so the rule genuinely exists more than once.
-  function bcmsPhone(cc,raw,trunk){var d=String(raw||'').trim();if(!d)return '';if(d.charAt(0)==='+'){var i=d.replace(/\D/g,'');return i?'+'+i:'';}if(!cc)return d;var n=d.replace(/\D/g,'');if(trunk&&n.charAt(0)==='0')n=n.slice(1);return n?'+'+cc+n:'';}
-
-  // One copy of this script ships per <BcmsForm> instance, and each copy sees EVERY
-  // form on the page — so two forms meant four bindings and a double submit. The
-  // `bcmsFormBound` flag makes binding idempotent no matter how many copies run,
-  // and the success/redirect config now lives on the FORM rather than on the script
-  // element, so form A's script can no longer apply form B's success message.
-  document.querySelectorAll("form[data-bcms-form]").forEach((form) => {
-    if (form.dataset.bcmsFormBound) return;
-    form.dataset.bcmsFormBound = "1";
-
-    const msg = form.querySelector(".bcms-form-msg");
-    const successMsg = form.getAttribute("data-bcms-form-success") || "Thanks!";
-    const redirect = form.getAttribute("data-bcms-form-redirect") || "";
-
-    // Conditional fields: show/hide based on another field's value.
-    const conds = form.querySelectorAll("[data-bcms-showif]");
-    const applyConds = () => {
-      conds.forEach((el) => {
-        try {
-          const { field, equals } = JSON.parse(el.getAttribute("data-bcms-showif"));
-          const input = form.elements[field];
-          // A radio/checkboxes group resolves to a RadioNodeList, which has no `.type`
-          // and whose `.value` is "" for checkbox groups — read the checked members.
-          let val;
-          if (input instanceof RadioNodeList) {
-            const checked = Array.from(input).filter((el) => el.checked).map((el) => el.value);
-            val = checked.includes(equals) ? equals : checked[0];
-          } else if (input && input.type === "checkbox") {
-            val = input.checked ? "true" : "false";
-          } else {
-            val = input?.value;
-          }
-          el.style.display = val === equals ? "" : "none";
-        } catch {}
-      });
-    };
-    form.addEventListener("input", applyConds);
-    applyConds();
-
-    form.addEventListener("submit", async (e) => {
-      e.preventDefault();
-      // A `checkboxes` group posts one FormData entry PER checked box under the same
-      // name; assigning them one at a time kept only the last. Collect repeats into
-      // an array, which is the shape the API and every other renderer expect.
-      const data = {};
-      new FormData(form).forEach((v, k) => {
-        // Turnstile's token is a protocol field, not a form answer — the API reads it
-        // from the envelope. Leaving it inside `data` stored it as a submission column.
-        if (k === "cf-turnstile-response") return;
-        if (k in data) data[k] = Array.isArray(data[k]) ? [...data[k], v] : [data[k], v];
-        else data[k] = v;
-      });
-      // Compose AFTER the FormData loop. A showIf pointing at a phone key must keep comparing
-      // the raw digits, and applyConds runs on every input event.
-      form.querySelectorAll('select[name$="__country"]').forEach((sel) => {
-        const k = sel.name.slice(0, -9);
-        const o = sel.options[sel.selectedIndex];
-        data[k] = bcmsPhone(o ? (o.getAttribute("data-cc") || "") : "", data[k], o ? o.getAttribute("data-trunk") === "1" : false);
-        delete data[k + "__country"];
-      });
-      const tsEl = form.querySelector('[name="cf-turnstile-response"]');
-      const body = { data };
-      if (tsEl?.value) body["cf-turnstile-response"] = tsEl.value;
-      try {
-        const res = await fetch(form.action, {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify(body),
-        });
-        if (!res.ok) throw new Error(String(res.status));
-        if (redirect) { window.location.href = redirect; return; }
-        form.reset();
-        applyConds();
-        if (msg) { msg.textContent = successMsg; msg.hidden = false; }
-      } catch {
-        if (msg) { msg.textContent = "Something went wrong. Please try again."; msg.hidden = false; }
-      }
-    });
-  });
-</script>
+---
+/**
+ * <BcmsForm> — renders a BetterCMS form with conditional fields, honeypot and
+ * optional Turnstile. Submits JSON to the public forms endpoint with
+ * progressive enhancement (falls back to a normal POST without JS).
+ *
+ * Markup is class-driven and unstyled — the host owns CSS (matches the
+ * server-side renderer's class names: bcms-form, bcms-field, bcms-check, …).
+ */
+import config from "bettercms:config";
+import type { DeliveryForm, DeliveryFormField } from "@bettercms-ai/sdk";
+import { getCountries, getCountryCallingCode, isSupportedCountry, getExampleNumber } from "libphonenumber-js/min";
+import phoneExamples from "libphonenumber-js/mobile/examples";
+
+interface Props {
+  form: DeliveryForm;
+  turnstileSiteKey?: string | null;
+  class?: string;
+  /** Anything else lands on the <form> itself. <BcmsBlocks> uses this to put a form block's
+   *  `data-bcms-block` marker on its own root — without it the attribute is passed as a prop
+   *  nothing reads, the marker silently vanishes, and a top-level form becomes a section the
+   *  Visual Editor cannot see. Caught by the marker canary in blocks.test.ts. */
+  [key: `data-${string}`]: unknown;
+}
+
+const { form, turnstileSiteKey, class: className, ...rest } = Astro.props;
+const action = `${config.apiUrl}/api/v1/forms/public/${encodeURIComponent(form.id)}/submissions`;
+
+const INPUT_TYPE: Partial<Record<DeliveryFormField["type"], string>> = {
+  email: "email",
+  number: "number",
+  phone: "tel",
+  date: "date",
+  url: "url",
+};
+
+/**
+ * Calling-code options for a phone picker. Frontmatter only — this runs at build/SSR time and
+ * ships ZERO bytes of libphonenumber to the visitor; the inline script below never sees it.
+ *
+ * Every libphonenumber helper is wrapped in an arrow rather than passed as a bare callback:
+ * `.filter`/`.map` hand it the array INDEX as its `metadata` argument and it throws.
+ */
+const REGION_NAMES =
+  typeof Intl !== "undefined" && typeof Intl.DisplayNames === "function"
+    ? new Intl.DisplayNames(["en"], { type: "region" })
+    : null;
+
+let countryCache: { iso: string; name: string; code: string; trunk: boolean }[] | null = null;
+const countryList = () => {
+  if (countryCache) return countryCache;
+  countryCache = getCountries()
+    .filter((iso) => isSupportedCountry(iso))
+    .map((iso) => {
+      let name = iso as string;
+      try {
+        name = REGION_NAMES?.of(iso) ?? iso;
+      } catch {
+        name = iso;
+      }
+      let trunk = false;
+      try {
+        const ex = getExampleNumber(iso, phoneExamples);
+        if (ex) {
+          const national = ex.formatNational().replace(/\D/g, "");
+          trunk = national.length > String(ex.nationalNumber).length && national.startsWith("0");
+        }
+      } catch {
+        trunk = false;
+      }
+      return { iso: iso as string, name, code: getCountryCallingCode(iso), trunk };
+    })
+    .sort((a, b) => a.name.localeCompare(b.name));
+  return countryCache;
+};
+
+const showTurnstile = Boolean(form.turnstileEnabled && turnstileSiteKey);
+
+/**
+ * Multi-step forms. A `step` field is a divider: the fields before the first one are page 1 and
+ * each divider opens the next. Every page is a <fieldset data-bcms-step>, so with no JavaScript
+ * the form is simply one long form; the inline script below shows one at a time. A form with no
+ * divider takes the single un-wrapped group, so its markup is exactly what it always was.
+ * The same rule lives in the hosted renderer and BcmsForm (next); each package publishes on its
+ * own and cannot count on a newer shared helper arriving with it.
+ */
+type Page = { label: string | null; key: string | null; fields: DeliveryFormField[] };
+const all = form.fields ?? [];
+let pages: Page[] | null = null;
+if (all.some((f) => f.type === "step")) {
+  pages = [];
+  let cur: Page = { label: null, key: null, fields: [] };
+  for (const f of all) {
+    if (f.type !== "step") {
+      cur.fields.push(f);
+      continue;
+    }
+    if (cur.fields.length) pages.push(cur);
+    cur = { label: f.label, key: f.key, fields: [] };
+  }
+  if (cur.fields.length) pages.push(cur);
+}
+const groups: Page[] = pages ?? [{ label: null, key: null, fields: all }];
+const Wrap = pages ? "fieldset" : Fragment;
+// Copy of FORM_STEPS_CSS in the hosted renderer: a <fieldset> otherwise draws its own border.
+// Canonical copy is FORM_STEPS_JS in the backend's src/lib/sites/render-page.ts, pinned byte for
+// byte by src/__tests__/content/form-script-pin.test.ts. Emitted only for a stepped form, ahead of
+// the submit script, and idempotent per form, so several <BcmsForm>s on a page are fine.
+const STEPS_JS = `document.querySelectorAll('form[data-bcms-steps]').forEach(function(f){
+  if(f.getAttribute('data-bcms-steps-on'))return;
+  f.setAttribute('data-bcms-steps-on','1');
+  var steps=[].slice.call(f.querySelectorAll('fieldset[data-bcms-step]'));
+  if(steps.length<2)return;
+  var last=steps.length-1,at=0,submit=f.querySelector('button[type="submit"]');
+  f.noValidate=true;
+  function bad(s){var c=s.querySelectorAll('input,select,textarea');for(var k=0;k<c.length;k++){if(!c[k].checkValidity())return c[k];}return null;}
+  function show(n,focus){
+    at=n;
+    steps.forEach(function(s,k){s.hidden=k!==n;});
+    if(submit)submit.hidden=n!==last;
+    var h=steps[n].querySelector('.bcms-step-title');
+    if(focus&&h)h.focus();
+  }
+  function next(){var c=bad(steps[at]);if(c){c.reportValidity();return;}show(at+1,true);}
+  steps.forEach(function(s,k){
+    var nav=document.createElement('div');nav.className='bcms-step-nav';
+    function btn(label,attr,fn){var b=document.createElement('button');b.type='button';b.setAttribute(attr,'');b.textContent=label;b.addEventListener('click',fn);nav.appendChild(b);}
+    if(k>0)btn('Back','data-bcms-step-back',function(){show(k-1,true);});
+    if(k<last)btn('Next','data-bcms-step-next',next);
+    s.appendChild(nav);
+  });
+  // Capture phase, so this runs ahead of the submit script however many copies of it are bound.
+  f.addEventListener('submit',function(e){
+    if(at<last){e.preventDefault();e.stopImmediatePropagation();next();return;}
+    for(var k=0;k<steps.length;k++){
+      var c=bad(steps[k]);
+      if(c){e.preventDefault();e.stopImmediatePropagation();show(k,false);c.reportValidity();return;}
+    }
+  },true);
+  f.addEventListener('reset',function(){show(0,false);});
+  show(0,false);
+});`;
+const STEPS_CSS = ".bcms-step{border:0;margin:0 0 14px;padding:0;min-width:0}.bcms-step-title{margin:0 0 12px;font-size:1.125em}.bcms-step-count{display:block;font-size:.8em;font-weight:500;color:var(--bcms-text-muted,#6b7280)}.bcms-step-nav{display:flex;gap:10px;margin-top:14px}.bcms-form .bcms-step-nav button[data-bcms-step-back]{background:transparent;color:inherit;border:1px solid #ccc}";
+---
+
+<form
+  class={`bcms-form${className ? ` ${className}` : ""}`}
+  method="post"
+  action={action}
+  data-bcms-form={form.id}
+  data-bcms-steps={pages ? pages.length : undefined}
+  data-bcms-form-success={form.successMessage ?? "Thanks!"}
+  data-bcms-form-redirect={form.redirectUrl ?? ""}
+  {...rest}
+>
+  {groups.map((page, pageIndex) => (
+  <Wrap {...(pages ? { class: "bcms-step", "data-bcms-step": pageIndex + 1, "aria-labelledby": `bcms-step-${form.id}-${pageIndex + 1}` } : {})}>
+  {pages && (
+    <h3 class="bcms-step-title" id={`bcms-step-${form.id}-${pageIndex + 1}`} tabindex="-1" data-bcms-form-field={page.key ?? undefined}>
+      <span class="bcms-step-count">Step {pageIndex + 1} of {pages.length}</span>
+      {page.label && <Fragment> <span data-bcms-form-part="label">{page.label}</span></Fragment>}
+    </h3>
+  )}
+  {page.fields.map((f) => {
+    const wrapAttrs = {
+      "data-bcms-form-field": f.key,
+      ...(f.showIf ? { "data-bcms-showif": JSON.stringify(f.showIf) } : {}),
+    };
+    // Every author-editable string carries a `data-bcms-form-part` so the Visual Editor can
+    // repaint it live. A string the dock can edit but cannot mark shows stale on the canvas.
+    const help = f.helpText
+      ? <span class="bcms-field-help" data-bcms-form-part="help">{f.helpText}</span>
+      : null;
+    if (f.type === "hidden") return <input type="hidden" name={f.key} value={f.defaultValue ?? ""} />;
+    if (f.type === "checkbox" || f.type === "consent")
+      return (
+        <label class="bcms-check" {...wrapAttrs}>
+          <input type="checkbox" name={f.key} required={f.required} />
+          {/* The ` *` marker is emitted for EVERY field type, by every renderer — the
+              Visual Editor's live patch rewrites this span as `label + marker`, so a
+              renderer that omitted it would drop the star on edit and grow one back on
+              the next reload. */}
+          <span data-bcms-form-part="label">{f.label}{f.required ? " *" : ""}</span>
+          {help}
+        </label>
+      );
+    // Pick-one / pick-many are option GROUPS. Without this branch both fell through
+    // to the `<input type={INPUT_TYPE[f.type] ?? "text"}>` below and shipped as a
+    // single-line text box on every Astro site.
+    if (f.type === "radio" || f.type === "checkboxes") {
+      const multi = f.type === "checkboxes";
+      return (
+        <fieldset class={`bcms-field bcms-field--${multi ? "checkboxes" : "radio"}`} {...wrapAttrs}>
+          <legend data-bcms-form-part="label">{f.label}{f.required ? " *" : ""}</legend>
+          {(f.options ?? []).map((o) => (
+            <label class="bcms-option">
+              {/* `required` on each radio is the native "pick one"; on checkboxes it
+                  would demand every box, so the API enforces non-empty instead. */}
+              <input type={multi ? "checkbox" : "radio"} name={f.key} value={o} required={!multi && f.required} />
+              <span data-bcms-form-part="option">{o}</span>
+            </label>
+          ))}
+          {help}
+        </fieldset>
+      );
+    }
+    return (
+      <div class="bcms-field" {...wrapAttrs}>
+        <label for={`bcms-f-${f.key}`} data-bcms-form-part="label">{f.label}{f.required ? " *" : ""}</label>
+        {f.type === "textarea" ? (
+          <textarea id={`bcms-f-${f.key}`} name={f.key} placeholder={f.placeholder} required={f.required}>
+            {f.defaultValue ?? ""}
+          </textarea>
+        ) : f.type === "select" ? (
+          <select id={`bcms-f-${f.key}`} name={f.key} required={f.required}>
+            {(f.options ?? []).map((o) => <option value={o} data-bcms-form-part="option">{o}</option>)}
+          </select>
+        ) : f.type === "phone" && f.ui?.countryPicker ? (
+          /* A country select plus a tel input, submitting ONE E.164 value. `required` belongs
+             on the number only — a select always has a value and would never block. */
+          <span class="bcms-phone">
+            <select class="bcms-phone-country" name={`${f.key}__country`} aria-label="Country code">
+              <option value="" selected={!f.ui.defaultCountry}>International</option>
+              {countryList().map((c) => (
+                <option value={c.iso} data-cc={c.code} data-trunk={c.trunk ? "1" : undefined} selected={c.iso === f.ui!.defaultCountry}>
+                  {c.name} +{c.code}
+                </option>
+              ))}
+            </select>
+            <input
+              type="tel"
+              id={`bcms-f-${f.key}`}
+              name={f.key}
+              placeholder={f.placeholder}
+              value={f.defaultValue}
+              required={f.required}
+              autocomplete="tel"
+              dir="ltr"
+            />
+          </span>
+        ) : (
+          <input
+            type={INPUT_TYPE[f.type] ?? "text"}
+            id={`bcms-f-${f.key}`}
+            name={f.key}
+            placeholder={f.placeholder}
+            value={f.defaultValue}
+            required={f.required}
+          />
+        )}
+        {help}
+      </div>
+    );
+  })}
+  </Wrap>
+  ))}
+
+  {form.honeypotField && (
+    <input type="text" name={form.honeypotField} tabindex="-1" autocomplete="off" style="position:absolute;left:-9999px" aria-hidden="true" />
+  )}
+
+  {showTurnstile && <div class="cf-turnstile" data-sitekey={turnstileSiteKey}></div>}
+
+  <button type="submit">{form.submitLabel || "Submit"}</button>
+  <p class="bcms-form-msg" hidden></p>
+</form>
+
+{pages && <style is:inline set:html={STEPS_CSS}></style>}
+
+{showTurnstile && <script is:inline src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>}
+
+{pages && <script is:inline set:html={STEPS_JS}></script>}
+
+<script is:inline>
+  // Compose one E.164 value from a country-picker phone field. CANONICAL COPY is
+  // PHONE_COMPOSE_JS in the backend's src/lib/sites/render-page.ts, and this file is pinned
+  // against it byte for byte by src/__tests__/content/form-script-pin.test.ts. All three
+  // vanilla lanes are inline script text on someone else's page and cannot import at runtime,
+  // so the rule genuinely exists more than once.
+  function bcmsPhone(cc,raw,trunk){var d=String(raw||'').trim();if(!d)return '';if(d.charAt(0)==='+'){var i=d.replace(/\D/g,'');return i?'+'+i:'';}if(!cc)return d;var n=d.replace(/\D/g,'');if(trunk&&n.charAt(0)==='0')n=n.slice(1);return n?'+'+cc+n:'';}
+
+  // One copy of this script ships per <BcmsForm> instance, and each copy sees EVERY
+  // form on the page — so two forms meant four bindings and a double submit. The
+  // `bcmsFormBound` flag makes binding idempotent no matter how many copies run,
+  // and the success/redirect config now lives on the FORM rather than on the script
+  // element, so form A's script can no longer apply form B's success message.
+  document.querySelectorAll("form[data-bcms-form]").forEach((form) => {
+    if (form.dataset.bcmsFormBound) return;
+    form.dataset.bcmsFormBound = "1";
+
+    const msg = form.querySelector(".bcms-form-msg");
+    const successMsg = form.getAttribute("data-bcms-form-success") || "Thanks!";
+    const redirect = form.getAttribute("data-bcms-form-redirect") || "";
+
+    // Conditional fields: show/hide based on another field's value.
+    const conds = form.querySelectorAll("[data-bcms-showif]");
+    const applyConds = () => {
+      conds.forEach((el) => {
+        try {
+          const { field, equals } = JSON.parse(el.getAttribute("data-bcms-showif"));
+          const input = form.elements[field];
+          // A radio/checkboxes group resolves to a RadioNodeList, which has no `.type`
+          // and whose `.value` is "" for checkbox groups — read the checked members.
+          let val;
+          if (input instanceof RadioNodeList) {
+            const checked = Array.from(input).filter((el) => el.checked).map((el) => el.value);
+            val = checked.includes(equals) ? equals : checked[0];
+          } else if (input && input.type === "checkbox") {
+            val = input.checked ? "true" : "false";
+          } else {
+            val = input?.value;
+          }
+          el.style.display = val === equals ? "" : "none";
+        } catch {}
+      });
+    };
+    form.addEventListener("input", applyConds);
+    applyConds();
+
+    form.addEventListener("submit", async (e) => {
+      e.preventDefault();
+      // A `checkboxes` group posts one FormData entry PER checked box under the same
+      // name; assigning them one at a time kept only the last. Collect repeats into
+      // an array, which is the shape the API and every other renderer expect.
+      const data = {};
+      new FormData(form).forEach((v, k) => {
+        // Turnstile's token is a protocol field, not a form answer — the API reads it
+        // from the envelope. Leaving it inside `data` stored it as a submission column.
+        if (k === "cf-turnstile-response") return;
+        if (k in data) data[k] = Array.isArray(data[k]) ? [...data[k], v] : [data[k], v];
+        else data[k] = v;
+      });
+      // Compose AFTER the FormData loop. A showIf pointing at a phone key must keep comparing
+      // the raw digits, and applyConds runs on every input event.
+      form.querySelectorAll('select[name$="__country"]').forEach((sel) => {
+        const k = sel.name.slice(0, -9);
+        const o = sel.options[sel.selectedIndex];
+        data[k] = bcmsPhone(o ? (o.getAttribute("data-cc") || "") : "", data[k], o ? o.getAttribute("data-trunk") === "1" : false);
+        delete data[k + "__country"];
+      });
+      const tsEl = form.querySelector('[name="cf-turnstile-response"]');
+      const body = { data };
+      if (tsEl?.value) body["cf-turnstile-response"] = tsEl.value;
+      try {
+        const res = await fetch(form.action, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(body),
+        });
+        if (!res.ok) throw new Error(String(res.status));
+        if (redirect) { window.location.href = redirect; return; }
+        form.reset();
+        applyConds();
+        if (msg) { msg.textContent = successMsg; msg.hidden = false; }
+      } catch {
+        if (msg) { msg.textContent = "Something went wrong. Please try again."; msg.hidden = false; }
+      }
+    });
+  });
+</script>