Skip to main content
When you embed the OpnForm form editor in an iframe (for example inside a headless CMS), the editor sends postMessage events to the parent window so you can react to save, delete, and back-navigation actions.
Editor embedding is available only to approved OpnForm partners with a signed agreement. If OpnForm has not enabled this option for your organization, embedding the editor on your site will not work. To discuss partner access, contact julien@opnform.com.
These events are separate from the JavaScript SDK events used for public form embeds (submit, pageChange, etc.).

​
Message format

All editor events use this structure: 
{
  type: 'opnform:editor:event',
  event: 'formSaved' | 'formDeleted' | 'navigateBack',
  payload: { /* event-specific data */ }
}

​
Events

EventWhen it firesPayload
formSavedEditor save succeeds (create or update){ form: { id, slug, title, visibility }, isNew: boolean }
formDeletedForm is permanently deleted{ form: { id, slug, title, visibility } }
navigateBackEditor navbar back button is clicked{ from: { view, route }, to: { view, route } }

​
View identifiers

The view field in navigateBack payloads uses stable, human-readable IDs:
Route nameview
homeforms_list
forms-createcreate_form
forms-slug-editedit_form
forms-slug-show-submissionssubmissions
forms-slug-show-shareshare
forms-slug-show-integrationsintegrations
forms-slug-show-statsstats
forms-slug-show-summarysummary
forms-slug-show-pdf-templatespdf_templates
(unknown)raw route name

​
Parent listener example

window.addEventListener('message', (event) => {
  // Restrict to your OpnForm origin in production
  if (event.origin !== 'https://your-opnform-domain.com') return

  const { type, event: action, payload } = event.data || {}
  if (type !== 'opnform:editor:event') return

  switch (action) {
    case 'formSaved':
      console.log('Form saved:', payload.form.slug, payload.isNew ? '(new)' : '(updated)')
      break
    case 'formDeleted':
      console.log('Form deleted:', payload.form.id)
      break
    case 'navigateBack':
      console.log('Navigating back:', payload.from.view, '→', payload.to.view)
      break
  }
})

​
Origin targeting

By default, messages are sent to the parent with target origin *. For stricter security, pass your CMS origin as a query parameter on the iframe URL: 
https://your-opnform-domain.com/forms/my-form/edit?_sdkParentOrigin=https%3A%2F%2Fyour-cms.com
The editor will then post messages only to that origin.

​
Embedding the editor

Embed authenticated editor pages directly in an iframe: 
<iframe
  src="https://your-opnform-domain.com/forms/my-form/edit?_sdkParentOrigin=https%3A%2F%2Fyour-cms.com"
  style="border:none;width:100%;height:100vh;"
></iframe>
Your users must be authenticated with OpnForm (session cookie) for editor pages to load.