Issues with getting form to pre-populate once embedded on website

[dhejl]

Hi all,

I'm looking for some guidance on a particular pain point pertaining to forms and getting fields to pre-populate.

I am working with a customer who wants to auto-populate fields in their website forms (which I know we can typically do with query strings).

When they take the Javascript code that's generated in HubSpot and embed it in their website (Wordpress), they are finding that the auto-population function doesn’t work when the form is embedded, but it does work when visiting the link stored in HubSpot.

We are trying to understand why they aren't able to get the fields to pre-populate. They are accessing the form from the same device (as we understand this is an important prerequisite for getting the form pre-populated).

Since it's using Javascript, does it mean that the query strings won't work? Does it require the code to be tweaked in any way?

Thanks a lot in advance to anyone who might have a solution to this!

[coldrickjack]

Hey @dhejl,

Providing they're embedding a HubSpot form on an external page this should just work to be quite honest with you! There are a couple of things I would check in order to attempt to resolve this.

1) Is the form being loaded as an iframe or as part of the DOM?

I'd do is check to see if the form has been configured to load as "raw HTML". See below - it can be found under the "style & preview" tab in the form editor in HubSpot, with this setting enabled the form is loaded directly into your DOM.

If this is disabled the form loads in an iframe and the auto population of using query string parameters will not work as the source url of the iframe is different to the url of the page that it's being loaded in. Worth noting that by default a form embedded on a HubSpot hosted page will be loaded as part of the DOM (as raw HTML) and not in an iframe. 

More information on how this setting works can be found here. It's particularly useful if you'd like to apply your own CSS to forms embedded on external sites. 

2) Do the query string parameters match the internal names of the properties

HubSpot requires the name of the query parameter to match the internal name of the property associated to the form field. So for instance:

https://www.example.com?firstname=jack&lastname=coldrick

Will auto populate providing the first name and last name properties are added. However the below will not as the query parameters "first_name" and "last_name" do not match the internal property names of "firstname" and "lastname".

https://www.example.com?first_name=jack&last_name=coldrick

If you are still facing issues I'd need to be provided with a link to the page to better understand. You can directly message me that if you'd prefer. From my experience it's one of the above (or sometimes a combination) that can cause this issue.

Hope this helps! 

[kindghost]

Thanks for the tips,

I tried them out but sadly still the same issue, the auto-populate of the fields wont work the second time i try to fill up the form and even the link to reset the form wont show up. I can see that the form is loading directly into the DOM after disabling the hubspot styling.

here is the page where the form is embeded: https://redmoneyevents.com/event/uk2023-testing/

[coldrickjack · Accepted solution]

Hey @kindghost,

Perhaps I don't fully understand the issue because when I go to the page by following this URL (notice the query parameters included) the form successfully populates with those values and I can submit:

https://redmoneyevents.com/event/uk2023-testing/?salutation=mr&firstname=jack&lastname=coldrick&email=jackcoldrick-demo@gmail.com&jobtitle=engineer&company=jackdev&contact_country=ireland&phone=029430243

The above is the functionality outlined here. Are you attempting to do something else? 🤔

It sounds like you might just be hoping that for tracked visitors who have converted before there data is pre-populated into the fields, the functionality outlined here. 

If that is the case I believe I know the issue. I can see no hubspot cookies being dropped on my browser. Which leads me to believe the hubspot tracking code is not installed on the page. That should be included seperately to the form embed code. See the cookies dropped on your page (no hubspot cookies present):

See the cookies present on a page with the tracking code installed, there are a number of cookies - most important being the "hubspotutk" which is responsible for tracking visitors in the CRM. 

 

Until the hubspot tracking code is installed the forms will not pre-populate for recognised visitors. 

 

[kindghost]

Thanks Again for all the efforts,

its a bit odd, as it still wont work from my side, tried different browsers and even different Devices. but still work perfectly in the standalone link. please see the test i did on the video https://vimeo.com/857768481?share=copy

thanks again,

[coldrickjack]

Hey @kindghost,

Thanks for recording that video (there wasn't any audio - not sure if that was intentional) but I understand the context! 👍

I think the issue is that the HubSpot tracking code is not installed on your page. The reason it works on the standalone link is because the tracking code is included by default and any hubspot hosted page.

I would recommend adding the tracking code to your page as per this documentation and trying again.

[kindghost]

Thanks for this @coldrickjack, you are right adding the tracking code or the wordpress plugin and disabling the AD blocker made it work.

thanks for all your efforts.

[dhejl]

@Jaycee_Lewis FYI 🙂