Embedded forms not displaying


#1

I have the following code in an Angular 4 application.

let ie_comment_start = this.renderer.createComment('[if lte IE 8]');
let ie_script = this.renderer.createElement('script');
ie_script.type = 'text/javascript';
ie_script.charset = "utf-8";
ie_script.onload = (ev: Event) => {
	let current_script = this.renderer.createElement('script');
        current_script.type = 'text/javascript';
        current_script.charset = "utf-8";
        current_script.onload = (ev2: Event) => {
        	console.log('loaded');
                let form_script = this.renderer.createElement('script');
                form_script.type = 'text/javascript';
                form_script.text = `
                	setTimeout(function() {
                        	console.log('start hbspt.forms.create');
                                hbspt.forms.create({
                                	portalId: "${this.data.hubspot_portal_id}",
                                      	formId: "${this.data.hubspot_form_id}",
                                      	target: "#hubspotform"
				});
                                console.log('end hbspt.forms.create');
                        }, 10000);
                `;
                this.renderer.appendChild(hubspotform, form_script);
	};
        current_script.src = '//js.hsforms.net/forms/v2.js';
        this.renderer.appendChild(hubspotform, current_script);
};
ie_script.src = '//js.hsforms.net/forms/v2-legacy.js';

let ie_comment_end = this.renderer.createComment('[endif]');
this.renderer.appendChild(hubspotform, ie_comment_start);
this.renderer.appendChild(hubspotform, ie_script);
this.renderer.appendChild(hubspotform, ie_comment_end);

The code runs, the portal id and form id are using correct values, v2-legacy.js and v2.js are both loaded. However the form is not displayed anywhere on the page and I receive the following error in the developer console.

ERROR TypeError: "hbspt.forms.create is not a function"

Has anyone experienced anything similar?


#2

Does the form load on the page when you use static values in the embed code? Like if you have just copied it right from the hubspot form creator? The only thing I can think of is that maybe your v2-legacy.js and v2.js are being loaded after your form creation and not being seen?


#4

That was my initial thought which is why the call to hbspt.forms.create is in the onload of the v2.js which isn't added until the onload of the v2-legacy.js. Even added a 10second timeout after v2.js loads before calling hbspt.forms.create just to be safe. Didn't change anything unfortunately.


#5

We have the same issue. It's a problem with the creation (saveGlobal) function from the v2.js


#6

I think the override from global objects and later resetting after v2.js is done is maybe not the best way to work with different framework integrations.