Embedded form JS API (draft)

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

You can add an attribute to the div of either of the following:

• onsubmit="myGlobalFunctionName"
• data-onsubmit="myGlobalFunctionName" (legacy)

So your embed code would look something 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 the name you use for myGlobalFunctionName 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" // Answer for this question for this 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.detail.

Event listener example

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

Page Change Events

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

In either way, the page change event is triggered for page changes in both directions:

• movement forward one page
• movement backward one page

1. onpagechange attribute

You can add an attribute to the div of either of the following:

• onpagechange="myGlobalFunctionName"
• data-onpagechange="myGlobalFunctionName" (legacy)

So your embed code would look something 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 the name you use for myGlobalFunctionName will be called when the page is changed in the form.

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 PaperformPageChange when the page changes on the form, which can be listened to on the div from the embed, or on any parent element.

Details of the page change are located in event.detail.

Event listener example

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