Embedded form events

You can listen for events when embedding a Reform. You can use events to show a loading spinner or make an API call with the submitted data.

Currently, the supported events are:

• onFormLoaded: When the first page of the form is loaded
• onFormComplete: After the form has been submitted with valid answers, and the answers have been recorded
• onPageChange: Every time the page changes either after a submission or by navigating with arrows
• onPageSubmitted: Before a page is submitted

<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')
     }
   })
 </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.