Beyond the Click: Capturing Referrer URLs in HubSpot Forms for E-commerce Success

Ever wonder what specific page on your site truly sparked a lead's interest before they hit that 'Contact Us' button? It's a common dilemma, especially for e-commerce businesses like those powered by ESHOPMAN, with a diverse product or service catalog. Knowing this detail can be a game-changer for lead qualification and sales routing, ensuring your prospects connect with the right expert from the get-go.

This exact challenge recently came up in the HubSpot Community, where an original poster was grappling with how to capture the 'referrer URL' – that crucial last page visited – directly within their HubSpot form submissions and contact records. They had a great setup: a custom 'referrerurl' property, a hidden form field, and even tried some HubSpot-provided JavaScript, but it just wasn't quite clicking.

For any ESHOPMAN user, or really anyone running an e-commerce operation on HubSpot, this is gold. Imagine a prospect browsing your 'AI Super Cluster' solution page, then clicking 'Contact Us.' If you know they came from that specific page, you can immediately route them to your AI solutions specialist, rather than a general sales rep. That's efficiency, and it's what drives sales.

Unlocking Lead Intent: The Community's Solution

After a bit of back-and-forth, a helpful community member jumped in with an elegant, actionable solution that leverages HubSpot's flexibility with a touch of clever URL parameter usage and JavaScript. This method is particularly powerful for businesses looking to enhance their lead intelligence without relying on complex, third-party integrations, making it a valuable addition to any google online store builder strategy.

Here's a breakdown of how you can implement this for your own e-commerce store, ensuring you capture that vital referrer information:

Step 1: Customize Your Internal Referral Links with URL Parameters

This is where the magic begins. Instead of simply linking to your contact page, you'll add a specific query parameter to the URL. This parameter will act as a unique identifier for the page from which the user initiated contact. For example, if your 'AI Super Cluster' page has a contact button, its link to your contact page (e.g., https://www.yourstore.com/contact-us) would become something like:

https://www.yourstore.com/contact-us?referrer-page=ai-super-clusters

Notice the ?referrer-page=ai-super-clusters appended to the URL. The referrer-page is the parameter name, and ai-super-clusters is its value. You would repeat this for every significant product or service page on your site, using a descriptive value for each. For instance, a link from your 'Gen AI in a Box' page might be ?referrer-page=gen-ai-in-a-box.

Step 2: Create a Custom HubSpot Contact Property

Next, you need a place in HubSpot to store this information. You'll create a custom contact property to capture the value from your URL parameter.

• Navigate to Properties: In your HubSpot account, go to Settings > Properties.
• Create a New Property: Click 'Create property'.
• Object Type: Select 'Contact'.
• Group: Choose an appropriate group (e.g., 'Contact Information' or 'Website Activity').
• Label: Give it a clear, descriptive label like 'Referrer Page Identifier'.
• Internal Name: This is crucial. Ensure the internal name matches the parameter name you used in your URLs. If your URL parameter is referrer-page, then your internal property name should be referrer_page (HubSpot typically converts hyphens to underscores).
• Field Type: 'Single-line text' is usually sufficient, as it allows for flexible values. If you have a predefined set of referrer pages, you could use a dropdown select.

This property will dynamically populate with the specific page identifier when a form is submitted.

Step 3: Add the Custom Property as a Hidden Field to Your HubSpot Form

Now, integrate this new property into your HubSpot form:

• Edit Your Form: Go to Marketing > Lead Capture > Forms and edit the relevant contact form.
• Add Field: In the form editor, search for your newly created 'Referrer Page Identifier' property.
• Set as Hidden: Drag the field onto your form. Then, click on the field and select the option to make it 'Hidden'. This ensures users don't see or manually fill out this field, maintaining a clean user experience.

The hidden field is essential for the JavaScript to inject the referrer data.

Step 4: Implement JavaScript for Dynamic Population

The final step involves a small piece of JavaScript code that will read the URL parameter and automatically populate your hidden form field. This script should be placed on the page where your HubSpot form is embedded.

A community member provided an effective script, which works particularly well for HubSpot forms embedded as iframes:

onFormReady: function($form) {
  const params = new URLSearchParams(window.location.search);
  const referrerPageValue = params.get('referrer-page');
  if (referrerPageValue) {
    $form.find('input[name="referrer_page"]').val(referrerPageValue);
  }
}

Where to place this script: If you're using HubSpot pages, you can add this within the 'Head HTML' section of the specific page settings or in your website settings for global application. If using an external site, embed it in the HTML where your HubSpot form script is called. Ensure the input[name="referrer_page"] matches the internal name of your custom HubSpot property.

Beyond Basic Tracking: Leveraging Referrer Data in HubSpot

Capturing referrer URLs is just the beginning. The real power comes from how you use this data within your HubSpot CRM and ESHOPMAN storefront operations:

• Smart Lead Routing: Use the 'Referrer Page Identifier' property in HubSpot workflows to automatically route leads to the most appropriate sales team or individual. A lead from your 'AI Super Cluster' page can go directly to your AI solutions specialist, cutting down on qualification time and improving response rates.
• Personalized Follow-ups: Tailor your automated email sequences or sales outreach based on the specific product or service that interested the prospect. This level of personalization significantly increases engagement and conversion rates.
• Enhanced Reporting: Analyze which product or service pages are generating the most interest and leading to form submissions. This insight can inform your content strategy, marketing campaigns, and even product development.
• Complementary CTA Tracking: While this method captures the *page* referrer, remember that embedding HubSpot CTAs (Call-to-Actions) on your pages provides even more granular data on specific button clicks within the HubSpot contact overview. Both methods together offer a robust tracking solution.

This approach transforms your HubSpot portal into a more intelligent lead qualification engine, allowing ESHOPMAN users to move beyond being just a free ecommerce app builder and become a strategic growth platform. By understanding the precise intent behind each inquiry, you can optimize your sales process, deliver more relevant experiences, and ultimately drive more revenue.

Implementing this solution will empower your sales and marketing teams with invaluable context, turning anonymous clicks into actionable insights and helping you convert more interested prospects into loyal customers.