HubSpot Forms

As of May 2024, you can embed a Hubspot form directly. Learn more about adding a Hubspot embed step. 
Overview
This section covers how to use a HubSpot form to identify website Visitors who engage with your Navattic demo. This allows you to consolidate A) visitor data gathered by HubSpot with B) demo engagement data gathered by Navattic, and view the full data story in both platforms.
Implementation
Step 1: Create a HubSpot form and add this to the page hosting your Navattic demo iFrame
The first step is to create a HubSpot form and add this to the page hosting the Navattic demo iFrame. This will allow HubSpot to create HubSpot Contacts when visitors fill out the HubSpot form.
Tips:
Here is HubSpot documentation on how to embed a HubSpot form that disappears on submission. 
If it's not already added, be sure to enable the HubSpot tracking code across your site. The tracking code is automatically included on HubSpot blog pages, landing pages, and website pages.
Step 2: Add the Navattic script to this same page
Copy the Navattic JS 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.
The Navattic script is used to send the website visitor's HubSpot Cookie to Navattic, which allows Navattic to send the demo engagement to the corresponding Hubspot Contact later in Step 4. This step does not allow HubSpot form fill data to enter Navattic.
Step 3: Pass HubSpot form fill data into Navattic
This step is used to send Visitor data from your HubSpot form into Navattic so that Visitor emails are attached to the appropriate demo engagement data within the Navattic application. 
While highly recommended, this step is not necessary if your organization has privacy concerns with Visitor emails entering the Navattic platform.
Option 1: 
Enable the Automatic Form Submission Tracking feature in Navattic JS﻿ to automatically send any identification information provided in the form to Navattic without requiring any additional JavaScript code.
Option 2: 
If you require more flexibility about which fields get sent to Navattic, use the navattic.identify method to send the submitted form fields to 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 HubSpot 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 Hubspot snippet that pulls in first name and email to Navattic

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js">
</script>

<script>
	hbspt.forms.create({
		region: "na1",
		portalId: "PORTAL_ID",
		formId: "FORM_ID",
		onFormSubmit: function($form) {
			console.log($form);
			$hs_fname = $form[0].fullName.value;
			$hs_email = $form[0].email.value;
			window.navattic.identify({
				'user.fullName': $hs_fname,
				'user.email': $hs_email
			})
		}
	});
</script>
// Sample Hubspot snippet that pulls in first name and email to Navattic

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js">
</script>

<script>
	hbspt.forms.create({
		region: "na1",
		portalId: "PORTAL_ID",
		formId: "FORM_ID",
		onFormSubmit: function($form) {
			console.log($form);
			$hs_fname = $form[0].fullName.value;
			$hs_email = $form[0].email.value;
			window.navattic.identify({
				'user.fullName': $hs_fname,
				'user.email': $hs_email
			})
		}
	});
</script>
﻿
Step 4: Set up the direct Navattic HubSpot integration
You have completed the necessary steps for identifying Navattic Visitors using a HubSpot form! The last step is to enable the HubSpot direct integration.﻿  
This connects all the available demo engagement and visitor identification data to the corresponding HubSpot Contact.
Did this page help you?
Identify
Marketo Forms