Summary
This article provides the code for Form Submit Capture Tags.
Not sure what a “Form Submit” Capture Tag is, or unsure if you should be using it? Read the Intro to Capture Tags article!
Eloqua
You can place the following code anywhere after the closing form tag of your form.
<script>
var form = document.getElementById("FORM-ID-GOES-HERE");
form.addEventListener("submit", function(event) {
var formInstance = LiveValidationForm.getInstance(event.target);
var isValid = LiveValidation.massValidate(formInstance.fields);
if (isValid) {
var email = document.querySelector("input[name='emailAddress']").value;
window.parent.postMessage({
conversionUrl: document.location.href,
referrer: document.referrer,
email: email,
lookbookExternalForm: true
}, "*");
}
});
</script>
In the script above, ensure that you replace “FORM-ID-GOES-HERE” with the ID attribute of the form tag.
Note
|
The snippet above assumes that you have not changed the name attribute of the Email Address field as it appears out of the box in Eloqua. If you have changed the email address field name attribute, ensure that you use the same name attribute in our script. |
Marketo
The following is the code used for Marketo forms:
function(form) {
form.onSuccess(function(){
var vals = form.vals();
window.parent.postMessage({
conversionUrl: document.location.href,
referrer: document.referrer,
email: vals.Email,
lookbookExternalForm: true
}, "*");
return true;
});
}
Pardot
First, create the form in Pardot that you wish to use in your PathFactory Content Tracks. Then, add any fields you want to include (make sure that the email address field is mandatory).
Then, copy the snippet below as you navigate to Step 4: Completion Actions under the “Thank You Content” Tab in Pardot. Click on the code snippet icon on the right most corner, then paste the code.
<script id="lookbook-capture-tag" src="https://app.cdn.lookbookhq.com/libraries/capture/capture.js" data-email="%%email%%"></script>
This code will allow your Pardot form to convert an unknown visitor to known within PathFactory after the form is submitted. Once you’ve confirmed and saved, you must the get the secure URL of the form which will be used inside PathFactory.
You can now navigate to your PathFactory Form Library. Copy the snippet below, and paste it into a PathFactory form as Custom HTML, replacing the URL underlined below with your Pardot secure form URL:
<iframe src="https://go.pardot.com/l/00000/2020-05-13/0000dl" width="100%" height="100%" type="text/html" frameborder="0" allowTransparency="true" style="border: 0"></iframe>
<script>
window.addEventListener("message", function(event){
console.log(event);
if(event.data.lookbookExternalForm){
window.parent.postMessage(event.data, "*");
}
return true;
});
</script>
Hubspot
Warning
|
If your form is served within a Hubspot landing page, you cannot use the Form Submit Capture Tag. In this scenario, you can use the Confirmation Page Capture Tag instead. |
The following is the code snippet for Hubspot:
function($form) {
var email = $form.find("input[name='email']").val();
if(email)
{
window.parent.postMessage({
conversionUrl: document.location.href,
referrer: document.referrer,
email: email,
lookbookExternalForm: true
}, "*");
}
return true;
}
, onFormSubmitedt: function($form) { var email = $form.find(“input[name=’email’]”).val(); if(email) { window.parent.postMessage({ conversionUrl: document.location.href, referrer: document.referrer, email: email, lookbookExternalForm: true }, “*”); } return true;
Hubspot Landing Page Setup
If you are planning to use a HubSpot landing page as a form in PathFactory, add the following script to the HTML Footer section of the landing page.
<script src="https://cdnjs.cloudflare.com/ajax/libs/arrive/2.4.1/arrive.min.js" integrity="sha256-WXHeZwrvHW+Qpj5u2NCVyiL5XEVf/AzrYL5i4w4aRHM=" crossorigin="anonymous"></script> <script> let email document.arrive("form.hs-form input[name='email']", function () { var form = document.querySelector('form.hs-form'); form.addEventListener("submit", function(event) { email = document.querySelector("input[name='email']").value; }) }) document.leave("form.hs-form input[name='email']", function () { window.parent.postMessage({ conversionUrl: document.location.href, referrer: document.referrer, email: email, lookbookExternalForm: true }, "*"); }); </script>
Other
If none of the examples shown above covers your use case, please reach out to our support team or your CSM and we will be happy to help!