HubSpot embedded forms render inside an iframe. Because of this, the Source pixel can't see the form markup and can't detect submissions on its own.
HubSpot solves this by emitting events to the parent page when someone submits. You can listen for those events and pass the submission data to Source yourself.
Before you start: this guide covers forms built with HubSpot's current form editor. Forms built with the older legacy editor use a different embed and a different event API, and the code below won't work with them.
Step 1: Create your HubSpot form
In the left-hand navigation, click the Marketing icon, then select Forms.
Click Create form and choose the form editor.
Add your fields. Source needs an email address to create a contact, so your form must include an Email field.
Click Publish.
In the confirmation window, select Get embed code. Stay on the Embed code tab — you don't need the Developer code tab for this integration. Click Copy, then paste the code into your website where you want the form to appear.
Step 2: Add the event listener
Paste this snippet directly below the HubSpot embed code:
<script>
window.addEventListener("hs-form-event:on-submission:success", async (e) => {
const form = HubSpotFormsV4.getFormFromEvent(e);
const values = await form.getFormFieldValues();
const email =
values.find(v => v.name === "0-1/email")?.value ??
values.find(v => v.name.endsWith("/email"))?.value;
if (!email) return;
sourcePixel('event', 'customEvent', {
email: email,
});
});
</script>
Optional: assign a funnel stage
To place the contact into a specific funnel stage, add a stage value to the event:
<script>
window.addEventListener("hs-form-event:on-submission:success", async (e) => {
const form = HubSpotFormsV4.getFormFromEvent(e);
const values = await form.getFormFieldValues();
const email =
values.find(v => v.name === "0-1/email")?.value ??
values.find(v => v.name.endsWith("/email"))?.value;
if (!email) return;
sourcePixel('event', 'customEvent', {
email: email,
stage: 'Demo Booked',
});
});
</script>
Testing your setup
Submit the form once with your browser console open. You should see the sourcePixel call in the network tab going to events.source.app, with an event: customEvent parameter. Two things to keep in mind while testing:
HubSpot remembers visitors who have already submitted, so use a private or incognito window for each test submission.
If your domain isn't yet registered under Settings → Website → Domains & URLs in HubSpot, your test submissions may be filed as spam. The event still fires and Source still receives the data, but the contact won't appear in HubSpot.
Need a hand? Contact us at [email protected].