Pre Fill Form Field with Previously visited URL

Marketing & Content Hub Tips, Tricks & Best Practices
,
1

Hi all,
I am looking for an advise.
We are looking to build a from on request Demo LP and prepopulate a hidden field with a value from web page that prospect has visited immediately beofre landing on the request demo page.
To lillustrate:
Demo Page Form:
First Name
Last Name
Email
Product (hidden field)
Prospect lands on www.company.com/Product1
and clicks on Request Demo link which leads them to the Demo Request LP with the above mentioned Form.
When the Request Demo LP loads we woudl like the hidden Product field to be populate with Product1 (from the visted URL).
Prospects then fills rest of the form, hit submit and the form submission is captured in HS as per ususl.
Appreciate any advise.

2

Hey @VoyTECHJ, thank you for posting in our Community!

To achieve this, you can pass the product value via a query parameter when the prospect clicks the “Request Demo” link.

I want to also invite our top experts to share their thoughts, @Anton and @DanielSanchez any other recommendations for the @VoyTECHJ matter?

Thank you,

Pam

3

@PamCotton Thank you for that. How do I set up a HS form to cature that query para?

4

Hi @VoyTECHJ,

You can use jQuery to append the hidden field’s value to the “Request demo link” URL as a parameter.

For example, company.com/request?product=Product1

On the Request Demo LP, fetch this URL parameter’s value using jQuery and append it to your form field.

5

Thanks @GiantFocal , This is interesting. Woudl you have a quick example how the JQuery could look like?
Thanks

6

@VoyTECHJ,

Sure, here are the codes:

For appending the product parameter to the button:

$(function() {
 $('#button').attr('href', function(i, href) {
 var productValue = $('#hiddenField').val(); // Assuming hidden field has id="hiddenField"
 return href + (href.indexOf('?') != -1 ? "&product=" : "?product=") + productValue;
 });
});

For fetching the product parameter value from URL:

$(function() {
 var url = new URL(window.location.href);
 var productParam = url.searchParams.get('product');

 if(productParam) {
 // Assuming you have a form field with id="productField"
 $('#productField').val(productParam);
 }
});
7

Hi, where should i insert this codes? In Hubspot?

8

Hello there @Guideaux and thank you for posting your question!

You’ll add the snippets as custom code on your HubSpot pages:

  • Product page, put the first script in Settings → Advanced → Additional code snippets → Footer HTML.
  • On the Request Demo landing page, put the second script in the same Footer HTML area.

Make sure the IDs in the code (#button, #hiddenField, #productField) match your actual button and form field IDs.

You can find more info here: Use code snippets with HubSpot content

Let me know if you have any more questions!

Victor