Error "ReferenceError: hbspt is not defined" with embed code for form

[LisbethN]

Hi, 

I created this form for a PDF download on the website:

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js"></script>
<script>
hbspt.forms.create({
portalId: "5869165",
formId: "4b903862-c21b-4565-8311-3ef740bd562f"
});
</script>

When I embed it on my WordPress site (with the Modal Text / HTML Link builder block) it always gives me this "unknown error": "Error "ReferenceError: hbspt is not defined".

This leaves me unable to even make changes to the page. 

I tried starting over and tried adding <div> tags in the embed code (after research on this forum) but nothing seems to work.

Any ideas what's wrong with the embed code and how I can solve this?

Thanks!

[Gifford]

Loading the script dynamically works well

<script>
  (() => {
    const script = document.createElement("script");
    script.setAttribute("type", "text/javascript");
    script.src = "https://js.hsforms.net/forms/embed/v2.js";

    script.addEventListener("load", () => {
      hbspt.forms.create({
        region: "...",
        portalId: "...",
        formId: "...",
      });
    });

    document.head.append(script);
  })();
</script>

[SUdo5]

When using the above code, the form is loading infinitely. Could you please share your solutin for it if you have one?

[Jaycee_Lewis]

Thanks, @Gifford! 

[RPieczul · Accepted solution]

Hi,

I'm managing a Kentico website and I encountered the same error as the original poster.

After a great deal of frustration, I was able to resolve the issue by simply adding "https:" to the front of the source path.

I'm not sure why the https:// is excluded from the src path in the generated code snippets, but oh well.

Hopefully this helps anyone else who encounters the same issue.

Thanks, 

[WendyGoh]

Hi @LisbethN,

The error "ReferenceError: hbspt is not defined" likely means that when calling the function "hbspot" on your page to try and load the form create script, the shell.js hasn't been created. This could means that the shell script loads after all the html has loaded or there's an issue loading the shell script. 

In this case, it looks like when embedding HubSpot form on a WordPress page, there are some potential issues that may cause the code to break - Refer to this documentation: Externally embedded HubSpot form isn't working. 

Hence, could you try adding HubSpot forms to your WordPress page using any one of the options detailed here: Add HubSpot forms to WordPress pages and posts?

Let me know if this works for you!