Embedding

Put a hosted form inside your own page with an iframe that resizes itself and reports submissions.

Add ?embed=1 to the hosted URL to remove the page background and card so the form sits flush in your layout. The embed posts its height to the parent page whenever it changes, so the iframe never needs a scrollbar.

Embed snippet

<iframe id="pv-form" src="https://forms.pixelverse.tech/f/your-slug?embed=1"
  width="100%" height="600" style="border:0;max-width:100%"
  title="Contact form" loading="lazy"></iframe>
<script>
  const pvFrame = document.getElementById('pv-form')
  addEventListener('message', (e) => {
    // Only trust messages from the form itself, not from other frames on the page.
    if (e.origin !== 'https://forms.pixelverse.tech' || e.source !== pvFrame.contentWindow) return
    if (e.data?.type === 'pixelverse-forms:height') {
      pvFrame.style.height = e.data.height + 'px'
    }
    if (e.data?.type === 'pixelverse-forms:submitted') {
      // e.data.formId, e.data.slug — track a conversion, close a modal…
    }
  })
</script>

Messages

type	When	Data
`pixelverse-forms:height`	On load and every resize	`height` in pixels
`pixelverse-forms:submitted`	After a successful submission	`formId`, `slug`

Prefill through the embed

Query parameters pass straight through: ?embed=1&email=jane%40acme.com. See Prefill and UTM.

Frameworks

In React, Vue or Svelte render the iframe like any element and attach the message listener in a mount hook. Site builders such as Webflow and Framer accept the snippet in an embed block. The form is served over HTTPS and allows framing from any origin.

Something missing or wrong? Email us and we will fix it.