Integration with HubSpot Forms

If you are using HubSpot web forms to capture leads on your website, you need to do a minor customization to the web forms so that the two fields required by the AdIntel App are populated properly when the visitor clicks the form submit button.

Prerequisites:

You have included the following AdIntel JavaScript on your web site, just before the body tag:

<script type='text/javascript' src='https://success-software.biz/adintel/ss_adintel.js' defer></script>
</body>

HubSpot is integrated with your Salesforce CRM org and is configured to push contacts captured from web forms to the Salesforce Lead object.

Procedure:

Create the web form as you normally do with the HubSpot form builder.
Add the AdIntel fields ads__landing_url__c and ads__referral_url__c as hidden fields to the form.
Do any other necessary customizations and save the form.
Create Landing_URL and Referral_URL custom text fields on the HubSpot contact object.
Map the two hidden form fields to the corresponding custom fields (created in the earlier step) on the HubSpot contact object, similar to how you mapped other web form fields to the fields on the contact object.
Map the Landing_URL and Referral_URL contact object fields to the corresponding fields (ads__Landing_URL__c and ads__Referal_URL__c) on the Salesforce Lead object.
If you are embedding the HubSpot form in an IFRAME on a webpage, implement the following JavaScript code on the web page where you are including the form. It is assumed that the names of the two AdIntel fields in the generated HTML are ads__landing_url__c and ads__referral_url__c. In case HubSpot creates different names for these two fields, please adapt the JavaScript accordingly. Ignore this step if you are not using IFRAMEs to including the HubSpot form on a web page.
Make an end-to-end test to ensure that the AdIntel fields are being populated properly on the Salesforce Lead record.
Done. AdIntel is now integrated with your HubSpot web form. Please repeat this procedure for all other HubSpot forms.

Example:

<html>
<body>
    <p>This is a HubSpot web form to test AdIntel integration</p>
    <script charset="utf-8" src="//js.hsforms.net/forms/current.js"></script>
/* Implement this JavaScript only if you included the HubSpot form via IFRAME */
    <script>
	hbspt.forms.create({
		portalId: 'YOUR_PORTAL_ID',
		formId: 'TARGET_FORM_ID',
		onFormSubmit: function($form) {
                    // Set the AdIntel hidden field values
                    var land_url = AdIntelGetLandingUrl();
                    var ref_url = AdIntelGetReferralUrl();
                    $form.find("input[name=ads__landing_url__c]").val(land_url);
                    $form.find("input[name=ads__referral_url__c]").val(ref_url);

                    // Output the values just to test
                    console.log("Submitted values: " + $form.find("input[name=ads__landing_url__c]").val());
		}
	});
    </script>

    <p>Any other html, including your HubSpot form goes here</p>

    <!-- The following AdIntel script needs to be included in your web site template before the closing body tag -->
    <script type='text/javascript' src='https://success-software.biz/adintel/ss_adintel.js' defer></script>
</body>
</html>

Reference: HubSpot Forms

Home | Previous | Next