Parent Page Events

(Pro Plan Only) The Parent Page Events feature lets you track and respond to specific actions when embedding a form on your website. This powerful tool, available to Pro users, allows you to add custom code to handle events like when a form is fully loaded or submitted. Whether you want to show a loading spinner, trigger custom tracking, and more, Parent Page Events give you more control over how your forms interact with your website. This guide will walk you through setting up and using these events.

Accessing Parent Page Events

Access the Code Section: On the left side of the Reform dashboard, click on the "Code" option. This will take you to the Form Events page.
Select Parent Page Events: At the top of the Form Events page, you'll see a menu with three options: Form events, Parent page events, and CSS. Click on the "Parent page events" tab to proceed.

Adding an Event Handler

Add Event Handler: On the Parent Page Events tab, click the "Add event handler" button. This will expand a menu displaying all the available events you can listen for.
Choose an Event: 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

Select the event you wish to use by clicking on it.
Enter Your Code: After selecting an event, a code section will expand. Here, you can enter the custom JavaScript code you want to execute when the event is triggered.

Note: All event handlers are 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.
Save Your Changes: Once you’ve added your code, click the "Save" button at the bottom of the page to apply your changes.

Configuring event handlers in the embed snippet

Alternatively, 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.

If you're experiencing issues or have questions, please contact us at [email protected]. We're here to assist you!