There are two ways to be notified of embedded Paperform submissions.
onsubmit
attributeYou 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
},
...
]
}
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
.
window.addEventListener('PaperformSubmission', function(e) { console.log(e) })
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:
onpagechange
attributeYou 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
}
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
.
window.addEventListener('PaperformPageChange', function(e) { console.log(e) })