Parent page events

You can listen for events when embedding a Reform. You can use events to show a loading spinner or track custom events.

Currently, the supported events are:

• onFormLoaded : When the first page of the form is loaded
• onFormCompleted : After the form has been submitted with valid answers, and the answers have been recorded
• onPageChanged : Every time the page changes either after a submission or by navigating with arrows
• onPageSubmitted : Before a page is submitted
• onPageResized : When the iframe resizes after the page has changed
• onInputChanged : Every time an input field value has changed

Configuring event handlers in Reform

To configure parent page event handlers inside Reform go to the form builder, select 'Code' in the sidebar and select the 'Page page events' tab.

All event handlers will be loaded asynchronously. The embed snippet will listen for events that fire before the event handlers have loaded and replay the events once loading is complete.

Configuring event handlers in the embed snippet

You can configure event handlers directly in the embed snippet:

<div id="my-reform"></div>
<script>window.Reform=window.Reform||function(){(Reform.q=Reform.q||[]).push(arguments)};</script> 
<script id="reform-script" async src="https://embed.reform.app/v1/embed.js"></script> 
<script>
   Reform('init', {
     url: 'FORM_URL',
     target: '#my-reform',
     background: 'transparent',
     async onFormLoaded(context) {
	console.log('Form loaded')
     },
     async onFormComplete(context) {
        console.log('Form completed with', context.answers)
     },
     async onPageChange(context) {
        console.log('Page changed')
     },
     async onPageSubmitted(context) {
        console.log('Page submitted')
     },
     async onPageResized(event) {
         event.preventScrolling()
     }
   })
 </script><br>

Each event receives a context object as an argument. The contents of context depends on the event.

onFormComplete and custom redirects

If you are using a custom redirect after the form has been submitted you should beware of a caveat using onFormComplete . If onFormComplete is an asynchronous function it won't redirect until that function has finished executing. You should try to minimize the time it takes to execute the event handler so users won't feel like they are stuck.