afterwards is a different node). The rebuilt copy of THIS // script is React-created, and React-created scripts never execute. So the // form came up correctly, the visitor filled it in and passed the challenge, // and then the whole thing reset to empty fields, a disabled button and no // Turnstile -- with nothing left alive to wire it again. // // A closure on window is not part of React's tree and cannot be discarded, // so the observer outlives every rebuild and wires whatever form is in the // document now. It also covers the ordinary cases a one-shot missed: a // client-side route change, or a form revealed later by streaming. if (!window.__w2WireForm) { window.__w2WireForm = function (form) { // The "already wired" marker is a JS PROPERTY, never a data- attribute: // an attribute written before hydration is one React did not render, // which is itself a mismatch and would cause the very rebuild this // function exists to survive. if (!form || form.tagName !== "FORM" || form.__w2FormInit) return; form.__w2FormInit = 1; __w2WireFormBody(form); }; var pending = false; window.__w2WireAllForms = function () { pending = false; var forms = document.querySelectorAll("form.website-form"); for (var i = 0; i < forms.length; i++) { window.__w2WireForm(forms[i]); // An already-wired form is not necessarily a working one: its challenge // can be destroyed under it by the same rebuild this sweep exists to // survive, and the wiring guard would keep it from ever being noticed. if (forms[i].__w2HealTurnstile) forms[i].__w2HealTurnstile(); } }; if (window.MutationObserver) { // Coalesced to one pass per frame: React rebuilding a page fires a great // many childList records, and each one must not trigger a full sweep. new MutationObserver(function () { if (pending) return; pending = true; // Called through window on purpose: requestAnimationFrame detached // from its receiver throws "Illegal invocation" the moment this code // is ever evaluated in strict mode. if (window.requestAnimationFrame) window.requestAnimationFrame(window.__w2WireAllForms); else setTimeout(window.__w2WireAllForms, 0); }).observe(document.documentElement, { childList: true, subtree: true }); } } if (start) window.__w2WireForm(start); if (window.__w2WireAllForms) window.__w2WireAllForms(); })(); function __w2WireFormBody(form) { var statusEl = form.querySelector("[data-website-form-status]"); var submitBtn = form.querySelector("[data-website-form-submit]"); var honeypot = form.querySelector("[data-website-form-honeypot]"); // Stamped HERE rather than at render time. A server-rendered Date.now() is a // different number on the server and on the client, which is a hydration // mismatch -- React then throws the whole server subtree away and re-renders // it, and a script element React creates never executes. That killed this // runtime on every published form: no submit handler, no Turnstile widget, // and a submit button left disabled forever. It also measures the right // thing, which the rendered value did not: on a statically generated page // Date.now() is BUILD time, so the elapsed-time spam check compared against // whenever the site was last deployed instead of when the visitor arrived. var startedAt = Date.now(); var successMessage = form.dataset.successMessage || "Thanks — we'll be in touch."; // Shown when the security challenge never arrives (see turnstileUnavailable). // It names another way to reach us on purpose: the visitor came here to say // something, and "try again later" throws that away. Overridable per form via // data-turnstile-fallback for a site whose contact details differ. var TURNSTILE_FALLBACK_MESSAGE = form.dataset.turnstileFallback || "We couldn't load the security check, so this form can't be sent right now. " + "Please email support@mtechdistributors.com or call (888) 411-7583 — sorry for the trouble."; var turnstileContainer = form.querySelector("[data-website-form-turnstile]"); var turnstileToken = ""; var turnstileWidgetId = null; var turnstileWatchdog = null; // The last code Cloudflare reported, and whether it left the widget in a // failed state. Kept because an errored widget still HAS its iframe, so the // iframe alone cannot say whether a challenge is alive or dead. var turnstileErrorCode = ""; var turnstileErrored = false; // Whether Cloudflare is showing its "Verify you're human" box right now. Set // and cleared ONLY by Cloudflare's own interactive callbacks -- see // challengeIsAlive for why nothing on the page can be inspected instead. var turnstileAwaitingVisitor = false; // A challenge can be rendered and then DESTROYED, which is different from one // that never arrived and needs the opposite answer -- see healTurnstile. var turnstileRemounts = 0; var turnstileMountedAt = 0; // Whether Cloudflare's widget was EVER seen in this form's container. // // A widget that rendered and then vanished worked, so it is worth putting // back. One that never rendered has nothing to heal, and remounting it only // delays the phone number the visitor needs. var turnstileHadWidget = false; var TURNSTILE_MAX_REMOUNTS = 5; // render() inserts the iframe asynchronously. Without a gap, the sweep below // would tear down a mount that was still on its way in. var TURNSTILE_REMOUNT_GAP_MS = 3000; // How long the challenge gets before the form admits it is not coming. // Generous: a cold cache on a slow connection is a few seconds, and crying // wolf on a challenge that was merely slow is its own bug. var TURNSTILE_TIMEOUT_MS = 15000; // The grace a FAILED challenge gets to be taken again. Human-scale, because // that is what it measures: noticing the widget, pressing its retry, passing // it. If nothing comes of it the form stops pretending and offers the phone // number -- a challenge that keeps refusing is as unsendable as one that // never loaded, and silence there leaves the visitor with neither a form nor // a way to reach us. var TURNSTILE_RETRY_GRACE_MS = 60000; // Who put the current message there. The challenge clears its OWN messages // when a token finally arrives, and must not wipe one the server wrote: a // refreshed token lands a second or so after a rejected submission, and // without this it silently erased the very explanation of the rejection. var statusOwner = ""; function setStatus(kind, message, owner) { if (!statusEl) return; statusEl.textContent = message || ""; statusEl.className = kind === "error" ? "website-form-error" : ""; statusOwner = message ? (owner || "") : ""; } function submitDisabled(disabled) { if (submitBtn) submitBtn.disabled = disabled; } // The button is disabled from the server until Cloudflare's challenge has // run, which on a cold cache is a second or two of a dead-looking control. // data-state drives what it SAYS during that wait -- the CSS swaps the label // for a spinner and this text -- so the pause reads as progress rather than // as a broken form. Kept as an attribute plus one text node so the button // never has its children rebuilt underneath React. function setSubmitState(state, text) { if (!submitBtn) return; submitBtn.setAttribute("data-state", state); var label = submitBtn.querySelector("[data-website-form-busy-text]"); if (label && text) label.textContent = text; } // Cloudflare does not always announce its own failure. // // MEASURED on production 2026-08-07: with a sitekey Cloudflare will not serve // for the hostname -- a key deleted, rotated, or whose domain list no longer // matches -- api.js renders the widget SHELL (the container gets its hidden // cf-turnstile-response input) but never loads the challenge iframe, and // calls NEITHER the success callback NOR the error-callback. Nothing fires, so the // button stays disabled behind "Checking your browser..." for as long as the // page is open. Cloudflare's own always-pass test key issued a token from the // same page in the same browser, which is what proved the key rather than the // browser was at fault. // // That silence is why this outage was invisible: a form that cannot be // submitted makes no request, so there is no failed submission, no error rate // and no log line anywhere -- only the absence of enquiries, which looks // exactly like a quiet week. // // The watchdog turns the silence into something the visitor can see and act // on. It deliberately does NOT let the submission through: the server // verifies the token independently and would reject it anyway, and a form // that posts without a challenge is an open spam target. // A challenge that is WAITING FOR THE VISITOR is not a broken one. // // Cloudflare escalates a managed widget to an interactive tick-box when it // wants a human gesture -- which it starts doing after repeated submissions // from one address, i.e. exactly what testing a form looks like. No token // arrives until someone ticks it, which the timeout alone cannot tell apart // from silence, so the form used to condemn itself while a perfectly good // check sat above it asking to be clicked. // // This used to be told apart by looking for the challenge iframe. That can // never work: api.js draws the iframe inside a CLOSED shadow root, so from the // page a live widget is Cloudflare's wrapper, its hidden response input and an // apparently empty div -- querySelector finds no iframe for a box that is on // screen. On 2026-09-10 visitors looking at "Verify you're human" were told // the security check could not be loaded. // // Cloudflare SAYS when it puts the box up: before-interactive-callback. That // is the signal now. A sitekey it will not serve never says it, and neither // does an ERRORED widget, which is why a failure clears the flag -- a dead // challenge must not read as a patient one and hide the phone number. function challengeIsAlive() { return !turnstileErrored && turnstileAwaitingVisitor; } // Cloudflare's wrapper: the one part of the widget page script CAN see. function widgetPresent() { return !!(turnstileContainer && turnstileContainer.firstElementChild); } function turnstileUnavailable(reason) { if (turnstileToken) return; if (reason === "timeout" && challengeIsAlive()) { // Hand the wait back to the visitor instead of taking the form away. // No re-arming: from here the widget's own callbacks drive the button. clearTurnstileWatchdog(); submitDisabled(true); setSubmitState("blocked", "Complete the check above"); return; } // Rendered once and then destroyed, and the sweep did not catch it. Worth // another mount before handing the visitor a phone number: the challenge // that died was a working one. if ( reason === "timeout" && !turnstileErrored && window.turnstile && turnstileHadWidget && !widgetPresent() && turnstileRemounts < TURNSTILE_MAX_REMOUNTS ) { turnstileRemounts += 1; remountTurnstile(); return; } clearTurnstileWatchdog(); submitDisabled(true); setSubmitState("blocked", "Security check unavailable"); setStatus("error", TURNSTILE_FALLBACK_MESSAGE, "turnstile"); if (window.console && window.console.error) { // The CODE is the whole diagnosis and Cloudflare only ever hands it to // the error callback, which used to drop it -- leaving "an error in the // widget" as the most anyone could report. 110*** is a configuration // fault (sitekey/hostname); the rest are challenge failures. window.console.error( "[website2] Turnstile issued no token (" + reason + (turnstileErrorCode ? ", Cloudflare code " + turnstileErrorCode : "") + "). Every form on this page is unsubmittable. " + "Check the sitekey and its allowed hostnames in the Cloudflare Turnstile dashboard." ); } } // A widget that WAS there and is now gone. // // React can rebuild this subtree after hydration -- the same rebuild the // observer above exists to survive -- and a widget torn out with it does not // come back on its own: renderTurnstile() returns early forever once // turnstileWidgetId is set, and the guard that prevents double-wiring is on // the FORM, which need not be what died. // // "Gone" means Cloudflare's wrapper is gone, never "no iframe": the iframe // sits in a closed shadow root and is invisible even while it works (see // challengeIsAlive). Wrapper, hidden input and an empty-looking div is a // HEALTHY widget -- and was misread as a dead one on 2026-09-10. function remountTurnstile() { // Re-read from the form: a rebuild replaces the container, and rendering // into the detached one succeeds invisibly and issues no token. var live = form.querySelector("[data-website-form-turnstile]"); if (live) turnstileContainer = live; if (turnstileWidgetId !== null && window.turnstile && window.turnstile.remove) { try { window.turnstile.remove(turnstileWidgetId); } catch (err) {} } turnstileWidgetId = null; turnstileAwaitingVisitor = false; turnstileErrored = false; turnstileErrorCode = ""; // A clean slate: the wrapper and response input still sitting there belong // to a widget that no longer exists, and render() puts fresh ones back. if (turnstileContainer) turnstileContainer.innerHTML = ""; renderTurnstile(); armTurnstileWatchdog(); } // Called from the observer's sweep on every DOM change, so a challenge killed // by a rebuild comes back on the next frame instead of after the timeout. // Bounded and rate-limited, because this runs on every mutation and a remount // is itself a mutation. function healTurnstile() { if (turnstileToken || turnstileErrored || !window.turnstile) return; var live = form.querySelector("[data-website-form-turnstile]"); if (live && live !== turnstileContainer) turnstileContainer = live; if (!turnstileContainer) return; // Cloudflare's wrapper means a widget is there -- live, interactive or still // loading -- and those are the visitor's business, not ours. if (widgetPresent()) { turnstileHadWidget = true; return; } // Never rendered at all: there is nothing to put back, and retrying would // only hold the visitor behind a challenge that is not coming. if (!turnstileHadWidget) return; var now = Date.now(); if (now - turnstileMountedAt < TURNSTILE_REMOUNT_GAP_MS) return; if (turnstileRemounts >= TURNSTILE_MAX_REMOUNTS) return; turnstileRemounts += 1; remountTurnstile(); } form.__w2HealTurnstile = healTurnstile; function clearTurnstileWatchdog() { if (turnstileWatchdog === null) return; clearTimeout(turnstileWatchdog); turnstileWatchdog = null; } function armTurnstileWatchdog(ms) { clearTurnstileWatchdog(); turnstileWatchdog = setTimeout(function () { turnstileUnavailable("timeout"); }, ms || TURNSTILE_TIMEOUT_MS); } function renderTurnstile() { if (!turnstileContainer || turnstileWidgetId !== null) return; var sitekey = turnstileContainer.dataset.sitekey; if (!sitekey || !window.turnstile) return; submitDisabled(true); setSubmitState("loading", "Checking your browser\u2026"); turnstileMountedAt = Date.now(); turnstileWidgetId = window.turnstile.render(turnstileContainer, { sitekey: sitekey, theme: "auto", // Clears only the challenge's own message: a server error still on // screen is the visitor's only account of why the last send failed. callback: function (token) { clearTurnstileWatchdog(); turnstileToken = token; turnstileAwaitingVisitor = false; turnstileErrored = false; turnstileErrorCode = ""; submitDisabled(false); setSubmitState("ready"); if (statusOwner === "turnstile") setStatus("idle", ""); }, // Cloudflare reports two different kinds of failure through this one // callback, and they need opposite answers. // // A 110*** code is a CONFIGURATION fault -- the sitekey, or the hostname // it is not served for. No amount of retrying fixes it, so the visitor is // given the way out (email, phone) immediately rather than after fifteen // seconds of a check that was never going to pass. // // Anything else is a challenge that failed and can be taken again: the // widget draws its own retry, so the button just says what is blocking // it. Either way the code is kept, because it is the only thing that // names the cause and it used to be discarded here. "error-callback": function (code) { clearTurnstileWatchdog(); turnstileToken = ""; turnstileErrorCode = code ? String(code) : ""; turnstileErrored = true; turnstileAwaitingVisitor = false; if (turnstileErrorCode.indexOf("110") === 0) { turnstileUnavailable("error " + turnstileErrorCode); return; } submitDisabled(true); setSubmitState("blocked", "Complete the check above"); // Bounded: the widget's retry either produces a token or it does not, // and "does not" must not be an indefinite dead end. armTurnstileWatchdog(TURNSTILE_RETRY_GRACE_MS); if (window.console && window.console.warn) { window.console.warn("[website2] Turnstile challenge failed" + (turnstileErrorCode ? " (code " + turnstileErrorCode + ")" : "") + "; the visitor can retry it."); } }, // Cloudflare is putting the "Verify you're human" box up. From here the // wait is the visitor's, not a fault: the watchdog stands down, and a // fallback it already showed is taken back -- on a slow connection the box // can arrive after the timeout, and the phone number must not sit over a // check that is now ready to be ticked. A retry after a failure arrives // here too, which is why it clears the failure. "before-interactive-callback": function () { clearTurnstileWatchdog(); turnstileAwaitingVisitor = true; turnstileErrored = false; turnstileErrorCode = ""; if (turnstileToken) return; submitDisabled(true); setSubmitState("blocked", "Complete the check above"); if (statusOwner === "turnstile") setStatus("idle", ""); }, // The box is done with: ticked (a token or an error follows) or timed out // unticked (Cloudflare draws a fresh one, which calls the callback above // again). Either way something is owed, so the usual timeout bounds it. "after-interactive-callback": function () { turnstileAwaitingVisitor = false; if (turnstileToken || turnstileErrored) return; setSubmitState("loading", "Checking your browser\u2026"); armTurnstileWatchdog(); }, // Cloudflare refuses this browser outright; no amount of waiting fixes it. "unsupported-callback": function () { turnstileAwaitingVisitor = false; turnstileUnavailable("unsupported browser"); }, // Re-arm: an expiry puts us back to waiting on a token, which is exactly // the state the watchdog exists to bound. "expired-callback": function () { turnstileToken = ""; submitDisabled(true); setSubmitState("loading", "Re-checking\u2026"); armTurnstileWatchdog(); }, }); if (widgetPresent()) turnstileHadWidget = true; } // A token is SINGLE-USE: the server's verification spends it, and Cloudflare // refuses the same one twice. So every path that has already sent a token -- // a second enquiry from a form that stays on the page after success, or a // retry after the server said no -- has to run on a fresh one. Nothing used // to ask for it: the closure kept the spent token and the button came back // enabled, so the next send was rejected for a reason nothing on the page // could explain, and only a reload got the visitor out of it. function refreshTurnstile() { turnstileToken = ""; // A fresh challenge starts with a clean record: whatever failed last time // must not make the NEXT timeout read as a dead widget. turnstileAwaitingVisitor = false; turnstileErrored = false; turnstileErrorCode = ""; if (!turnstileContainer) return; submitDisabled(true); setSubmitState("loading", "Checking your browser\u2026"); if (turnstileWidgetId !== null && window.turnstile && window.turnstile.reset) { // reset() throws if the widget id is stale (React rebuilt the subtree // underneath it); a re-render is the recovery, not a dead form. try { window.turnstile.reset(turnstileWidgetId); } catch (error) { turnstileWidgetId = null; renderTurnstile(); } } armTurnstileWatchdog(); } if (turnstileContainer) { submitDisabled(true); setSubmitState("loading", "Checking your browser\u2026"); // Armed HERE, not inside renderTurnstile, so it also covers the cases where // render is never reached at all: api.js blocked by an extension or a // corporate proxy, or the script 404ing. armTurnstileWatchdog(); var TURNSTILE_SRC = "https://challenges.cloudflare.com/turnstile/v0/api.js"; if (window.turnstile) { renderTurnstile(); } else { var existing = document.querySelector('script[src="' + TURNSTILE_SRC + '"]'); if (!existing) { existing = document.createElement("script"); existing.src = TURNSTILE_SRC; existing.async = true; existing.defer = true; document.head.appendChild(existing); } existing.addEventListener("load", renderTurnstile); if (window.turnstile) renderTurnstile(); } } // Marketing-variant success dialog (replicates the source site's shadcn // Dialog): shown instead of replacing the form, closed by the X, the // overlay, the CTA, or Escape. var dialogEl = form.querySelector("[data-website-form-dialog]"); if (dialogEl) { var closeDialog = function () { dialogEl.hidden = true; }; Array.prototype.forEach.call(dialogEl.querySelectorAll("[data-website-form-dialog-close]"), function (el) { el.addEventListener("click", closeDialog); }); document.addEventListener("keydown", function (event) { if (event.key === "Escape" && !dialogEl.hidden) closeDialog(); }); } // Marketing-variant searchable combobox (replicates the source site's // Radix popover combobox): a hidden input carries the value so the submit // path reads it exactly like a native control. var comboboxResets = []; Array.prototype.forEach.call(form.querySelectorAll("[data-website-combobox]"), function (box) { var trigger = box.querySelector("[data-combobox-trigger]"); var valueEl = box.querySelector("[data-combobox-value]"); var hidden = box.querySelector('input[type="hidden"]'); var panel = box.querySelector("[data-combobox-panel]"); var search = box.querySelector("[data-combobox-search]"); var clearBtn = box.querySelector("[data-combobox-clear]"); var empty = box.querySelector("[data-combobox-empty]"); var options = Array.prototype.slice.call(box.querySelectorAll("[data-combobox-option]")); if (!trigger || !valueEl || !hidden || !panel) return; var placeholder = valueEl.textContent; function filter(query) { query = query.trim().toLowerCase(); var visible = 0; options.forEach(function (option) { var show = !query || option.getAttribute("data-value").toLowerCase().indexOf(query) !== -1; option.hidden = !show; if (show) visible++; }); if (empty) empty.hidden = visible > 0; } function close() { panel.hidden = true; trigger.setAttribute("aria-expanded", "false"); } function open() { panel.hidden = false; trigger.setAttribute("aria-expanded", "true"); if (search) { search.value = ""; filter(""); search.focus(); } } function choose(value) { hidden.value = value; valueEl.textContent = value || placeholder; valueEl.classList.toggle("is-placeholder", !value); options.forEach(function (option) { var selected = !!value && option.getAttribute("data-value") === value; option.classList.toggle("is-selected", selected); option.setAttribute("aria-selected", selected ? "true" : "false"); }); if (clearBtn) clearBtn.hidden = !value; close(); } comboboxResets.push(function () { choose(""); }); trigger.addEventListener("click", function () { if (panel.hidden) open(); else close(); }); if (search) search.addEventListener("input", function () { filter(search.value); }); options.forEach(function (option) { option.addEventListener("click", function () { choose(option.getAttribute("data-value")); }); }); if (clearBtn) clearBtn.addEventListener("click", function () { choose(""); }); document.addEventListener("click", function (event) { if (!box.contains(event.target)) close(); }); box.addEventListener("keydown", function (event) { if (event.key === "Escape") { close(); trigger.focus(); } }); }); // ------------------------------------------------------------------ uploads // // The "accept" attribute is a FILE PICKER FILTER, nothing more: every browser // offers "All files" in the same dialog, and a drag-drop or a scripted // submission never consults it at all. So it is re-checked here as a real // rule. // // This is a COURTESY, not a security boundary -- it runs on the visitor's // machine, so anything it enforces can be removed by the visitor. Its job is // to fail in a way the applicant can act on ("that's a .pages file, send a // PDF") in the instant they pick the file, instead of after a 10 MB upload // finishes and the server returns a number. The real gate is the byte-level // check on the server; see lib/website2-render/uploadPolicy.ts, which both // ends share. // // Kept in step with MAX_UPLOAD_BYTES in that module. Hard-coded rather than // interpolated because this script is a static string on purpose (see the // note on FORM_INIT_SCRIPT) -- no per-instance data is escaped into it. var MAX_UPLOAD_BYTES = 10 * 1024 * 1024; // The "accept" attribute, as a list of lower-case extensions with no dot. // Only extension entries are read: a MIME entry describes the same file in a // way the browser asserts rather than one the name shows, and every website // form's accept list is written in extensions. function acceptedExtensions(input) { var raw = (input.getAttribute("accept") || "").split(","); var out = []; for (var i = 0; i < raw.length; i++) { var entry = raw[i].trim().toLowerCase(); if (entry.charAt(0) === "." && entry.length > 1) out.push(entry.slice(1)); } return out; } function extensionOf(name) { var dot = String(name || "").lastIndexOf("."); if (dot < 0 || dot === String(name).length - 1) return ""; return String(name).slice(dot + 1).toLowerCase(); } /** A visitor-facing "PDF, DOC or DOCX" from the accept list. */ function describeAccepted(extensions) { var labels = []; for (var i = 0; i < extensions.length; i++) { var upper = extensions[i].toUpperCase(); if (labels.indexOf(upper) < 0) labels.push(upper); } if (labels.length <= 1) return labels[0] || ""; return labels.slice(0, -1).join(", ") + " or " + labels[labels.length - 1]; } /** The first problem with what this input holds, or "" if it is fine. */ function fileProblem(input) { var files = input.files; if (!files || !files.length) return ""; var extensions = acceptedExtensions(input); for (var i = 0; i < files.length; i++) { var file = files[i]; if (file.size > MAX_UPLOAD_BYTES) { return '"' + file.name + '" is too large. Keep it under 10 MB.'; } if (extensions.length && extensions.indexOf(extensionOf(file.name)) < 0) { return '"' + file.name + '" is not an accepted file type. Please upload a ' + describeAccepted(extensions) + "."; } } return ""; } /** Every problem across the form's file inputs, reported one at a time. */ function firstFileProblem() { var inputs = form.querySelectorAll('input[type="file"]'); for (var i = 0; i < inputs.length; i++) { var problem = fileProblem(inputs[i]); if (problem) return { input: inputs[i], message: problem }; } return null; } // Checked the moment a file is picked, so the applicant learns immediately // rather than after filling the rest of the form. The input is CLEARED on // rejection: leaving a file the form will not send sitting in a control that // says it is selected is how a submission silently loses its attachment. Array.prototype.forEach.call(form.querySelectorAll('input[type="file"]'), function (input) { input.addEventListener("change", function () { var problem = fileProblem(input); if (!problem) { setStatus("idle", ""); return; } input.value = ""; // The styled facade reads the input on its own change listener, which has // already run; fire another so it returns to its placeholder. // // BEFORE the message is set, never after. This handler is on the same // input, so the synthetic event re-enters it -- and by then the input is // empty, which is the "no problem" branch above, which clears the status. // Setting the error first meant it was wiped microseconds later and the // visitor watched their file disappear with no explanation at all. if (window.Event) input.dispatchEvent(new Event("change", { bubbles: false })); setStatus("error", problem); }); }); // Styled file fields: mirror the picked count onto the facade box. Array.prototype.forEach.call(form.querySelectorAll("[data-website-form-filebox]"), function (box) { var input = box.querySelector('input[type="file"]'); var text = box.querySelector("[data-filebox-text]"); if (!input || !text) return; var placeholder = text.textContent; input.addEventListener("change", function () { var count = input.files ? input.files.length : 0; text.textContent = count ? count + " file(s) selected" : placeholder; }); // form.reset() (the styled success path) clears the input silently. form.addEventListener("reset", function () { text.textContent = placeholder; }); }); // Application selects mimic the source's w-fit shadcn trigger: the control // hugs the SELECTED option's text (so it shrinks after a choice), padding // and chevron accounted for. Re-measured on change and after reset. if (form.dataset.variant === "application") { Array.prototype.forEach.call(form.querySelectorAll(".website-form-field select"), function (sel) { function fit() { var opt = sel.options[sel.selectedIndex]; var probe = document.createElement("span"); var cs = window.getComputedStyle(sel); probe.style.position = "absolute"; probe.style.visibility = "hidden"; probe.style.whiteSpace = "nowrap"; probe.style.fontSize = cs.fontSize; probe.style.fontWeight = cs.fontWeight; probe.style.fontFamily = cs.fontFamily; probe.textContent = opt ? opt.text : ""; document.body.appendChild(probe); // px-3.5 (15.12) + right padding incl. the glyph (39.76) + 2px borders sel.style.width = Math.ceil(probe.offsetWidth + 56.88) + "px"; probe.parentNode.removeChild(probe); } fit(); sel.addEventListener("change", fit); form.addEventListener("reset", function () { window.setTimeout(fit, 0); }); }); } // One field's answer, exactly as the submission carries it. Shared by the // submit handler and the per-step check, so "answered" means the same thing // on a Next click as it does on the final send. function fieldValue(field) { var el = form.elements.namedItem(field.key); if (field.type === "checkbox") return el && el.checked ? "yes" : ""; if (field.type === "checkboxes") { var picked = []; var boxes = form.querySelectorAll('input[type="checkbox"][name="' + field.key + '"]'); for (var i = 0; i < boxes.length; i++) if (boxes[i].checked) picked.push(boxes[i].value); return picked.join(", "); } if (field.type === "phone") { var code = form.elements.namedItem(field.key + "Code"); var number = el && "value" in el ? String(el.value || "").trim() : ""; return number ? ((code && code.value ? code.value + " " : "") + number) : ""; } return el && "value" in el ? String(el.value || "").trim() : ""; } function fieldMissing(field) { if (!field.required || field.type === "note") return false; if (field.type === "file") { var fileEl = form.elements.namedItem(field.key); return !fileEl || !fileEl.files || !fileEl.files.length; } return !fieldValue(field); } function focusField(field) { var focusEl = form.elements.namedItem(field.key); // A radio group comes back as a list rather than one control. if (focusEl && !focusEl.focus && focusEl.length) focusEl = focusEl[0]; if (focusEl && focusEl.focus) focusEl.focus(); } // ------------------------------------------------------------------- steps // // A form with "step" rows is drawn as one fieldset per step, all in the // server markup, every one after the first hidden. This shows one at a time. // It is still ONE form with ONE submission: the hidden steps' controls stay // in form.elements, so the send below reads every answer exactly as a // single-page form's does and the wire format cannot tell the difference. var stepPanels = Array.prototype.slice.call(form.querySelectorAll("[data-website-form-step]")); var stepped = stepPanels.length > 1; var currentStep = 0; var backBtn = form.querySelector("[data-website-form-back]"); var nextBtn = form.querySelector("[data-website-form-next]"); var announceEl = form.querySelector("[data-website-form-announce]"); // Which field keys each step holds, stamped by the server beside data-fields // (which cannot carry it: it is what the submission sends). var stepKeys = []; try { stepKeys = JSON.parse(form.dataset.steps || "[]"); } catch (err) { stepKeys = []; } var PROGRESS_TTL_MS = 24 * 60 * 60 * 1000; // Held while a card is picked with the ARROW keys, which move the selection // through a radio group one option at a time. Advancing on those would throw // a keyboard user onto the next step for merely passing an option. var arrowPick = false; function stepOfKey(key) { for (var s = 0; s < stepKeys.length; s++) if (stepKeys[s] && stepKeys[s].indexOf(key) >= 0) return s; return -1; } // In-progress answers survive a refresh -- and the React rebuild the observer // above re-wires after, which would otherwise drop a visitor back on step // one with every answer gone. Session storage: this tab, this visit, never // sent anywhere, and never the file inputs (which cannot be restored) or the // honeypot and challenge fields. function progressKey() { var index = Array.prototype.indexOf.call(document.querySelectorAll("form.website-form"), form); return "w2-form-progress:" + window.location.pathname + ":" + (form.dataset.formId || "") + ":" + index; } function progressControl(el) { var name = el.name; if (!name || name === "w2_hp" || name.indexOf("cf-") === 0 || name.indexOf("g-recaptcha") === 0) return false; if (el.type === "file" || el.type === "submit" || el.type === "button") return false; // The styled combobox's value rides in a hidden input; no other hidden one is ours. if (el.type === "hidden") return !!(el.closest && el.closest("[data-website-combobox]")); return true; } function saveProgress() { if (!stepped) return; var values = {}; Array.prototype.forEach.call(form.elements, function (el) { if (!progressControl(el)) return; if (el.type === "radio") { if (el.checked) values[el.name] = el.value; return; } if (el.type === "checkbox") { var list = values[el.name] || []; if (el.checked) list.push(el.value); values[el.name] = list; return; } values[el.name] = el.value; }); try { window.sessionStorage.setItem(progressKey(), JSON.stringify({ t: Date.now(), step: currentStep, values: values })); } catch (err) {} } function clearProgress() { try { window.sessionStorage.removeItem(progressKey()); } catch (err) {} } /** Puts saved answers back and returns the step the visitor was on. */ function restoreProgress() { var saved = null; try { saved = JSON.parse(window.sessionStorage.getItem(progressKey()) || "null"); } catch (err) { saved = null; } if (!saved || typeof saved !== "object" || !saved.values || Date.now() - (Number(saved.t) || 0) > PROGRESS_TTL_MS) return 0; Array.prototype.forEach.call(form.elements, function (el) { if (!progressControl(el) || !Object.prototype.hasOwnProperty.call(saved.values, el.name)) return; var value = saved.values[el.name]; if (el.type === "radio") { el.checked = el.value === value; return; } if (el.type === "checkbox") { el.checked = Array.isArray(value) && value.indexOf(el.value) >= 0; return; } if (typeof value !== "string") return; if (el.type === "hidden") { // Through the combobox's own option, so its visible label follows. var options = el.closest("[data-website-combobox]").querySelectorAll("[data-combobox-option]"); for (var o = 0; o < options.length; o++) { if (options[o].getAttribute("data-value") === value) { options[o].click(); break; } } return; } el.value = value; }); return Number(saved.step) || 0; } function showStep(index, moveFocus) { if (!stepped) return; index = Math.max(0, Math.min(stepPanels.length - 1, index)); currentStep = index; var last = index === stepPanels.length - 1; var panel = stepPanels[index]; stepPanels.forEach(function (each, i) { each.hidden = i !== index; }); Array.prototype.forEach.call(form.querySelectorAll("[data-website-form-progress-step]"), function (item, i) { item.classList.toggle("is-current", i === index); item.classList.toggle("is-done", i < index); if (i === index) item.setAttribute("aria-current", "step"); else item.removeAttribute("aria-current"); }); var fill = form.querySelector("[data-website-form-progress-fill]"); if (fill) fill.style.width = Math.round(((index + 1) / stepPanels.length) * 100) + "%"; var count = form.querySelector("[data-website-form-progress-current]"); if (count) count.textContent = String(index + 1); if (backBtn) { backBtn.hidden = index === 0; backBtn.textContent = panel.getAttribute("data-back-label") || "Back"; } if (nextBtn) { nextBtn.hidden = last; nextBtn.textContent = panel.getAttribute("data-next-label") || "Next"; } // Only the last step sends. Hiding is not disabling: the challenge owns // the button's disabled state and must keep owning it. if (submitBtn) submitBtn.hidden = !last; if (moveFocus) { // Announced as well as focused: the focus lands on a field, whose own // label says nothing about the visitor having moved on a screen. if (announceEl) { var title = panel.getAttribute("data-step-label"); announceEl.textContent = "Step " + (index + 1) + " of " + stepPanels.length + (title ? ": " + title : ""); } var target = panel.querySelector('input[type="radio"]:checked') || panel.querySelector('input:not([type="hidden"]):not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled])') || panel.querySelector("[data-website-form-step-title]"); if (target && target.focus) target.focus(); } saveProgress(); } /** Checks the current step and moves on. Returns false when there is nowhere to go. */ function advance() { if (!stepped || currentStep >= stepPanels.length - 1) return false; var all = JSON.parse(form.dataset.fields || "[]"); var keys = stepKeys[currentStep] || []; for (var i = 0; i < all.length; i++) { if (keys.indexOf(all[i].key) < 0 || !fieldMissing(all[i])) continue; setStatus("error", (all[i].label || all[i].key) + " is required.", "step"); focusField(all[i]); return true; } var files = stepPanels[currentStep].querySelectorAll('input[type="file"]'); for (var f = 0; f < files.length; f++) { var problem = fileProblem(files[f]); if (problem) { setStatus("error", problem); files[f].focus(); return true; } } // The challenge's own message stays: it is about the send, not this step. if (statusOwner !== "turnstile") setStatus("idle", ""); showStep(currentStep + 1, true); return true; } if (stepped) { if (nextBtn) nextBtn.addEventListener("click", function () { advance(); }); if (backBtn) { backBtn.addEventListener("click", function () { if (statusOwner !== "turnstile") setStatus("idle", ""); showStep(currentStep - 1, true); }); } // Enter moves on from any single-line control. Not from a textarea (a new // line), a button (which clicks itself) or the combobox (which picks). The // browser's own implicit submit cannot be relied on for this: it is // skipped outright while the challenge holds the submit button disabled. form.addEventListener("keydown", function (event) { var key = event.key; if (key === "ArrowUp" || key === "ArrowDown" || key === "ArrowLeft" || key === "ArrowRight") { arrowPick = true; return; } if (key !== "Enter" || event.isComposing || currentStep >= stepPanels.length - 1) return; var target = event.target; if (!target || !target.tagName || target.tagName === "TEXTAREA" || target.tagName === "BUTTON" || target.tagName === "A") return; if (target.closest && target.closest("[data-website-combobox]")) return; event.preventDefault(); advance(); }); form.addEventListener("keyup", function () { arrowPick = false; }); form.addEventListener("input", saveProgress); form.addEventListener("change", function (event) { var fromArrows = arrowPick; arrowPick = false; saveProgress(); var target = event.target; if (fromArrows || !target || target.type !== "radio" || !target.closest || !target.closest("[data-website-form-choices]")) return; var panel = target.closest("[data-website-form-step]"); if (!panel || stepPanels.indexOf(panel) !== currentStep || panel.getAttribute("data-auto-advance") !== "true") return; // A beat, so the pick is SEEN landing before the screen changes. window.setTimeout(function () { if (stepPanels.indexOf(panel) === currentStep) advance(); }, 220); }); showStep(restoreProgress(), false); } form.addEventListener("submit", function (event) { event.preventDefault(); // A stepped form only sends from its last step. Anything that submits it // earlier -- a browser's implicit submit, a script -- is a Next. if (stepped && currentStep < stepPanels.length - 1) { advance(); return; } if (submitBtn && submitBtn.disabled) return; // Re-checked at submit, not only on change: a file can reach the input // without a change event the listener above saw -- a drag-drop onto the // control, an autofill, or the form being submitted by script. The upload // is the expensive part of this request, so refusing here costs the // visitor nothing and saves them a 10 MB round trip. var badFile = firstFileProblem(); if (badFile) { var filePanel = stepped && badFile.input.closest ? badFile.input.closest("[data-website-form-step]") : null; if (filePanel) showStep(stepPanels.indexOf(filePanel), false); setStatus("error", badFile.message); if (badFile.input.focus) badFile.input.focus(); return; } var fields = JSON.parse(form.dataset.fields || "[]"); var values = {}; var hasFiles = false; fields.forEach(function (field) { if (field.type === "note") { return; } if (field.type === "file") { hasFiles = true; return; } values[field.key] = fieldValue(field); }); // Required fields, checked HERE because nothing else in the browser does. // // The carries noValidate, so the browser's own required handling is // switched off -- it has to be, or the hidden inputs behind the styled // select and file controls would fail validation on an element that cannot // be focused or shown, which is a submit that silently does nothing. The // cost was that "required" reached the visitor as a red asterisk and a // rendered attribute that no longer meant anything: the form posted, the // server answered "Phone is required", and the round trip was the first // feedback anyone got. // // The server still checks (see the careers branch in form-submit -- it does // not trust this list, which the client sends). This is the half that can // point at the actual field. var missing = null; for (var f = 0; f < fields.length && !missing; f++) { if (fieldMissing(fields[f])) missing = fields[f]; } if (missing) { // On a stepped form the unanswered question can be on an earlier screen // (answers restored after a refresh, say): go back to it, or the focus // lands on a hidden control and the visitor sees only the message. var missingStep = stepped ? stepOfKey(missing.key) : -1; if (missingStep >= 0 && missingStep !== currentStep) showStep(missingStep, false); setStatus("error", (missing.label || missing.key) + " is required."); focusField(missing); return; } submitDisabled(true); setSubmitState("sending", "Sending\u2026"); setStatus("idle", ""); var meta = { fields: fields, values: values, // Which saved form this is, when the page placed one. The CRM files the // submission against it and applies that form's own lead mapping; empty // for a form whose fields were typed into the page. formId: form.dataset.formId || "", path: window.location.pathname, // The page's title, so a form typed into the page is filed and // acknowledged under "Request a Dexa POS Quote" rather than under its // address. The " | Site name" suffix is the layout's, not the page's. formName: (document.title || "").split(" | ")[0].trim().slice(0, 160), company_website: honeypot ? honeypot.value : "", startedAt: startedAt, turnstileToken: turnstileToken, confirmation: form.dataset.confirmation || "", // "support" files the submission as a Website Support conversation as // well as a lead; "careers" files it as an application against jobId; // anything else (or nothing) keeps the lead-only path. intent: form.dataset.intent || "", jobId: form.dataset.jobId || "", }; var request; if (hasFiles) { // A file cannot ride in JSON, so a form with an upload switches to // multipart: the text answers travel as one "payload" part and each // file as its own "file:" part. The browser sets the multipart // boundary itself, so no content-type header is set here. var fd = new FormData(); fd.append("payload", JSON.stringify(meta)); fields.forEach(function (field) { if (field.type !== "file") return; var el = form.elements.namedItem(field.key); if (el && el.files) { for (var i = 0; i < el.files.length; i++) fd.append("file:" + field.key, el.files[i]); } }); request = fetch("/api/website2/form-submit", { method: "POST", body: fd }); } else { request = fetch("/api/website2/form-submit", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(meta), }); } request .then(function (res) { return res.json().catch(function () { return {}; }).then(function (body) { return { ok: res.ok, body: body }; }); }) .then(function (result) { if (!result.ok || !result.body || !result.body.success) { setStatus("error", (result.body && result.body.error) || "Something went wrong. Please try again.", "server"); if (turnstileContainer) { // The rejected send spent the token either way -- the server // verifies it before it decides anything else. refreshTurnstile(); } else { submitDisabled(false); setSubmitState("ready"); } return; } if (form.dataset.variant && dialogEl) { // The source contact form resets and stays usable behind its // success dialog rather than being replaced. form.reset(); comboboxResets.forEach(function (fn) { fn(); }); // A fresh enquiry starts on the first screen, with nothing left over // to restore on the next visit. (showStep saves, so clear after it.) if (stepped) { showStep(0, false); clearProgress(); } dialogEl.hidden = false; if (turnstileContainer) { // Stays usable behind the dialog, so it needs a fresh challenge // before the next enquiry -- not the one just spent. refreshTurnstile(); } else { submitDisabled(false); setSubmitState("ready"); } } else { // Sent: nothing left to restore on the next visit. if (stepped) clearProgress(); var success = document.createElement("p"); success.className = "website-form-success"; success.textContent = successMessage; form.replaceWith(success); } }) .catch(function () { setStatus("error", "Something went wrong. Please try again."); submitDisabled(false); setSubmitState("ready"); }); }); }

Insights for smarter payments

Testing Post