topic V4 Multistep form with custom JavaScript for redirects in Tips, Tricks & Best Practices

V4 Multistep form with custom JavaScript for redirects

YVasilev — Tue, 16 Sep 2025 07:51:41 GMT

Hello team.

I hope someone can help with this pickle situation.
TL;DR; How can we use custom JavaScript with the V4 form setup?

We used legacy forms where we would get some of the values onFormSubmit and pass them in custom JavaScript for redirecting to a custom link. This looked along the lines of this:

Now we had to implement a multistep form, which can work only with V4. I haven't been able to find any documentation on how to do custom JavaScript on V4. I've written support, where a bot had suggested using a global event listener for "message" (didn't work). I've tried changing the order of the custom code, using setTimeout - all to no result. I've literally spent 2 days now on this without any breakthrough, so any help would be greatly appreciated.

Re: V4 Multistep form with custom JavaScript for redirects

PSafdar — Tue, 16 Sep 2025 10:16:17 GMT

V4 forms don’t support onFormSubmit callbacks directly. You’ll need to use a global message event listener (window.addEventListener("message", ...)) and check for type: "hsFormCallback", eventName: "onFormSubmitted". From there you can grab values via the form fields and handle your redirect logic.

Re: V4 Multistep form with custom JavaScript for redirects

YVasilev — Tue, 16 Sep 2025 14:19:13 GMT

Thank you for the suggestion PSafdar. This is what I also have been trying to do and have been going in a circle with the Support bot without result. I've tried to simplify it to the bare minimum of running a console.log, yet it seems the event "message" event is ran only once upon loading the page, or upon switching the tab, but never upon submitting the multistep form.

Here is my code and a screenshot of the logs I get:

I've clicked through all the settings of the form in HS and don't see anything that could potentially hold the key, but this global eventListener really hasn't helped me no matter how many variations of it I've tried so far 😕

Re: V4 Multistep form with custom JavaScript for redirects

Jaycee_Lewis — Thu, 18 Sep 2025 19:57:03 GMT

Hey, @YVasilev 👋 Thanks for putting in the work and sharing your examples. I'd like to invite some of our Community Champions to the converstaion — hey @Anton @evaldas do you have any wisdom or troubleshooting steps you can share with @YVasilev?

Thank you very much! — Jaycee

Re: V4 Multistep form with custom JavaScript for redirects

YVasilev — Thu, 18 Sep 2025 20:25:05 GMT

Thanks, @Jaycee_Lewis . I did a bit more thorough research and stumbled on a duplicate that's been solved by @Eric_Hoyer here https://community.hubspot.com/t5/Lead-Capture-Tools/Onsubmit-function-in-multistep-beta-forms/m-p/1033290#M11915 His solution worked like a charm. I am refining it a bit with Cursor and will make sure to share code with example properties and redirects tomorrow some time (:

Re: V4 Multistep form with custom JavaScript for redirects

Jaycee_Lewis — Thu, 18 Sep 2025 20:43:05 GMT

Hey, @YVasilev 👋 That's amazing! I'm going to accept your reply as a solution, and I'll do the same when you share your updated example(s). Cheers! — Jaycee

Re: V4 Multistep form with custom JavaScript for redirects

YVasilev — Wed, 24 Sep 2025 12:23:58 GMT

Here is how to add custom JavaScript to multistep V4 HubSpot forms:

1. Make sure you copy the "Developer code (Advanced)" embed code. This loads a different script, besides pointing to `hs-form-html` and not `hs-form-frame`

2. Use a combination of JS methods (attachHubSpotFormSubmitListener(), onHubSpotFormSubmit(event)) and a DOMContentLoaded eventListener.

Here is an example code for catching properties upon submission and then passing them on as URL redirect parameters. I've added a bit of variety by selecting a dropdown, checkbox, and text field properties and having some conditional logic.

It took me 4 days to get to this solution, due to looking at the wrong place for help. Hope this code helps anyone who might need a similar setup. Once again, big thanks to @Eric_Hoyer

Re: V4 Multistep form with custom JavaScript for redirects

Eric_Hoyer — Wed, 24 Sep 2025 13:59:40 GMT

thank @YVasilev, that genuinely makes my day if that helped you. Thank you for paying it forward with your own additions! ❤️

Re: V4 Multistep form with custom JavaScript for redirects

squatchcreative — Fri, 16 Jan 2026 18:42:59 GMT

The docs have global event listeners for the V4 forms here - Global form events - HubSpot docs

Just make sure you are embedding the form using the developer version:

Set up your event listeners like this:

Form Ready:

window.addEventListener("hs-form-event:on-ready", event => { const { formId, instanceId } = event.detail; console.log(formId); });

Form Submit Success:

window.addEventListener("hs-form-event:on-submission:success", event => { const form = HubSpotFormsV4.getFormFromEvent(event); const conversionId = form.getConversionId(); console.log(conversionId); //DO YOUR LOGIC HERE });

Tremendous shoutout to @amcintosh for providing the references and appropriately crapping on GPT on this other forum - Solved: HubSpot Community - Onsubmit function in multistep beta forms - HubSpot Community