AIA Form A Jotform styling and conditional-button guide

This directory contains the accepted CSS backup and integration guidance for AIA Form A. aia-form-a.css is intended for Jotform Classic Forms' Form Designer → Styles → Inject Custom CSS under owner-controlled configuration review. The existing repository CSS is the accepted backup; do not regenerate it from Astro styles.

The CSS translates the existing AIA form treatment: Rubik typography, blue labels and text, #fcf9f5 inputs with #edeef3 borders, the #ffbd59 filled button, the #ff914d hover/focus border, four-pixel corners, visible validation errors, and strong keyboard focus. The Astro page supplies the heading, introduction, privacy-policy link, and surrounding card. The stylesheet therefore removes the Jotform surface rather than adding another header, footer, or nested card.

The selectors target Jotform Classic Forms identifiers such as #form, .form-all, .form-line, .form-label, .form-sub-label, .form-required, .form-textbox, .form-dropdown, .form-textarea, .form-error-message, and .form-submit-button. Jotform's final generated DOM must be checked in the account before relying on pixel-level parity. The stylesheet does not hide required indicators, error messages, honeypots, or focus outlines, and it does not request fonts or other external assets.

The current Builder theme reconciliation adds narrowly scoped !important declarations to the outer surface, labels, inputs, and submit-button treatments that Jotform's generated theme otherwise overrides. Error, required-indicator, and focus rules remain visible and are deliberately not reset. The account owner must still confirm the final generated DOM and rendered form after any Jotform theme or field change.

Installation and comparison

Open the approved Form A in AIA's HIPAA-enabled Jotform account. Do not change its fields or settings from this repository workflow.
Preserve the approved account configuration; account changes and site cutover require their separate authorization.
Paste the contents of aia-form-a.css into Jotform's custom CSS area.
Compare the Jotform preview with the Astro Form A mock at 390px and 1440px. Check the form surface, label rhythm, input height, button fill, outlined hover/focus state, error state, and mobile reflow.
Check both English and Spanish configurations. Confirm translated labels, required indicators, validation messages, confirmation copy, and the accessible iframe title supplied by the parent Astro integration.
Test the form in a real embedded iframe and on the direct hosted-form fallback. Confirm the iframe has a practical mobile height, does not create horizontal overflow, and does not trap keyboard focus.

The optional Astro meeting preview requires PUBLIC_AIA_FORMS_MODE=mock and PUBLIC_AIA_FORM_A_PREVIEW=true in a non-indexing build. It does not load Jotform and is not a live submission test.

Current Form A operation — superseding decision, 2026-10-30

The owner authorizes real Form A on the publicly reachable development host https://aia.web3app.dev/. Normal development and static builds use live Form A without environment flags. This intentionally supersedes the former isolated-test and seven-route production approval gates. It is not site-cutover authorization.

From www/:

npm run dev
npm run build
# Optional offline/restricted artifact:
PUBLIC_AIA_FORMS_MODE=off npm run build
# Optional synthetic fixtures:
PUBLIC_AIA_FORMS_MODE=mock npm run dev

PUBLIC_AIA_FORMS_MODE is optional; missing/empty means live. The only accepted values are live, off, and mock. Remove obsolete isolated-test settings from local environment files; invalid explicit values stop the build with actionable guidance. The former live/isolated/consultation/production approvals and form environment role are removed, with no replacement gates. PUBLIC_ALLOW_INDEXING controls publication independently: both staging and indexing builds use the same 16 placements. Explicit off/mock builds contain no real Form A iframe.

One typed registry in src/utils/form-integration.ts fixes every route, locale and context. No visitor query, referrer, arbitrary URL or option preselection is forwarded. The only origin/ID is https://form.jotform.com/262946078314059. Every URL has exactly formContext and language parameters:

Context	Routes	Loading
contact	`/contact` (en), `/es/contact` (es)	Immediate, 2
landing	`/lp/aba-therapy`, `/lp/aba-insurance`, `/lp/aba-ahcccs`, `/lp/aba-private-pay`, `/lp/early-intervention` (en)	Immediate, 5
consultation	`/client-consultation` (en), `/es/client-consultation` (es), `/schedule-consultation` (en)	Immediate, 3
consultation	`/aba-therapy`, `/autism-evaluations`, `/learner-social-club` (en), and their `/es/` counterparts (es)	Deferred, 6

The context is presentation-only. Physical Form B is retired. No Form C is planned. /referrals independently links to the existing hosted Jotform https://form.jotform.com/231638510219149, not to Form A. That link is owner-directed but its legacy form's runtime privacy/recipient acceptance remains separate from Form A. Other routes cannot acquire Form A by setting a mode. The typed future Academy service copy does not publish another page.

Live service drawers open at four seconds OR 50% scroll, canceling the unused trigger. Dismissal or verified completion sets the existing shared 30-day suppression timestamp. The existing service CTA overrides automatic suppression; without JavaScript it remains a normal consultation-page link. Jotform loads only when the drawer opens. Off mode never automatically opens an inactive drawer. Mock mode retains the existing synthetic fixture workflow.

