@velnai/form-react

Drop a Velnai lead-capture form into any React app.

npm install @velnai/form-react

Usage

import { VelnaiForm } from '@velnai/form-react'

export function ContactPage() {
  return (
    <VelnaiForm
      publicKey="frm_abc123"
      prefill={{ email: '[email protected]', name: 'Alex' }}
      onSubmit={() => alert('Thanks!')}
    />
  )
}

Props

| Prop | Type | Default | What it does | |---|---|---|---| | publicKey | string | required | The form's public key. Find it in the dashboard's Install tab (e.g. frm_abc123). | | prefill | Record<string, unknown> | — | Field values to pre-populate, keyed by field name. Re-sent if the prop reference changes. | | lang | string | — | Locale code (e.g. 'es'). Forwarded as ?lang= so the renderer picks the matching translation. | | previewToken | string | — | Optional preview token for DRAFT forms. Copy it from the dashboard's Preview button URL. | | onView | () => void | — | Fires once the iframe boots and the form is interactive. | | onSubmit | () => void | — | Fires when the visitor submits the form successfully. | | onClose | () => void | — | Fires when a modal-mode form requests to close. | | onRedirect | (url: string) => boolean \| void | — | Called with a target URL before top-level navigation. Return true to suppress default navigation. | | formsBase | string | 'https://forms.velnai.com' | Override the forms host (self-hosted / staging). | | autoResize | boolean | true | Auto-resize iframe height to match content. | | initialHeight | number | 600 | Initial iframe height (px) before auto-resize takes over. | | className | string | — | CSS class on the iframe. | | style | React.CSSProperties | — | Inline style on the iframe. |

Security

The form renders inside a sandboxed iframe — the host page cannot access the iframe's DOM, cookies, or localStorage. The iframe sandbox is:

allow-forms allow-scripts allow-top-navigation-by-user-activation allow-popups

No allow-same-origin, so any attempt by host-page JS to reach into the iframe document raises a SecurityError. Submissions go directly from the iframe to forms.velnai.com — the host page never sees the data.

Why iframe instead of native rendering?

The form has 30+ field types (signature, file upload, payment, scheduling, address autocomplete, etc.) with conditional logic, A/B variants, theming, and i18n. A native React port would have to ship those again and stay in sync forever. Iframe keeps you on the same renderer as everyone else — features land in your React app the day they ship.

License

MIT