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.
Note: SEQUEL_EVENT_ID needs to be replaced with your event id. This ID can be fetched from the Sequel dashboard, your Event -> Embed tab:
For example, after swapping the text with your event ID, this:
var sequelEventId = "SEQUEL_EVENT_ID";
...should look similar to this:
var sequelEventId = "0c959df5-9f2c-4e16-8cbb-f353d7cf2c22";
<script>
var leadObj = {};
var sequelEventId = "SEQUEL_EVENT_ID";
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 };
await fetch('https://api.introvoke.com/api/v3/events/' + sequelEventId + '/registrant', {
method: "POST",
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data)
});
}
}
</script>
❗SEQUEL_EVENT_ID needs to be replaced with the Sequel Event id where you want to send registrations
That's it! Once you input the correct event ID to your script, 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 not trigger another email.
If you have any additional questions, please reach out via chat or at support@sequel.io!