4leggedITTemplate

    Standards

    FormEmbedModal pattern

    Primary form CTAs should use the shared modal pattern instead of navigating directly to the provider form.

    Example

    The trigger is an anchor so no-JS fallback navigation still opens in a new tab. This component is provider-agnostic — swap in a JotForm, Google Forms, or any other iframe-embeddable form URL; the example below happens to use a Google Forms URL only because it's an easy one to demo live.

    Open applicationHaving trouble? Open the application in a new tab

    Controlled mode

    Use controlled mode when page logic needs to open/close the form modal from non-anchor UI controls.

    Standard

    - In-modal direct link ("Open in new tab") is required.

    - On-page helper link is required and must use `js-only`.

    - `<noscript>` direct-link fallback is required.

    - Modal trigger anchors must use `target="_blank"` + `rel="noopener noreferrer"`.

    - Modifier-key trigger clicks (Cmd/Ctrl/Shift/Alt) must preserve direct new-tab navigation.

    - Controlled mode (`open` + `onOpenChange`) is required for external trigger use cases.

    - No duplicate fallback links in no-JS mode.

    - `asButton` (default `true`) renders the trigger as a styled button; pass `false` with custom `children` to use your own trigger element.

    - `triggerVariant`/`triggerSize` (both default `"default"`) control button styling when `asButton` is used.

    - Standard helper text: `Having trouble? Open the application in a new tab`

    - Component: `template/src/components/patterns/FormEmbedModal.tsx`