Skip to main content
All CollectionsIntegrating with Sequel.ioCRM Integrations
Using a Pardot Form to register users in Sequel.io
Using a Pardot Form to register users in Sequel.io

Instantly send all Pardot Form submissions into Sequel.io

Updated over 2 weeks ago

To use a Pardot form to register users to a Sequel.io Virtual Stage, follow the steps below:

1) In Pardot, navigate to your form, under "Look and Feel" open the "Below Form" tab and press the Source button.

2) Add the script below, no changes are needed unless your web team wants to debug values:

<script>
// Form ID
var formID = "#pardot-form";

// Debugging and retry
var debugMessages = false; // Do you want to see what data is being submitted to Sequel?
var retryFormSearch = true; // Should we retry if the form is not found by id on script load

// Get form
var form = document.querySelector(formID);
addFormListener();
// Retry adding the form event listener
var count = 1;
function addFormListener() {
count++;
if (form) {
form.addEventListener("submit", submitHandler);
return;
} else if ((typeof retryFormSearch !== "undefined" ? retryFormSearch : true) && count < 10) {
setTimeout(() => {
form = document.querySelector(formID);
addFormListener();
}, 1000);
} else {
console.log("no form found on this page, id used - " + formID);
return;
}
}
// Submit button click handler
function submitHandler(event) {
// Post DOM message
window.parent.postMessage(
{
message: "PARDOT_DATA_READY",
data: getLeadObject(form),
},
"*"
);
}
// Get Lead object from form fields
function getLeadObject(form) {
// Loop through all form elements and map
var data = {};
// Save label names
var labelsDict = {};
form.querySelectorAll("label").forEach((label) => {
labelsDict[label.htmlFor] = stripText(label.textContent);
});
// Fill lead object
for (var i = 0, elem; (elem = form.elements[i++]); ) {
var field_name; // Reset field name - this was not being reset for some reason
if (elem.type.includes("submit") || elem.type.includes("fieldset")) {
continue;
} else if (elem.type.includes("select")) {
// Get the field name from label or element text
var field_name = parseClassNames(elem.parentElement.className) || elem.options[0].value || stripText(elem.options[0].text) || labelsDict[elem.name];
if (!field_name) {
if (typeof debugMessages !== "undefined" ? debugMessages : true) {
console.log("failed to find a valid field name for " + elem.name);
}
continue;
}
// Save to lead obj
if (elem.selectedIndex === 0) {
data[field_name] = "[not provided]";
} else {
data[field_name] = elem.options[elem.selectedIndex].text;
}
} else if (elem.type === "hidden" || elem.parentElement.className.includes("hidden")) {
// Get the field name from class name
var field_name = parseClassNames(elem.parentElement.className) || elem.name;
if (!field_name) {
if (typeof debugMessages !== "undefined" ? debugMessages : true) {
console.log("failed to find a valid field name for " + elem.name);
}
continue;
}
// Save to lead obj
data[field_name] = (v = elem.value) ? v : "[not provided]";
} else {
// Get the field name from label or element placeholder
var field_name = parseClassNames(elem.parentElement.className) || stripText(elem.placeholder) || labelsDict[elem.name] || labelsDict[elem.id];
if (!field_name) {
if (typeof debugMessages !== "undefined" ? debugMessages : true) {
console.log("failed to find a valid field name for " + elem.name);
}
continue;
}
// Save to lead obj
if (["radio", "checkbox"].includes(elem.type)) {
data[field_name] = typeof elem.checked !== "undefined" ? elem.checked : "[not provided]";
} else {
data[field_name] = elem.value || "[not provided]";
}
}
}
if (typeof debugMessages !== "undefined" ? debugMessages : true) {
// Log data and labels for debugging
console.log(labelsDict);
console.log(data);
}
return data;
}
// Strip characters and spaces
function stripText(text) {
return camelText(text).replace(/[^\w]/gi, "");
}
// Make text more readable
function camelText(str) {
return str.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, function (match, index) {
if (+match === 0) return "";
return match.toUpperCase();
});
}
// Get field name from parent class
function parseClassNames(className) {
var field_classes = className.split(" ").filter((value) => !["", "form-field", "pd-hidden", "hidden"].includes(value));
for (var i in field_classes) {
if (field_classes[i].includes("CP_")) {
return field_classes[i];
}
}
return undefined;
}
</script>

The section should look like this:

3) Press Confirm & Save.

4) Completion Actions, select "Thank you Code" and copy paste the code below:

<script>
window.parent.postMessage(
{
message: "PARDOT_FORM_SUCCESS",
},
"*"
);
</script>

5) Press Confirm & Save.

This form can now be used to gather registrations and send them to Sequel. You can use the same form across multiple events. The last step is to specify which event to send the registration to.

6) After you embed the Pardot form in your page, add this code on the same page.

<script>
window.addEventListener("message", receiveMessage, false);
async function receiveMessage(event) {
if (event.data && event.data.message === "PARDOT_DATA_READY" && event.data.data) {
leadObj = event.data.data;
const urlParams = new URLSearchParams(window.location.search);
for (const [key, value] of urlParams.entries()) {
leadObj[key] = value;
}
}
if (event.data && event.data.message === "PARDOT_FORM_SUCCESS") {
let data = {
name: leadObj.FirstName + ' ' + leadObj.LastName,
email: leadObj.Email,
ignoreCustomQuestions: true,
url: window.location.href,
companyId: "SEQUEL_COMPANY_ID"
};

await fetch('https://api.introvoke.com/api/v3/events/registrant/pardot', {
method: "POST",
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data)
});
}
}
</script>

Note: SEQUEL_COMPANY_ID needs to be replaced with your company id. You can open any event in your Sequel instance and find the Company ID under the Embed tab and Sequel API

Copy this code and replace the SEQUEL_COMPANY_ID in the script above.

❗This script is universal for your company, so you do not need a new script for each event.

7) Now that you have the Sequel script next to your Pardot form, you can register users to Sequel events by simply adding the url where the form is embedded.

Navigate to the event in Sequel and under the CRM tab scroll down to Pardot

In this section you can add the URL where the form was embedded. Once a submission comes from Pardot, we will only register users that come from the specified url.

This will automatically work for recurring events in Sequel. Once a new recurring session is created, the pardot form url will be copied over and we will automatically register users to the latest session.

That's it! You can submit the Pardot form and Sequel.io will instantly register the user within the Sequel.io Virtual Stage. If a user is already registered, we will trigger another email.

If you have any additional questions, please reach out via chat or at support@sequel.io!

Did this answer your question?