topic Re: HS Forms + Nuxt 3 Dynamic Issue in CMS Development

HS Forms + Nuxt 3 Dynamic Issue

Mork — Thu, 31 Jul 2025 21:43:20 GMT

Hi,

We’re using the modern HubSpot form editor to build our forms and are embedding them into our Nuxt 3 project. We’ve created a reusable form component that accepts portalId and formId as props. This component is used across various dynamic pages, and in some cases, we render multiple forms on a single page. The embed script (https://js.hsforms.net/forms/embed/v2.js) is added globally to our Nuxt config. On component mount, we check whether the script is already loaded; if not, we inject it. Once window.hbspt.forms is available, we call hbspt.forms.create() with the respective parameters: target, region, portalId, and formId.
The forms generally render successfully. However, we receive the following error:

{"status":"error","message":"You cannot fetch this type of form using this endpoint. Not an Embed version 2 or 3 form","correlationId":"5240f2dc-32a1-4522-b277-d68016b650a2"}

We’d like to understand what causes this issue. Are there limitations with certain forms, even if they’re built with the modern editor, that prevent them from being embedded this way? Please let us know if you require more technical details or sample form IDs to assist in your investigation.

Thank you

Re: HS Forms + Nuxt 3 Dynamic Issue

TomM2 — Fri, 01 Aug 2025 09:18:56 GMT

Hey @Mork looks like you're using the old form embed code with a new form. The new forms editor embed code is structured like this:

The one with form.create and all that is the legacy forms editor so you'd need to choose that when creating your form. That would only be a temporary fix however as v2.js and the legacy editor will go away at some point.

Re: HS Forms + Nuxt 3 Dynamic Issue

chighsmith — Fri, 01 Aug 2025 16:06:04 GMT

Hi @Mork,

Welcome to the Community!

It sounds like you’re embedding HubSpot forms in your Nuxt 3 project with a reusable component and the standard embed script, but you’re getting an error that some forms can’t be loaded this way, even though they were made with the modern editor.

Since I've never seen an error like this before I'd like to tag in some of our Community Champions to take a look - @matt_scott @Jake_Lett and @BukunmiOdetayo Do you have any ideas?

-Cassie
Community Manager

Re: HS Forms + Nuxt 3 Dynamic Issue

Mork — Fri, 01 Aug 2025 17:06:18 GMT

Thank you!

Yes we're using the modern builder not the legacy. And exmaple of the form ebed codes HS is giving us is:
<script src="https://js.hsforms.net/forms/embed/3368315.js" defer></script>
<div class="hs-form-frame" data-region="na1" data-form-id="96f103c2-e375-4ce6-80b7-51f6039ee2ae" data-portal-id="3368315"></div>

This is how we are currently embeding the forms and it's the latest method mentioned in docs
https://developers.hubspot.com/docs/guides/cms/content/forms#using-the-form-embed-code
https://knowledge.hubspot.com/forms/how-can-i-share-a-hubspot-form-if-im-using-an-external-site#add-the-form-embed-code

Script:
<script src="https://js.hsforms.net/forms/embed/v2.js" async></script>

HTML:
<div id="TARGET_ID"></div>

JavaScript:
window.hbspt.forms.create({
target: "#TARGET_ID",
region: REGION,
portalId: PORTAL_ID,
formId: FORM_ID,
});

forms are embeding fine (attached the forms render) but we receive the error (screenshot attached) in the console for the same form.
And this is the other option to embed forms which works well and doesn't gives the error. but we can't embed multiple forms with it as it doesn't gives us the option to create and inject forms by passing TARGET_ID, REGION, PORTAL_ID, and FORM_ID

<script src="https://js.hsforms.net/forms/embed/PORTAL_ID.js" defer></script>
<div class="hs-form-frame" data-region="na1" data-form-id="FORM_ID" data-portal-id="PORTAL_ID"></div>

Re: HS Forms + Nuxt 3 Dynamic Issue

Mork — Fri, 01 Aug 2025 17:05:34 GMT

Hi Tom,

That's not the case. We're using the modern form builder and the embed code you provided is what we have:

<script src="https://js.hsforms.net/forms/embed/3368315.js" defer></script>
<div class="hs-form-frame" data-region="na1" data-form-id="96f103c2-e375-4ce6-80b7-51f6039ee2ae" data-portal-id="3368315"></div>

This is how we are currently embeding the forms and it's the latest method mentioned in docs
https://developers.hubspot.com/docs/guides/cms/content/forms#using-the-form-embed-code
https://knowledge.hubspot.com/forms/how-can-i-share-a-hubspot-form-if-im-using-an-external-site#add-...

Script:
<script src="https://js.hsforms.net/forms/embed/v2.js" async></script>

HTML:
<div id="TARGET_ID"></div>

JavaScript:
window.hbspt.forms.create({
target: "#TARGET_ID",
region: REGION,
portalId: PORTAL_ID,
formId: FORM_ID,
});

forms are embeding fine (attached the forms render) but we receive the error (screenshot attached) in the console for the same form.
And this is the other option to embed forms which works well and doesn't gives the error. but we can't embed multiple forms with it as it doesn't gives us the option to create and inject forms by passing TARGET_ID, REGION, PORTAL_ID, and FORM_ID

<script src="https://js.hsforms.net/forms/embed/PORTAL_ID.js" defer></script>
<div class="hs-form-frame" data-region="na1" data-form-id="FORM_ID" data-portal-id="PORTAL_ID"></div>

Re: HS Forms + Nuxt 3 Dynamic Issue

FaramarKolivand — Sat, 02 Aug 2025 22:09:51 GMT

Regarding the 403 error, we had this issue within or Sitefinity CMS and HubSpot forms. Configuring the HTTP security headers fixed our issue. Do you know if your Nuxt app is served from a domain that's behind a firewall, or if you're using any content security policies?

Re: HS Forms + Nuxt 3 Dynamic Issue

Mork — Wed, 06 Aug 2025 04:20:16 GMT

Still getting the same error, after configuring the HTTP security headers unfortunately.

Re: HS Forms + Nuxt 3 Dynamic Issue

TomM2 — Fri, 08 Aug 2025 13:28:07 GMT

Hey @Mork I think the issue is that the documentation there is outdated, it outlines the old form embed code too.

@CommunityTeam Could you confirm with the forms team if it's expected that embed code customisations work with the new embed code? https://developers.hubspot.com/docs/guides/cms/content/forms#using-the-form-embed-code

Re: HS Forms + Nuxt 3 Dynamic Issue

chighsmith — Fri, 08 Aug 2025 21:04:12 GMT

Hi @Mork and @TomM2,

I will reach out to our team on this and get back to you!

Cassie, Community Manager

Re: HS Forms + Nuxt 3 Dynamic Issue

TomM2 — Wed, 13 Aug 2025 14:05:24 GMT

Hey @Mork have you seen the global form events articled linked in the "help" dropdown in the new forms editor? Think this is what you're looking for:

https://developers.hubspot.com/docs/guides/api/marketing/forms/global-form-events

Re: HS Forms + Nuxt 3 Dynamic Issue

chighsmith — Fri, 29 Aug 2025 18:40:52 GMT

Hi @Mork and @TomM2 -- I was able to hear back from the Products team on this one.

To answer your question:

The New forms customization will not work in the same way specified in the Developer Doc here for old forms.

For documentation on the new form customization you can refer to the Doc here:
https://developers.hubspot.com/docs/reference/cms/forms/forms

Let me know if you have any other questions!

Cassie, Community Manager