Couldn't find target container #hbspt-form-xxx

forms

#1

Hi,

I'm trying to add a value to a hidden field with the following script:

hbspt.forms.create({
	portalId: "xxx",
	formId: "yyy",
	target: "#test",
	onFormReady: function($form) {
		console.log("test");    
        $("input[name=\"what_kind_of_events_are_you_interested_in_\"]").val("test 123").trigger('change'); 
} 
});

The form is correctly rendered, and console.log works fine.
But the value is not added to the input field.
The console shows me the following error:

shell.js:12 Couldn't find target container #hbspt-form-xxxx for HubSpot Form yyyy. Not rendering form onto the page

thanks
Gilles


Couldn't find target container #hbspt-form-XXXX for HubSpot Form XXXX. Not rendering form onto the page
#2

Hi @Gilles_Poulles,

That's odd; I'm not entirely sure if that console error is related or not. Could you send me a link to the page you're seeing this issue with so that I can take a closer look?


#3

Hi @Derek_Gervais,

have a look: https://bit.ly/2v2eIwP

Thanks
Gilles


#4

Hi @Gilles_Poulles,

It seems like this is an issue with jQuery; it's behaving as if jQuery isn't being included, despite the fact that I can see it being loaded in the network tab. Is it possible you're only loading certain parts of the library, or otherwise customizing the jQuery library included on your page? This can happen because someone edited the core file, or a plugin may have overwritten the $ variable.


#5

Thanks @Derek_Gervais,

I cleaned up the head section and implemented the jquery from a CDN to be sure that the core is not manipulated.
The error in the console disappeared but the form is still not changed on "onFormReady".
jQuery seems to work fine as I added an additional input field which I fill up via jQuery.

thanks
Gilles


#6

@Gilles_Poulles - I'm not sure if this helps for your scenario but, if you are linking to the page from one of your events, you can pass the data you want to fill as a url parameter. The form will autopopulate based on the url parameter you set. So, you can test this by adding

/hb-test?where_would_you_like_to_sponsor_events_=hello!!!

to your URL and you will see the form field get prefilled. This is a feature that is often overlooked and not well documented.

Design beautiful HubSpot forms with https://forms.belch.io - tim@belch.io


#7

Yes that solves my problem @Tim_Joyce_Belch :slight_smile:
Thanks very much!


#8

Awesome! and, if you have trouble styling that form, head over to the form styler.