A verified submission-completed message must match the exact approved origin, actual activated/open iframe window, approved form ID and action. It displays a localized acknowledgment, waits five seconds, then uses the existing slide-out. Duplicate messages cannot restart the countdown. Manual close/navigation cancels it; suppression remains. Deliberate reopening after completion creates a fresh iframe. Provider-envelope acceptance still requires the owner-controlled real submission check; synthetic browser messages are not that acceptance.

The shared iframe preserves fixed responsive heights, accessible EN/ES titles, referrerpolicy="no-referrer", and sandbox="allow-forms allow-scripts allow-same-origin". No popup, top-navigation, camera, microphone, payment or geolocation permissions are added. The hosted fallback is outside the iframe and hidden without layout space until a 15-second missing-load timeout. Late load hides it; disposal cancels timers. A localized noscript fallback remains. Load does not prove application health or submission. No helper script, cross-origin DOM inspection, arbitrary messaging or submission forwarding is introduced. The official resize handler remains unimplemented and conditionally acceptable only after its separate security/browser review.

Owner-reported direct EN/ES synthetic acceptance and sampled embedded acceptance (English contact, Spanish contact and one ABA landing page) remain recorded as owner evidence. This change does not independently verify Jotform or resolve its Spanish consultation dropdown discrepancy, runtime telemetry, fluent-language, screen-reader, final HTTPS-host or operational recipient review.

For form rollback, explicitly set PUBLIC_AIA_FORMS_MODE=off, rebuild, verify --forms=off, and use the separately authorized artifact-switch procedure. Removing that override restores live, so removing settings is not rollback. Do not change the Jotform account as part of an Astro rollback.

Artifact checks (build matching output first):

node tools/phase10-artifact-verify.mjs --mode=staging --forms=live
# For PUBLIC_ALLOW_INDEXING=true output:
node tools/phase10-artifact-verify.mjs --mode=indexing --forms=live
# For explicit off or mock output, select the matching --forms value.

Employee-portal ciphertext remains separately gated by its own approval, private input and non-indexing preview requirement. Form A modes cannot authorize it.

Existing professional referral destination (owner decision 2026-11-01)

/referrals has one Refer a Client link to the existing hosted Jotform. It does not embed Form A or use Form C. No new form, question, Jotform integration, query parameter or notification routing is introduced. Test the link and verify the separate existing form's privacy, field necessity, recipients and confirmation with its account owner before release.

Form context and button labels

The current Form A design uses a hidden formContext value with fixed, approved values such as contact and landing. Jotform does not provide a native conditional rule that changes one Submit button's accessible label safely in every context. If owner-approved context-specific labels are required, use multiple native Jotform Submit buttons and Jotform's conditional visibility rules:

Add one native Submit button for each approved context/language label.
Show exactly one intended Submit button for the current, validated formContext.
Keep every button a real Jotform Submit control; do not use CSS ::before/::after text as a label.
Verify that every visible variant submits through the same approved form and preserves the honeypot and validation behavior.
Make the no-context and invalid-context states fail closed: no ambiguous extra button and no unintended submission path.
Verify keyboard order, focus visibility, screen-reader names, English/Spanish labels, and mobile layout for every variant.

All five landing routes use Form A's fixed landing context. The nine consultation placements use its fixed consultation context. Jotform owns native Submit labels and conditions. Do not add an external Astro button that attempts to submit a cross-origin iframe.

Verification checklist

Direct English/Spanish Form A language handling, conditional email requirement, synthetic submission and native thank-you were owner-verified; this is not embedded-iframe acceptance.
Direct staff-notification/autoresponder delivery, generic no-answer/no-PDF content, fixed Reply-To, recipient access/retention, and absent webhooks/integrations were owner-verified for Form A.
Exact remaining Form A consultation question properties, choices, conditional routing and availability, and consultation language/configuration, are approved.
English and Spanish embedded-iframe labels, validation, confirmation, and button variants are reviewed by fluent-language owners.
The hidden honeypot remains present, effective, and excluded from user-facing visual changes.
Exactly one native Submit button is visible for every valid context.
Invalid or missing context does not expose an unintended submission path.
No PHI-bearing answer, PDF, recipient, redirect, webhook, or HTTP POST forwarding is inherited without privacy/security approval.
Owner-reported embedded synthetic submission and confirmation passed on English contact, Spanish contact and one ABA landing placement; record the exact ABA path in the owner test log before release.
All sixteen placements have final responsive, keyboard, screen-reader and fluent-language acceptance, including timeout/fallback and error expansion.
Jotform runtime requests, telemetry and cross-origin failure behavior are reviewed with privacy/security owners.
No Jotform, Contabo, analytics, advertising, or production API request is made by off/mock builds.

Existing owner-verification scopes remain recorded in the contract/checklist. Outstanding consultation configuration acceptance, runtime/privacy, accessibility, fluent-language and site-release gates remain open. Default-live Form A is owner-authorized; this guide does not authorize Jotform account changes or site deployment.

12 KiB Raw Blame History