If you’ve ever puzzled over why a form submission isn’t showing up in your HubSpot contact timeline, you’re not alone. Your team may be running forms outside of HubSpot—on legacy landing pages, in third-party apps, or on platforms like WordPress or Webflow. And the problem is clear: without a way to automatically track those non-HubSpot forms, key lead data falls through the cracks.
Marketing operations and RevOps teams often spend frustrating hours poking through page code and testing triggers, only to discover that HubSpot simply isn’t detecting the form. This disconnect in your marketing stack creates blind spots in lead attribution, automation, and reporting.
This walkthrough shows you how to solve that using CSS selectors. You’ll see how to pinpoint non-HubSpot forms, connect them to your HubSpot tracking code, and ensure every form submission—no matter where it’s hosted—flows into your CRM exactly as it should.
Connecting Your Custom Site Forms to HubSpot Using CSS Selectors
HubSpot includes an underused yet powerful feature that lets you track external form submissions across your site. As long as the HubSpot tracking code is installed, the platform can detect form submissions—even on forms not built in HubSpot.
The challenge? HubSpot doesn’t always recognize custom or third-party-built forms out of the box. Forms built with React, Angular, or proprietary builders like Typeform or Webflow often lack the typical HTML structure the tracking script relies on.
That’s where CSS selectors come in. You can tell HubSpot exactly which elements to watch for form events by specifying a CSS selector—a small string of code like .signup-form or #contactForm—that pinpoints the form’s location on your page.
To manage this, head to: Settings > Marketing > Forms > Non-HubSpot Forms
Here, you’ll enable non-HubSpot form tracking and define those CSS selectors. This bridges the gap between your external systems and HubSpot’s tools, keeping your automated workflows, contact records, and reporting up to date.
Just make sure the HubSpot tracking code is installed on every relevant page. Paired with the right CSS selectors, it will detect, record, and push those form actions through to your database and automations smoothly.
How It Works Under the Hood
Every time a visitor loads a page that includes your HubSpot tracking code, HubSpot’s JavaScript kicks in. It scans the page’s HTML for forms—specifically the <form> element—and listens for a submission event.
That works fine when your page uses straightforward HTML. But if your form is wrapped in JavaScript logic or custom markup, your tracking script may not recognize it.
To solve this, CSS selectors act like markers that highlight the relevant form inputs or buttons. They can identify elements based on class, ID, or even HTML attributes.
Inputs:
- You define a CSS Selector to identify the form, such as .contact-wrapper form or #form-submit
- The HubSpot Tracking Code must be correctly installed across your site
- The Non-HubSpot Forms feature must be switched on in your HubSpot settings
Outputs:
- Submissions are recorded and passed into HubSpot as either new contacts or updates to existing ones
- You’ll see a “Form submission” event inside each contact’s timeline
- The data flows into your dashboards for analysis
It’s also critical to have an email field in your external form. HubSpot uses this to tie a submission to a unique contact. Without it, you lose the ability to track, segment, or automate based on that user.
Main Uses Inside HubSpot
While non-HubSpot form tracking involves technical setup, the use cases benefit every go-to-market team. Whether you’re collecting leads, enrolling users, or handling support tickets, these forms bring valuable context into your HubSpot CRM—without requiring you to migrate your entire site to native HubSpot forms.
Tracking Lead Forms from Third-Party Sites
If you’re using tools like WordPress, Webflow, or Squarespace, there’s a good chance your forms aren’t native to HubSpot. But that doesn’t mean you have to rebuild them.
Let’s say your WordPress site uses Gravity Forms. Rather than replacing everything, you simply enable non-HubSpot form tracking and add a selector like form#gform_3. HubSpot will now capture each submission and display it on the contact’s activity timeline.
This allows your automation workflows to trigger exactly the same as if someone had submitted a HubSpot-built form—without disrupting your current site design.
Capturing Sign-Ups in Application Portals
If your website operates like a web app—especially one built with React or Angular—your forms probably don’t follow the standard HTML structure. They may not even contain a full <form> tag.
In this case, your selector might target a button or container div, such as .signup-button. Each time it’s clicked, and user data is present, HubSpot will log the activity as a form submission.
The benefit? You bring those behavioral signals into HubSpot, enriching your users’ contact records so you can better segment, nurture, or trigger next-step automations.
Tracking Service or Support Web Requests
Your customer service tools might live outside HubSpot, but your reporting doesn’t have to. Support request forms, warranty claims, and refund requests—all of these touchpoints can be connected back to HubSpot if the form is trackable.
A Zendesk web widget, for example, might contain a form identified by the .request-form class. Adding that CSS selector allows HubSpot to monitor when service requests are submitted and associate them with existing contact records.
That kind of visibility helps you map more of the customer journey and respond faster with contextual insights.
Common Setup Errors and Wrong Assumptions
Setting up non-HubSpot form tracking isn’t overly complex, but getting a single detail wrong can break the entire connection. These are the mistakes likely to creep in—and how to resolve them fast.
Mistake: CSS selector doesn’t match any real element.
Fix: Use Inspect Element in your browser to verify the selector targets the exact node you plan to track.
Mistake: The form lacks a valid email field.
Fix: HubSpot connects data using email addresses. Make sure the field is present and properly labeled (e.g., name=”email”).
Mistake: Tracking code loads after your form.
Fix: Your HubSpot tracking code should be in the global <head> section—before any form elements appear on the page.
Mistake: You disabled non-HubSpot form tracking during testing.
Fix: Double-check that tracking remains toggled “on” under Settings > Marketing > Forms > Non-HubSpot Forms.
Step-by-Step Setup or Use Guide
Before diving in, make sure your HubSpot portal is properly connected to your site. You’ll need admin access and the HubSpot tracking script installed site-wide.
Step 1: Enable Non-HubSpot Forms
Inside HubSpot, go to Settings > Marketing > Forms. Enable the “Collect data from website forms” option.
Step 2: Verify HubSpot Tracking Code Installation
Check for the presence of the HubSpot script on your site—either manually or via tools like BuiltWith or browser extensions.
Step 3: Identify the Form HTML Element
Use “Inspect” in your browser to find the exact element you need to track. Copy its class name or ID.
Step 4: Create a CSS Selector
Build a selector like form#main-lead, .newsletter-form, or [data-form=”signup”] depending on how your form is structured.
Step 5: Test the Selector
Open your browser console and run:
document.querySelectorAll(’YOUR_SELECTOR’)
Make sure it points to one and only one form element.
Step 6: Submit a Test Entry
Complete a test submission. Wait a few minutes, then open the relevant contact record in HubSpot and filter for “Form Submission” in the timeline.
Step 7: Build Automation
With form tracking validated, use it in workflows like sending a thank-you email, triggering lead scoring, or notifying your CRM team.
Step 8: Document for Future Reference
Record your CSS selectors along with the form purpose and URL. This helps with future audits, updates, or troubleshooting.
Measuring Results in HubSpot
Once your non-HubSpot forms are actively tracked, you’ll want to monitor results to ensure everything is flowing into reports as expected.
Here’s where to look:
- Form Submissions Tab:
Navigate to Marketing > Lead Capture > Forms > Non-HubSpot Forms to view submission counts per form. - Contact Activity Timeline:
Within a contact profile, filter by “Form Submission” to verify event logging. - Custom Dashboards and Reports:
Use the “Form Submissions” report type to analyze conversion volume by page, form, or business unit. - Workflow Trigger Logs:
Open workflows tied to form submissions and review enrollment history to confirm submissions are activating follow-up actions.
Keep this checklist in mind:
- Submission events appear consistently on the correct contacts
- Form names and URLs match your setup
- Automation triggers fire as expected
- Your internal logs match HubSpot reports within a small margin
If the numbers align, you can trust your lead data is clean, accurate, and actionable.
Short Example That Ties It Together
Let’s say your company publishes a lead-gen microsite on Webflow promoting a new product. Rather than embedding HubSpot forms, your team designed slick, custom JavaScript forms that match the branding.
You enable non-HubSpot form tracking within HubSpot. Tracking code is added to all Webflow pages via the global header. Then, using the browser inspector, you find identifiers like .demo-request-form and #join-newsletter.
Adding those as CSS selectors in your HubSpot settings allows you to track submissions without rewriting any front-end code. Within minutes of testing, you can see form submission events in real-time on contact records. Auto-responders get launched, and contacts flow into your CRM segments perfectly.
Result: Full visibility into conversion activity with zero disruption to your existing build.
How INSIDEA Helps
Even if you follow every step, aligning multi-platform tracking with HubSpot’s backend rules isn’t always simple. INSIDEA helps teams bridge technical gaps and ensure that every meaningful user interaction is captured in your HubSpot records—especially when those interactions occur in tools outside the HubSpot ecosystem.
Our team does more than troubleshoot form issues. We help structure your data flows, build your automations, and optimize tracking for high-stakes conversions—no matter where they occur.
Our relevant services include:
- HubSpot Onboarding: Install the tracking script, configure CSS selectors, and sync legacy forms
- HubSpot Management: Maintain tracking accuracy for new pages, portals, and integrations
- Automation Support: Use external submissions to trigger tailored workflows
- Advanced Reporting Setup: Build dashboards that reflect full-funnel visibility, including external submissions
If you’re struggling to track external form activity or want to feel confident your conversions are never lost, check out INSIDEA’s HubSpot consulting services or connect with one of our specialists.
