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 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 https //docs navattic com/analyze#sngew ) 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 // 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> &#x9;hbspt forms create({ &#x9; region "na1", &#x9; portalid "portal id", &#x9; formid "form id", &#x9; onformsubmit function($form) { &#x9; console log($form); &#x9; $hs fname = $form\[0] fullname value; &#x9; $hs email = $form\[0] email value; &#x9; window\ navattic identify({ &#x9; 'user fullname' $hs fname, &#x9; 'user email' $hs email &#x9; }) &#x9; } &#x9;}); \</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 hubspot docid\ eyadu4apw qnypckocykm this connects all the available demo engagement and visitor identification data to the corresponding hubspot contact