Query String and Form Redirects

[davidlopez]

Our client has recently migrated their CRM of choice from Pardot to Hubspot. We currently have external assets (websites) built out that are wired up via Pardot forms. We are looking to switch the pardot forms over to Hubspot forms. There are a few functionity items that we'd like to know more on how to implement via Hubspot as they were working Pardot.

1) All previous assets had personalization built on the asset content (ex. Content would populate Hello 'First Name'! using Pardot form info) via Pardot Variable Tags within our URL (example ?firstName=%%first_name%%).
So far the HubL Variables we've tested have not worked on our content. Are there HubL variables or other variable that work on external web pages that are not created within Hubspot pages? 

2) We had the Pardot form setup on a modal iframe that would redirect the user to the url set within the form completion actions. Meaning the iframe would dissapear once the Pardot form had submitted and the parent page would load with the redirect url. In Hubspot the redirect is happening within the iframe and not the parent page. Pardot had an option that controlled this (checkmark box stating - 'Redirect to the following URL instead of showing the form's Thank You Content'). This would not load thank you message in iframe and in turn would just redirect the site load to the redirect url target.

Any guidance on these items would be appreciated.

"Hello, "

What I want to achieve is for anyone that visits this landing page using the URL: domain.com/123?firstname=John&lastname=Smith the first line displays "Hello John Smith," rather than just "Hello"

I suppose it can be done using Java Script. Can anyone help with some ideas?

[Derek_Gervais]

Hey @davidlopez ,

Let me try to address your questions individually:

1. HubSpot form fields will automatically populate with a query parameter if the key matches the internal property name (on HubSpot or external sites). An example using my first name would look like this: ?firstname=Derek Additionally, HubSpot pages can use HubL to populate content with contact data, among many other things. HubL doesn't work on external pages, since it's a tempalting system that's evaluated server-side. 
   
   If I'm looking at the example you've included at the bottom of your page (i.e. domain.com/123?firstname=John&lastname=Smith the first line displays "Hello John Smith"), a form with the firstname and lastnamefields would automatically populate with "John" and "Smith", respectively. If you instead wanted to dynamically populate content on the page, you'd need to use the {{ request.query_dict }} HubL variable (see here)
2. HubSpot forms should also be able to redirect visitors to a thank you page, but it's tough for me to guess what's going on without a specific example. Here's some general documentation that might be helpful: https://knowledge.hubspot.com/forms/create-forms#customize-your-form-options
   
   If you have a specific example page that isn't redirecting properly, I'd recommending calling into support so that our team can take a closer look at what's going on.

Switching over from one system to the next is always tricky, so if you run into any other issues don't hesitate to reach out to our Support team or post here in the HubSpot Community!

[davidlopez]

Thank you for your answer. To clarify the current issue further with a live example:

The current Pardot integrated asset is here:

https://ebooks.flashparking.com/mobility/

When the Pardot form iframe modal is filled in the modal dissapears and reloads the browser parent window with the redirected url that is currently set within the Pardot form's completion actions:

Which is setup to include Pardot variables (ex: %%first_name%% = Prospect’s First Name field)

reference---  https://help.salesforce.com/articleView?id=pardot_variable_tags_reference.htm&type=5

https://ebooks.flashparking.com/mobility/?access=yes&firstName=%%first_name%%&lastName=%%last_name%%...

When the form is submitted/redirect happens the newly loaded url based on the above structure comes back with Pardot variables filled in with prospect data that in turns allows our code to pull from the url and add dynamic content like Hello John!

https://ebooks.flashparking.com/mobility/?access=yes&firstName=John&lastName=Smith&company=SmithCO&i...

=====
so, with your explanation adding for example for First Name  {{ request.query_dict.firstname }} instead of %%first_name%% in the redirect url will display the lead/prospects name in the redirect url?


https://ebooks.flashparking.com/mobility/?access=yes&firstName={{ request.query_dict.firstname }}&...etc

Correct? Thanks!

[Derek_Gervais]

Hey @davidlopez ,

Thanks for your patience here. I've cooked up an example in my own account. While it's admittedly simple and ill-suited for a production deployment, I think it's conceptually similar enough to help you get started. Here's the page: https://www.over-understanding.info/html-form-test-page

On this page, I do a few things:

1. In the title where it says "Hello visitor!" I'm using the HubL variable we discussed before, with a default value of "visitor".
2. In the form, I've introduced an onFormSubmit callback function to execute immediately after the form has been submitted.
3. In the callback function, I've written two lines of code: One that pull the firstname value from the form, and another that redirects the page back to itself with an added firstname query parameter. 

All together, this allows me to accept a form submission, refresh the page, and display a new 'personalized' version of the page to the visitor. There's a ton of room for more sophisticated customization here using things like HubL conditional logic, but for demonstrative purposes this example should suffice.

Because this is an example, I did all of this in HTML on my page using a customized form embed code. If you were to implement this live, you'd likely want to more elegently handle adding the query parameter(s), and consider using Global Form Events to make this solution more scalable. Here's the code I used:

<h2>Hello {{ request.query_dict.firstname|default('visitor') }}!

<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
  hbspt.forms.create({
	portalId: "xxxxx",
	formId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
    inlineMessage:" ",
    onFormSubmit: function($form) {
    window.location.href = window.location.href + `?firstname=${$form.find('input[name="firstname"]').val()}`;
    } 
});
</script>