WordPress Forms – HubSpot Forms

Published: April 17th, 2024

HubSpot Forms work out of the box for identifying users in Bread & Butter. Give it a try by entering a test submission on your form, and confirm that your name and email are captured in the Bread & Butter Dashboard.

If you’re not seeing it working, you can quickly and easily add the code snippets below.

Identify Users on Submit:

Add the following to your form page, replacing the field names and form name to match your specific form:

window.addEventListener('message', event => {
    if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmit') {
        let content = false;

        if (document.querySelector('.hs-form-iframe')) {
            content = document.querySelector('.hs-form-iframe').contentDocument;
        } else if (document.querySelector('.hs-custom-form')) {
            content = document.querySelector('.hs-custom-form');
        } else if (document.querySelector('.hs-form-private')) {
            content = document.querySelector('.hs-form-private');
        }

        const getContent = function(name) {
            let d = content.querySelector(`input[name=${name}]`);
            return d.value;
        }
        let first_name = getContent('firstname');
        let last_name = getContent('lastname');
        let email_address = getContent('email');

        BreadButter.api.identifyUser(email_address, first_name, last_name);
    }
});

On submit, the user’s first name, last name, and email address will appear on your Bread & Butter Dashboard, identifying your users.

Auto-fill fields with user profile information

Add the following to your form page, replacing the field names to match your specific form:

const NotifyHubspot = function(holder) {
    function doEvent(obj, name) {
        try {
            let event = new Event(name, {
                target: obj,
                bubbles: true
            });
            return obj ? obj.dispatchEvent(event) : false;
        } catch (e) {
            let event = document.createEvent('Event');
            event.initEvent(name, true, true);
            obj.dispatchEvent(event);
        }
    }
    doEvent(holder, 'change');
    doEvent(holder, 'input');
    doEvent(holder, 'blur');
};
window.addEventListener('message', event => {
    if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
        null == window.breadbutterQueue && (window.breadbutterQueue = []), window.injectBreadButter = function(e) {
            "undefined" != typeof BreadButter && BreadButter.init ? e() : window.breadbutterQueue.push(e)
        };
        injectBreadButter(function() {
            BreadButter.getProfile((profile) => {
                let content = false;

                if (document.querySelector('.hs-form-iframe')) {
                    content = document.querySelector('.hs-form-iframe').contentDocument;
                } else if (document.querySelector('.hs-custom-form')) {
                    content = document.querySelector('.hs-custom-form');
                } else if (document.querySelector('.hs-form-private')) {
                    content = document.querySelector('.hs-form-private');
                }

                const prefillContent = function(name, detail) {
                    if (!detail) return;
                    let d = content.querySelector(`input[name=${name}]`);
                    if (d) {
                        d.value = detail;
                        NotifyHubspot(d);
                    }
                }
                prefillContent('firstname', profile.first_name);
                prefillContent('lastname', profile.last_name);
                prefillContent('email', profile.email_address);
            });
        });
    }
});

When signed in users go to your form, their name and email address will be automatically entered.