Issues with Embedding New HubSpot Forms - Need Updated Guidance

[AKeselj]

Hi HubSpot Developers,

I’m facing issues embedding a new HubSpot form on my website. The form works perfectly when tested directly in HubSpot, but fails to function as expected when embedded.

Here are the issues:

1. Phone field functionality: Country search and IP-based dial code detection are not working.
2. hbspt not defined error: I’m getting Uncaught ReferenceError: hbspt is not defined when using the embed code with hbspt.forms.create().

   I previously used the Legacy Editor form with the following code, and everything worked flawlessly:

   <script charset="utf-8" type="text/javascript" src="js.hsforms.net/forms/embed/v2.js"></script> <script> hbspt.forms.create({ region: "na1", portalId: "2203955", formId: "61a67fb0-d390-4b10-913f-974151878ce5", onFormReady: function ($form) { console.log("Form loaded"); }, }); </script>

   However, after switching to the New Editor Form, the new form embed code is as follows:

   <script src="https://js.hsforms.net/forms/embed/2203955.js" defer></script> <div class="hs-form-frame" data-regio...

   And when I switch IDs to the code as in the Legacy form, the form doesn’t load, and functionalities like phone field behavior are broken.

   Questions:

   1. Is there a new approach for handling embedded forms created in the New Editor?
   2. Are there additional scripts or settings needed to enable functionalities like IP-based country detection and search for the phone field?
   3. How can I resolve the hbspt undefined issue with the new embed code?
      
      Looking forward to your response!

[HMir]

---

@AKeselj wrote:

Hi HubSpot Developers,

I’m facing issues embedding a new HubSpot form on my website. The form works perfectly when tested directly in HubSpot, but fails to function as expected when embedded.

Here are the issues:

1. Phone field functionality: Country search and IP-based dial code detection are not working.
2. hbspt not defined error: I’m getting Uncaught ReferenceError: hbspt is not defined when using the embed code with hbspt.forms.create().

   I previously used the Legacy Editor form with the following code, and everything worked flawlessly:

   <script charset="utf-8" type="text/javascript" src="js.hsforms.net/forms/embed/v2.js"></script> <script> hbspt.forms.create({ region: "na1", portalId: "2203955", formId: "61a67fb0-d390-4b10-913f-974151878ce5", onFormReady: function ($form) { console.log("Form loaded"); }, }); </script>

   However, after switching to the New Editor Form, the new form embed code is as follows:

   <script src="https://js.hsforms.net/forms/embed/2203955.js" defer></script> <div class="hs-form-frame" data-regio...

   And when I switch IDs to the code as in the Legacy form, the form doesn’t load, and functionalities like phone field behavior are broken.

   Questions:

   1. Is there a new approach for handling embedded forms created in the New Editor?
   2. Are there additional scripts or settings needed to enable functionalities like IP-based country detection and search for the phone field?
   3. How can I resolve the hbspt undefined issue with the new embed code?
      
      Looking forward to your response!

---

Use the exact embed code provided by the New Editor without mixing it with the Legacy Editor’s method. Ensure the script is added before the form container, like this:
<script src="https://js.hsforms.net/forms/embed/2203955.js" defer></script>
<div class="hs-form-frame" data-form-id="61a67fb0-d390-4b10-913f-974151878ce5"></div>


This method resolves the hbspt not defined error because the New Editor does not rely on hbspt.forms.create(). If the phone field's IP-based country detection still doesn't work, check for script blockers, CSP restrictions, or missing settings in your HubSpot account for enabling such features. Always test in an environment where external scripts can load freely.

[AKeselj]

Hi HMir,

Thank you for your response!

Yes, the form does work when I simply embed the code as provided. However, the issue arises when I need to include additional custom code, such as handling events like onFormSubmit and similar functionalities.

Previously, with the Legacy forms, I was able to successfully implement custom code and handle such events by following the documentation here: HubSpot Forms Embed Code Guide. The documentation provided clear instructions, which allowed me to achieve everything I needed.

Now, I’m wondering how I can achieve the same level of customization with the New Editor forms. Is there any updated documentation or guidance on how to add custom code to these forms, similar to what was possible with the Legacy forms?

Your help and any additional resources you can provide would be greatly appreciated!

Thank you in advance, and I’m looking forward to your response.

[HMir · Accepted solution]

---

@AKeselj wrote:

Hi HMir,

Thank you for your response!

Yes, the form does work when I simply embed the code as provided. However, the issue arises when I need to include additional custom code, such as handling events like onFormSubmit and similar functionalities.

Previously, with the Legacy forms, I was able to successfully implement custom code and handle such events by following the documentation here: HubSpot Forms Embed Code Guide. The documentation provided clear instructions, which allowed me to achieve everything I needed.

Now, I’m wondering how I can achieve the same level of customization with the New Editor forms. Is there any updated documentation or guidance on how to add custom code to these forms, similar to what was possible with the Legacy forms?

Your help and any additional resources you can provide would be greatly appreciated!

Thank you in advance, and I’m looking forward to your response.

---

Currently, HubSpot's new form editor does not support the customization options available in the legacy form editor, such as handling events like onFormSubmit. To implement custom code and event handling, it is recommended to continue using the legacy form editor. HubSpot plans to introduce similar developer features for the new form editor in future updates.
https://community.hubspot.com/t5/Developer-Announcements/New-beta-form-editor-and-developer-function...

For detailed guidance on customizing forms using the legacy editor, you can refer to HubSpot's API Reference Overview.
https://legacydocs.hubspot.com/docs/methods/forms/advanced_form_options?

[AKeselj]

Hi @HMir Thank you for the response! I will continue using the Legacy Editor until similar developer features are available for the New Form Editor.

Do you have an estimated timeline for when these features will be available in the New Form Editor? Also, the link you provided doesn’t seem to work—could you share another link where I can track updates related to this?

[kennedyp]

Try this link instead! https://community.hubspot.com/t5/Developer-Announcements/New-beta-form-editor-and-developer-function...

[DTadmori]

Have these advanced form (back end) features been implemented. I recently tested some of my code that works in Legacy forms, and I don't see it working.  Is there an estimate on when these features would be released?

[kennedyp]

@DTadmori I recommend a new post with your specific use case and code if you are still having issues!