Last updated 07/11/2025
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.
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.
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.
Don’t use Bread & Butter? Want to learn more about how Bread & Butter solves the four biggest problems facing marketers today? Book a demo and see how Bread & Butter is helping marketers make the most of their first-party data
Add authentication & API event tracking to your website/app with a script tag & configuration