Form Submit Capture Tag

Contents

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.

Example
Your form tag might look similar to the one shown below:

<form method="post" name="TestForm" action="https://t.eloqua.com/e/f2" onsubmit="return handleFormSubmit(this)" id="form237" class="elq-form" >

And your email address might look similar to the following:

<input id="field0" name="emailAddress" type="text" value=" "  />

Based on the above, the script can be modified to be:

<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>

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;
	});
}

Example

Your Marketo form code will look similar to the one shown below:

<script src="// appx.marketo.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_1078"></form>
<script>MktoForms2.loadForm("//appxx.marketo.com", "044-xxx-xxx", 1078); <script>

With the capture tag, the code will become:

<script src="//appx.marketo.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_1078"></form>
<script>MktoForms2.loadForm("//app-sj01.marketo.com", "044-xxx-xxx", 1078, 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;
	});
  });
</script>

If your form is on a Marketo landing page and you’re adding it to the PathFactory Form Library as an External URL form, you will need to use the HTML element option in Marketo to place the form within the landing page as opposed to using the form option.
See this demo video on how this can be done:

If this option is used, you may have to alter the layout of the page (bodyId, mktContent and ourterWrapDiv elements) to ensure that the page fits in our form frame without any scroll bars.

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;

Example

Your form code will look similar to the one shown below:

Example

Your form code will look similar to the one shown below:

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
  hbspt.forms.create({
  portalId: "4989xxx",
  formId: "f163bee2-bd5e-4c8e-9cbd-xxx"
});
</script>

With the capture tag, the Hubspot form code will look similar to the following:

<div></div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
    // please update portalId and formId when you create a new form
	portalId: '4989xxx',
	formId: 'c1bb5421-70c5-4c2e-9e2f-xxx',
    onFormSubmit: function($form) {
      setTimeout(function(){
      var email = $form.find("input[name='email']").val();
      window.parent.postMessage({
        conversionUrl: document.location.href,
        referrer: document.referrer,
        email: email,
        lookbookExternalForm: true
      }, "*");},500);
      return true;}
});

</script>

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!

Updated on June 27, 2023

Was this article helpful?

Yes No

Need Support?

Can't find the answer you're looking for? Don't worry we're here to help!

CONTACT SUPPORT