APIs & Integrations

Gilles_Poulles
Mitglied

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

lösung

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

0 Upvotes
1 Akzeptierte Lösung
Tim_Joyce_Belch
Lösung
Mitglied

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

lösung

@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

Lösung in ursprünglichem Beitrag anzeigen

0 Upvotes
7 Antworten
Gilles_Poulles
Mitglied

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

lösung

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

0 Upvotes
Tim_Joyce_Belch
Lösung
Mitglied

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

lösung

@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

0 Upvotes
Gilles_Poulles
Mitglied

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

lösung

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

Tim_Joyce_Belch
Mitglied

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

lösung

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

0 Upvotes
Derek_Gervais
HubSpot-Alumnus/Alumna
HubSpot-Alumnus/Alumna

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

lösung

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.

0 Upvotes
Gilles_Poulles
Mitglied

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

lösung

Hi @Derek_Gervais,

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

Thanks
Gilles

0 Upvotes
Derek_Gervais
HubSpot-Alumnus/Alumna
HubSpot-Alumnus/Alumna

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

lösung

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?