This is a draft document, API subject to change.

Submission Events

There are two ways to be notified of embedded Paperform submissions.

1. onsubmit attribute

The first method, you can add an attribute to the div called data-onsubmit="myGlobalFunctionName". So your embed code would look like:

<div data-paperform-id="contact-paperform" onsubmit="myGlobalFunctionName"></div><script>(function() { var script = document.createElement('script'); script.src = "https://paperform.co/__embed";document.body.appendChild(script)); })()</script>

A global function by that name will be called when the form is submitted. It is passed a single argument which is an object with the following structure;

{  
  submission_id: "XXXXXXXXXX",  
  total: null, //if there was a price processed  
  data: [  
      {  
          title: "My Question Title",  
          key: "xjsdjc", //Pre-fill key  
          value: "Dean" //The results of the submission  
       },  
       ...  
    ]  
}

2. Event listener

Embedded forms also emit a custom event by the name of PaperformSubmission on submission, which can be listened to on the <div> from the embed, or on any parent element. Details of the submission are located in event.details.

E.g.

window.addEventListener('PaperformSubmission', function(e) { console.log(e) })

Page Change Events

There are two ways to be notified of embedded Paperform page changes.

1. onpagechange attribute

The first method, you can add an attribute to the div called data-onpagechange="myGlobalFunctionName". So your embed code would look like:

<div data-paperform-id="contact-paperform" onpagechange="myGlobalFunctionName"></div><script>(function() { var script = document.createElement('script'); script.src = "https://paperform.co/__embed";document.body.appendChild(script)); })()</script>

A global function by that name will be called when the form is submitted. It is passed a single argument which is an object with the following structure;

{
    form_id: "form-id",
    currentPage: 1,
    totalPages: 35
}

2. Event listener

Embedded forms also emit a custom event by the name of PaperformSubmission on submission, which can be listened to on the <div> from the embed, or on any parent element. Details of the submission are located in event.details.

E.g.

window.addEventListener('PaperformPageChange', function(e) { console.log(e) })