Marketo Forms

As of May 2024, you can embed a Marketo form directly. Learn more about adding a Marketo embed step. 
Overview
This section covers how to use a Marketo form to identify website Visitors who engage with your Navattic demo. This allows you to consolidate A) visitor data gathered by Marketo with B) demo engagement data gathered by Navattic, and view the full data story in both platforms.
Implementation
Step 1: Create a Marketo form and add this to the page hosting your Navattic demo iFrame
The first step is to create a Marketo form and add this to the page hosting the Navattic demo iFrame. This will allow Marketo to create Marketo Leads when visitors fill out the Marketo form.
Tips:
Here is Marketo documentation on how to embed a Marketo form that disappears on submission. 
If it's not already added, be sure to install the Marketo Munchkin tracking code onto the site. Here is Marketo documentation on how to find and install the tracking code.  
Step 2: Add the Navattic script to this same page
Copy the below Navattic snippet and add it below the header on the page hosting the Navattic demo embed (this is the same page from step 1). This JS snippet should be installed after your existing third-party script tags.
JS
<script> window.navatticQueue=[],window.navattic=new Proxy({},{get:function n(t,u,e){return function(){for(var n=arguments.length,t=Array(n),e=0;e<n;e++)t[e]=arguments[e];return navatticQueue.push({function:u,arguments:t})}}}); </script> <script src="https://js.navattic.com/embed-events.js"></script>
<script> window.navatticQueue=[],window.navattic=new Proxy({},{get:function n(t,u,e){return function(){for(var n=arguments.length,t=Array(n),e=0;e<n;e++)t[e]=arguments[e];return navatticQueue.push({function:u,arguments:t})}}}); </script> <script src="https://js.navattic.com/embed-events.js"></script>
﻿
The Navattic script is used to send the website visitor's Marketo Munchkin to Navattic, which allows Navattic to send the demo engagement to the corresponding Marketo Lead later in Step 4. This script does not allow Marketo form fill data to enter Navattic.
Step 3: Pass Marketo form fill data into Navattic
This step is used to send visitor data from your Marketo form into Navattic, so that Visitor emails are attached to the appropriate demo engagement data within the Navattic Visitor's . 
While highly recommended, this step is not necessary if your organization has privacy concerns with visitor emails entering the Navattic platform.
If you would like to pass Marketo form fill data into Navattic, the Navattic snippet gives you access to our Identify API (more here). With this, You can call window.navattic.identify in your website code to pass in data to Navattic for things like email, name, company name, etc. To complete the form connection, have a website engineer use this API to pass the submitted form data into Navattic.
Any known UTMs (pulled from the parent page URL) will automatically be passed into Navattic via the Identify API
Since each Marketo form can contain different field names, this step does require custom implementation from your team to call window.navattic.identify
Here is an example snippet that your team can build on:
JS
// Sample Marketo snippet that pulls in first name and email to Navattic

<script src="//app-xyz.marketo.com/js/forms2/js/forms2.js"></script>
<form id="mktoForm_###"></form>

<script>
MktoForms2.loadForm("//app-xyz.marketo.com", "###-####-####", ###, function(form) {
	form.onSuccess(function(){
		var vals = form.vals();
			window.navattic.identify({
				'user.firstname': vals.first_name,
				'user.email': vals.email
			});
	});
});
</script>
// Sample Marketo snippet that pulls in first name and email to Navattic

<script src="//app-xyz.marketo.com/js/forms2/js/forms2.js"></script>
<form id="mktoForm_###"></form>

<script>
MktoForms2.loadForm("//app-xyz.marketo.com", "###-####-####", ###, function(form) {
	form.onSuccess(function(){
		var vals = form.vals();
			window.navattic.identify({
				'user.firstname': vals.first_name,
				'user.email': vals.email
			});
	});
});
</script>
﻿
Step 4: Set up the direct Navattic Marketo integration
You have completed the necessary steps for identifying Navattic Visitors using a Marketo form! The last step is to enable the Marketo direct integration﻿.
This connects all the available demo engagement and visitor identification data to the corresponding Marketo Lead.
Did this page help you?
HubSpot Forms
Playbooks