# Onsubmit function in multistep beta forms

**URL:** <https://community.hubspot.com/t/onsubmit-function-in-multistep-beta-forms/115367>\
**Category:** Lead Capture Tools\
**Tags:** forms\
**Created:** [August 28, 2024, 11:17am UTC](https://community.hubspot.com/t/onsubmit-function-in-multistep-beta-forms/115367 "2024-08-28T11:17:39Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mart999](https://avatars.discourse-cdn.com/v4/letter/m/9f8e36/32.png) [@Mart999](https://community.hubspot.com/u/Mart999)\
**Post date:** [August 28, 2024, 11:17am UTC](https://community.hubspot.com/t/onsubmit-function-in-multistep-beta-forms/115367/1 "2024-08-28T11:17:39Z")

</div>

The new multistep form has a different embed code. I can’t find documentation on how to add an onsubmit function to this new code.

Here is how the current embed code looks.

```lia-code-sample
<script src="https://js.hsforms.net/forms/embed/12345678.js" defer></script>
<div class="hs-form-frame" data-region="na1" data-form-id="5da9sdj76-47f8-412d-a98a-659874fv12" data-portal-id="12345678"></div>

```

I have also tried using event listeners but there is no event fired after I click submit on the form. Does anyone know how to add an onsubmit function to these new forms? Thanks!

---

<div class="post-metadata">

**Author:** ![Eric\_Hoyer](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/eric_hoyer/32/105704_2.png) [@Eric\_Hoyer](https://community.hubspot.com/u/Eric_Hoyer)\
**Post date:** [August 28, 2024, 1:11pm UTC](https://community.hubspot.com/t/onsubmit-function-in-multistep-beta-forms/115367/2 "2024-08-28T13:11:05Z")

</div>

Its been a little bit since i have done this, but I am pretty sure i did something like this. I used to GPT to quickly jot out what I did before. However recently I was trying to dynamically populate a form with a similar approach and couldnt get it to work, but I didnt try for a long time

### 1. **Ensure the Form is Loaded:**

- Since the form loads asynchronously via the embed script, you should wait until the form is fully loaded before attaching any event listeners. You can achieve this using the hsFormCallback event or by setting an interval to check when the form is available.

### 2. **Attach an Event Listener Dynamically:**

- Once the form is loaded, attach an onsubmit event listener to the form. This can be done using JavaScript.

```lia-code-sample
<script src="https://js.hsforms.net/forms/embed/12345678.js" defer></script>
<div class="hs-form-frame" data-region="na1" data-form-id="5da9sdj76-47f8-412d-a98a-659874fv12" data-portal-id="12345678"></div>

<script>
// Function to handle form submission
function onHubSpotFormSubmit(event) {
 event.preventDefault(); // Prevent the default form submission if needed
 console.log("Form submitted!");
 // Add your custom code here
}

// Check if the form is loaded and then add the event listener
function attachHubSpotFormSubmitListener() {
 var formElement = document.querySelector('.hs-form-frame form');
 if (formElement) {
 formElement.addEventListener('submit', onHubSpotFormSubmit);
 } else {
 // Retry after a short delay if the form is not yet loaded
 setTimeout(attachHubSpotFormSubmitListener, 100);
 }
}

// Ensure the script runs after the page is fully loaded
document.addEventListener('DOMContentLoaded', function() {
 attachHubSpotFormSubmitListener();
});
</script>
​

```

---

<div class="post-metadata">

**Author:** ![Mart999](https://avatars.discourse-cdn.com/v4/letter/m/9f8e36/32.png) [@Mart999](https://community.hubspot.com/u/Mart999)\
**Post date:** [August 29, 2024, 1:09pm UTC](https://community.hubspot.com/t/onsubmit-function-in-multistep-beta-forms/115367/3 "2024-08-29T13:09:54Z")

</div>

The onsubmit function is still not firing. It doesn’t fire even when I log all events on the page.

---

<div class="post-metadata">

**Author:** ![amcintosh](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/amcintosh/32/32338_2.png) [@amcintosh](https://community.hubspot.com/u/amcintosh)\
**Post date:** [January 8, 2026, 3:00am UTC](https://community.hubspot.com/t/onsubmit-function-in-multistep-beta-forms/115367/4 "2026-01-08T03:00:22Z")

</div>

Boo, no upvotes for an untested GPT solution!

HS added the ability to load the form as html (wrapped in ‘.hs-form-html’ vs in an iframe (wrapped in ‘.hs-form-frame’) [Style and embed HubSpot forms on an external site](https://knowledge.hubspot.com/forms/set-up-and-style-your-form-on-an-external-site) - if you check the “developer code” box, it’ll reveal this bit of code that you can use to load the HTML version of your form. Annoyingly, this box does not stay checked.

 ![amcintosh_0-1767840525052.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/d/2/d2df0ae19679efc19e25c0397f04dff07e788d26.png)

Then, you can add an event listener using the global form event listeners - [Global form events - HubSpot docs](https://developers.hubspot.com/docs/api-reference/global-form-events/guide)  
window.addEventListener(‘hs-form-event:on-submission:success’, (event) =\> {  
// Do whatever you need to do  
})  
Didn’t need to have this overwrite the default form on submit behavior, but I’m sure it’s possible to do if you need to.

---

<div class="post-metadata">

**Author:** ![squatchcreative](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/squatchcreative/32/42150_2.png) [@squatchcreative](https://community.hubspot.com/u/squatchcreative)\
**Post date:** [January 16, 2026, 6:35pm UTC](https://community.hubspot.com/t/onsubmit-function-in-multistep-beta-forms/115367/5 "2026-01-16T18:35:49Z")

</div>

This **100%** should be the only accepted solution. No polling, no mutation observers. The docs have official support for event listeners in the V4 method of form embeds.