145 lines
11 KiB
Markdown
145 lines
11 KiB
Markdown
# 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`](./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
|
|
|
|
1. Open the approved Form A in AIA's HIPAA-enabled Jotform account. Do not change its fields or settings from this repository workflow.
|
|
2. Preserve the approved account configuration; account changes and site cutover require their separate authorization.
|
|
3. Paste the contents of `aia-form-a.css` into Jotform's custom CSS area.
|
|
4. 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.
|
|
5. 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.
|
|
6. 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/`:
|
|
|
|
```sh
|
|
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. Form C and
|
|
`/referrals` remain inactive; 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):
|
|
|
|
```sh
|
|
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.
|
|
|
|
## 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
|
|
|
|
- [x] 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.
|
|
- [x] 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, plus future Form C 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.
|
|
- [x] 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.
|