Embed Laravel Forms in Blade, Livewire, Vue, React, and WordPress

Choose an embedding method by browser boundary, not framework logo. Blade and Livewire inside the same Laravel app can share a server component. A separate React site or WordPress installation needs isolation, messaging, and an explicit session strategy.

There are three honest integration shapes:

1. a native Livewire component in the same application;
2. a full-page iframe across application or origin boundaries;
3. a purpose-built JavaScript widget/API, which is separate infrastructure.

Having a JSON form schema does not automatically create a framework-neutral browser widget.

Integration matrix

Blade and Livewire: stay native

In the host Laravel application, render the server component directly. This preserves the normal session, CSRF protection, route middleware, uploads, validation, and Livewire request cycle.

Load Filament/Livewire assets according to the installed versions and avoid injecting the same runtime twice. The Livewire installation guide documents manual asset control.

If a Vue or React island exists on the same page, mount it into its own root. Do not hydrate or patch the element tree Livewire owns. Both React and Vue support incremental mounting.

Cross-site: use an iframe first

An iframe keeps the complete Laravel page, scripts, styles, and submit flow on its own origin. That is often more reliable than reimplementing validation and uploads in the parent application.

Give the iframe a meaningful title, a useful initial height, a loading state, and a fixed-height fallback. The parent cannot read cross-origin content height directly.

Allow only intended parents

Set a response header such as:

Content-Security-Policy: frame-ancestors 'self' https://www.example.com

frame-ancestors controls who may embed the page. It is not inherited from default-src, and it cannot be delivered via a <meta> tag. See MDN's frame-ancestors reference.

Avoid an allow-everywhere default for private or tenant-specific forms. Generate the policy from server-owned domain configuration.

Resize and report completion with postMessage

Define a small, versioned contract:

{ "source": "filaforms", "version": 1, "type": "height", "value": 842 }

The parent handler must verify both event.origin and event.source, then validate the message shape and bounds before changing the iframe. The child should use an exact target origin, never *, for sensitive events.

Use explicit ready, height, and submitted messages. An iframe load event does not mean a form submission succeeded. Follow MDN postMessage security guidance.

Sandbox only when you understand the trade-off

An iframe sandbox without allow-forms blocks submission; Livewire needs scripts. Combining allow-scripts and allow-same-origin for same-origin content weakens the intended isolation. A separate origin can make sandboxing more meaningful.

Start from the form's requirements and add the smallest capabilities that work. Test navigation, downloads, uploads, modals, and success redirects.

CSRF and third-party cookies

Laravel CSRF tokens are session-backed, and Livewire updates use the form origin. A cross-site iframe may lose or partition its session under browser third-party-cookie policy. SameSite=None requires Secure, but it does not guarantee every browser will accept an unrestricted third-party cookie.

Prefer a same-site custom domain or reverse-proxy arrangement when possible. Test Safari, Chrome, and Firefox in their default privacy modes. Do not “fix” the problem by globally disabling CSRF.

If a true API/widget is needed, design its own origin allowlist, token model, CORS response, abuse controls, uploads, and idempotency. That is a product, not a snippet.

A safe WordPress shortcode shape

A WordPress plugin can register a prefixed shortcode that validates attributes and returns escaped iframe markup. Allow only known form identifiers and configured origins; do not concatenate arbitrary URLs from editor input. WordPress documents the return/escaping rules in its shortcode guide.

The same postMessage bridge can resize the frame, but the script must bind to the expected iframe window and form origin.

Cross-browser test matrix

Test at least:

• same-app native render and submit;
• same-site and cross-site iframe sessions;
• rejected parent domain under CSP;
• forged message origin and wrong event.source;
• long validation errors triggering resize;
• upload and multi-step navigation;
• expired session and CSRF response;
• successful completion event exactly once;
• keyboard access and meaningful iframe title;
• blocked third-party cookies with a useful recovery path.

Start with the public Filament form foundation. Embedding is successful when the child retains ownership of validation and security while the parent receives only the small layout and completion signals it needs.