Author: Jon Collette

If you’ve ever worked with HubSpot forms in a real-world environment — on production websites, landing pages, CMS templates, or shared form URLs — you’ve probably hit the same friction point over and over:

You’re looking at a live form and want to answer a simple question:

• How is this form performing?
• Where is this form in HubSpot?
• Which workflows or campaigns are tied to it?
• Oh crap, I need to edit that… so which one is it?

And yet, getting from the embedded form on a live page to the actual form record inside HubSpot is anything but simple. Usually, you’d need to wander around your HubSpot instance and poke at things until you’ve found it or break out the developer tools to get the form ID.

This is the problem the HubSpot Form Shortcut (a free Chrome extension) was built to solve.

How HubSpot Forms Actually Work (Portal IDs, Form IDs, and URLs)

At the core, every HubSpot form is identified by two values:

• Portal ID: the numeric ID of your HubSpot account
• Form ID: a globally unique identifier (GUID) assigned to the form

When HubSpot renders a form on a page, those identifiers are embedded directly into the page’s HTML or JavaScript. Depending on the embed type and generation of the form, they may appear in different places:

• As data-portal-id and data-form-id attributes on the <form> element
• As part of the form’s DOM id or class name
• Inside the form’s submission endpoint (/multipart/{portalId}/{formId})
• Exposed globally on HubSpot-hosted or share pages via window.hs_RequestParams

Once you know the portal ID and form ID, HubSpot’s internal URLs are predictable. For example, the form’s performance page follows this structure:

https://app.hubspot.com/submissions/{portalId}/form/{formId}/performance

That page is the real control center: submissions, workflows, campaign attribution, and editing all live there. The problem is that HubSpot does not surface this link on live sites, and getting it manually requires opening DevTools, inspecting the form, copying IDs, and assembling the URL by hand.

That’s fine once. It’s painful the hundredth time.

What HubSpot Form Shortcut Does Differently

HubSpot Form Shortcut automates that entire process. The extension runs entirely at runtime in your browser. When a page loads, it:

1. Scans the page’s DOM for embedded HubSpot forms
2. Extracts the portal ID and form ID from the markup already present
3. Builds the correct HubSpot performance URL
4. Injects a small, destyled, unobtrusive link directly into the form

The result is a simple, visible link:

“🔗 Go to HubSpot Form →”

Click it, and you’re immediately taken to the form’s performance page in HubSpot — no inspection, no guessing, no manual URL construction.

How the Extension “Sniffs Out” HubSpot Forms

One of the trickier aspects of working with HubSpot forms is that they are not rendered consistently across all environments. Some forms:

• Render immediately as static HTML
• Are injected after page load via JavaScript
• Appear without a submission action attribute
• Live inside flexbox-based layouts or complex component systems

Because of this, HubSpot Form Shortcut doesn’t rely on a single detection method. Instead, it uses layered, defensive logic to identify forms reliably:

• It looks for <form> elements that match known HubSpot patterns
• It prioritizes data-portal-id and data-form-id when present
• It falls back to parsing known HubSpot ID formats in element IDs and class names
• On HubSpot-hosted or shared form pages, it reads identifiers from window.hs_RequestParams

This approach mirrors how HubSpot itself understands its forms — but exposes that understanding in a way that’s useful during day-to-day work.

Handling Late-Loaded Forms and Dynamic Pages

Modern websites don’t always load everything at once. HubSpot forms are often injected after the initial DOM is ready, especially on CMS-driven or component-based sites. To account for this, HubSpot Form Shortcut doesn’t run just once. Instead, it:

• Executes immediately
• Re-runs after short delays (3, 6, and 9 seconds)
• Stops processing once a form has already been handled

Each form is flagged with a lightweight attribute once processed, so the extension never duplicates links or interferes with page behavior. There’s no infinite polling, no mutation observers running forever, and no performance overhead beyond a few bounded checks. This makes the extension resilient without being invasive.

Why the Link Is Injected Into the Form Itself

Another deliberate design choice: the link is injected inside the form element, not wrapped around it or placed in an external container. This avoids layout issues on sites that use:

• Flexbox-based forms
• Grid-based layouts
• Highly styled form wrappers

The injected link is wrapped in a minimal container that opts out of flex stretching, ensuring it behaves predictably without breaking design systems and destyled so its noticeable.

The goal is not to decorate the page but to add exactly one functional affordance where it belongs: go to the form.

The Purpose: Removing Friction From Real-World HubSpot Work

This extension exists for one reason: to make accessing HubSpot forms easier. Specifically, I’ve used this to conduct wholistic site reviews and understand what forms are on what pages.

Without it, the human-centric process looks like this:

1. Navigate to the page
2. Inspect the form
3. Find the portal ID
4. Find the form ID
5. Build the URL manually
6. Hope you copied it correctly
7. Finally access the form

With HubSpot Form Shortcut:

1. Navigate to the page
2. Click the link
3. You’re there

There’s no API usage, no authentication, no tracking, and no data collection. The extension doesn’t know who you are, what the form collects, or how it performs — it simply reads identifiers that are already exposed and helps you navigate faster.

A Small Tool for a Repeated Problem

Individually, inspecting a form isn’t hard. Collectively, it adds up — especially for marketers, RevOps teams, developers, and anyone auditing HubSpot implementations across multiple sites.

HubSpot Form Shortcut is intentionally small, runtime-only, and single-purpose. It doesn’t try to be a dashboard or a platform. It just removes one sharp edge from everyday HubSpot work.

If you regularly interact with HubSpot forms in the wild, this saves time immediately—and stays out of your way just as quickly.