I’m running into a weird issue with my website. We have several custom forms that aren’t built with HubSpot’s form builder. I already set up the tracking script properly to handle cookies and session tracking, plus I turned on the setting for external forms.
Most of our forms work perfectly and create contacts as expected. But there’s one form that just won’t cooperate - our registration form that opens in a popup window. I’m pretty sure the popup is causing the problem because when I use the exact same registration component on a regular page, it works fine.
I can’t switch to HubSpot’s native forms or use their API to manually create contacts when someone submits the popup form. The reason is that we really need to preserve the correct attribution source. If I use the API or any third party service, it will show up as offline source instead of the real one.
My site is built with React and Next.js using Chakra UI for components. Has anyone dealt with this before? Any ideas on how to make popup forms work with HubSpot tracking would be really helpful.
Had this exact problem last year with a newsletter signup modal on our React app. It’s not just DOM isolation - timing’s the real issue. HubSpot’s external form tracking needs specific events to fire in sequence, and modals break that flow. Here’s what worked: manually trigger HubSpot tracking after the modal renders completely. I added a small script that waits for the modal to fully load, then calls _hsq.push(['trackPageView']) and re-initializes form tracking on that specific element. The trick is making HubSpot aware of your form after it hits the DOM. Call _hsq.push(['setPath', window.location.pathname]) right when your modal opens, then immediately run form detection again. This keeps all your attribution data intact since you’re not bypassing HubSpot’s tracking - just making sure it sees your modal form. Takes about 10 minutes to implement and everything stays native.
The Problem: You’re experiencing issues with HubSpot form tracking when your custom forms are embedded within a popup modal in your React/Next.js application. The forms work correctly when placed on regular pages, but fail to track correctly within the modal, resulting in lost contact information and inaccurate attribution. You want a solution that avoids using HubSpot’s native forms or API for contact creation to preserve the correct attribution source.
Understanding the “Why” (The Root Cause):
HubSpot’s form tracking script typically scans the DOM (Document Object Model) on initial page load to identify and attach tracking events to your forms. When a form is within a modal, it often loads after the initial page load, making it invisible to HubSpot’s initial scan. This isolation prevents HubSpot from detecting and tracking submissions from the form within the modal.
Step-by-Step Guide:
Step 1: Implement a Webhook to Intercept Form Submissions: Instead of relying on HubSpot’s form detection within the modal, create a webhook that acts as an intermediary between your form submission and HubSpot. This approach bypasses the issues caused by the modal’s isolated DOM context.
Create a webhook endpoint: Set up a serverless function (e.g., using AWS Lambda, Google Cloud Functions, Netlify Functions, or similar) or a simple web server to receive the form submission data. This endpoint will be the target of your form’s action attribute.
Configure the form to submit to your webhook: Update your React form to send submissions to the URL of your newly created webhook endpoint instead of directly to HubSpot.
Extract relevant data: Your webhook endpoint should extract all necessary data from the form submission, including the submitted form fields, any UTM parameters present in the URL (utm_source, utm_medium, utm_campaign, etc.), referrer data, and any relevant HubSpot cookies (if present).
Create a HubSpot contact using the API: Use the HubSpot API to create a new contact based on the collected data. Crucially, include the UTM parameters and referrer data you extracted to ensure accurate attribution. This will maintain the original source of the lead.
Step 2: Securely Handle Sensitive Data: Implement proper security measures for your webhook endpoint. Never expose your API key directly in the frontend code. Use server-side rendering or an API gateway to protect your HubSpot API key.
Step 3: Add Error Handling and Logging: Thoroughly add error handling to your webhook function. Log any errors to a monitoring service (e.g., Datadog, Sentry, etc.) to help diagnose any problems with your webhook.
Common Pitfalls & What to Check Next:
Webhook URL: Double-check that the URL specified in your form’s action attribute accurately points to your webhook endpoint. Ensure the endpoint is accessible and responding correctly.
Data Mapping: Carefully map the form field names to the corresponding HubSpot property names. Even minor inconsistencies (case sensitivity, extra spaces) can prevent successful contact creation.
API Key Permissions: Verify that your HubSpot API key has the necessary permissions to create contacts.
Rate Limits: Be aware of HubSpot’s API rate limits to avoid exceeding them.
Data Validation: Before submitting to HubSpot, validate the collected data to ensure it is complete and accurate.
Still running into issues? Share your (sanitized) config files, the exact command you ran, and any other relevant details. The community is here to help!
Yeah, this is a HubSpot scope issue with dynamic content. The tracking script only scans for forms on initial page load - it doesn’t automatically detect new ones when your modal loads. I’ve hit this with other dynamic content too. You need to force HubSpot to rescan the DOM after your popup renders. Call the form detection method manually right after your modal mounts: window.hsConversationsAPI && window.hsConversationsAPI.widget.refresh() then _hsq.push(['addPrivacyConsentListener', function(consent){ /* form detection code */ }]). Honestly though, just use _hsq.push(['identify', {}]) - it’s simpler and triggers a fresh scan. Timing matters here. Don’t call it right when the modal opens. Wait for the form elements to fully render in the DOM first. I usually wrap it in a setTimeout with 100ms delay to be safe. Keeps all your attribution tracking intact without messing with your React setup.
sounds like the popup’s loadin b4 HubSpot is ready. maybe add a delay or see if ‘_hsq’ is there first. also, make sure your form fields have the right ‘name’ attributes for HubSpot, that tripped me up once too.
Been there, done that. Modal windows break HubSpot tracking because the form gets isolated from the main page’s tracking scripts.
HubSpot’s tracking code can’t see form submissions inside modals - they’re in a different DOM context. Your tracking script loads fine on the main page, but loses visibility once the form renders in the popup.
Don’t fight HubSpot’s wonky modal handling. Set up an automation workflow that captures the form data and pushes it to HubSpot with all your attribution data intact. Intercept the form submission, grab the tracking parameters and UTM data, then send everything to HubSpot with proper source attribution.
You keep your React components and modal setup unchanged. Plus you get better control over data flow and can add validation or enrichment steps.
I’ve used this for multiple client projects - way more reliable than making HubSpot work with modals. The automation handles all the tracking complexity behind the scenes.
Understanding the “Why” (The Root Cause):
Step-by-Step Guide:
Common Pitfalls & What to Check Next:
Still running into issues? Share your (sanitized) config files, the exact command you ran, and any other relevant details. The community is here to help!