Onsubmit function in multistep beta forms

[Mart999]

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.

<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!

[Eric_Hoyer · Accepted solution]

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.

<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>
​

[Mart999]

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