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
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:
<script src=“https://js.hsforms.net/forms/embed/PORTALID.js” defer></script>
<div class=“hs-form-frame” data-region=“na1” data-form-id=“FORMID” data-portal-id=“PORTALID”></div>
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.
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
HubSpot forms - HubSpot docs
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>
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? HubSpot forms - HubSpot docs
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
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
HubSpot forms - HubSpot docs
Set up and style a legacy form on an external site
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>
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?
Still getting the same error, after configuring the HTTP security headers unfortunately.
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:
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