Hello Fellow HubSpoters I have a page Online MBA Programs that has a custom coded form from hubspot that was made into a multi-step form with some custom code. It was working for a number of years and now it seems to have stopped loading correctly. I have tried looking at the code and making changes but I have hit a road block. The issue is the form loads without the multi-step and is affecting load times. And help would be appreciated. You can tell it hasn’t loaded correctly when the backgoruand image is of just 1 student instead of two.
Hello @JRivera-Salva
I’ve noticed that the form sometimes loads correctly and sometimes not. How do you load the custom code for creating the steps? I suspect the problem is that HubSpot Forms are being loaded with JavaScript, and sometimes the form isn’t fully loaded on your page when your custom function runs.
To address this, ensure that the form is fully loaded on your page before running your custom code to create the steps.
You can achieve this using the HubSpot form custom events: HubSpot Global Form Events.
In your case you need the onFormReady event. You should wrap your custom code with this If statement:
window.addEventListener('message', event => {
if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady) {
// YOUR CUSTOM CODE FOR CREATING STEPS
}
});
You could also implement some kind of placeholder or loading spinner to avoid massive page shifting while loading and creating the multistep form.
Hope this helps.
Regards,
Gracjan