HubSpot Forms

If you embed HubSpot forms or use HubSpot pages, you'll have to embed custom HTML/CSS code to:

Embed the tracking snippet code discussed in the Step 1: Install PartnerStackJS setup process
Write JavaScript that can access the underlying DOM elements on your HubSpot forms, to pull out the values you need

To get a sense for the DOM elements you have access to from the HubSpot form, we'd recommend opening up your page in your browser and viewing the page source with the included developer tools. Look for any <form> elements.

🚧
If your form is embedded within an element
If your HubSpot form is embedded within an <iframe> element, you may not be able to capture the values of form fields properly from PartnerStackJS. See our debugging tips for more information. You can also check out our HubSpot Forms (iFrame) example as a starting point.

An example of accessing the form elements via JavaScript, then using PartnerStackJS to send the signup event is included below.

<script>

    function registerSignup(e) {
        // In this case, we access form elements by their `name` attribute
        // HubSpot Forms sometimes randomize their IDs, so accessing 
        // by `name` is more reliable
        e.preventDefault();
        console.log('Reached registerSignup()');
        growsumo.data.name = document.querySelector('input[name="firstname"]').value + " " + document.querySelector('input[name="lastname"]').value;
        growsumo.data.email = document.querySelector('input[name="email"]').value;
        growsumo.data.customer_key = document.querySelector('input[name="email"]').value;
        growsumo.createSignup(function() {
            console.log("Create signup called successfully");
        });
    }

    // In this case, the form is not within an iFrame embed, and we're
    // able to access the form DOM element to register an event
    // listener
    var formReference = document.getElementsByClassName('hs-form')[0];

    // In rare events where the DOM element isn't reachable at the time
    // this script executes, we wait a couple seconds before attempting
    // again:
    if (!formReference) {
        console.log('Form not found yet, waiting 2 seconds...')
        // Set a time delay to capture the field afterwards:
        setTimeout(function() {
            formReference = document.getElementsByClassName('hs-form')[0];
            formReference.addEventListener("submit", function(e) {
                console.log('PS Signup');
                registerSignup(e);
            });
        }, 2000);
    } else {
        formReference.addEventListener("submit", function(e) {
            console.log('PS Signup');
            registerSignup(e);
        });
    }

</script>

🚧If your form is embedded within an element

🚧
If your form is embedded within an element