topic Re: Onsubmit function in multistep beta forms in Lead Capture Tools

Onsubmit function in multistep beta forms

Mart999 — Wed, 28 Aug 2024 11:17:39 GMT

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.

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!

Re: Onsubmit function in multistep beta forms

Eric_Hoyer — Wed, 28 Aug 2024 13:11:05 GMT

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.

Re: Onsubmit function in multistep beta forms

Mart999 — Thu, 29 Aug 2024 13:09:54 GMT

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

Re: Onsubmit function in multistep beta forms

amcintosh — Thu, 08 Jan 2026 03:00:22 GMT

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') 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.

Then, you can add an event listener using the global form event listeners - 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.

Re: Onsubmit function in multistep beta forms

squatchcreative — Fri, 16 Jan 2026 18:35:49 GMT

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.