As you may already know, HubSpot only allows for single-step forms. They don’t have a built-in function to create multi-step forms. They do advertise a workaround, which is creating two landing pages, each containing a form with a set of fields, where the first page, when submitted, is redirected to the second page using the Redirect to Another Page option.
This solution is not very elegant, for the following reasons: 1) if you want to embed the form on one of your pages, you will need to use an iframe, which is always a horrible option and 2) no real connection is done between the forms (for example, it might be that some of the fields on the second form are connected to the first form).
At itoctopus, we developed a much more cleaner solution, mainly using jquery. Here’s what we did:
- We embedded 2 HubSpot forms on the same page.
-
We hid the second form using the display:none CSS styling.
-
Using the onFormSubmit event of the first form, we got the value of the fields that were filled in the first form, and passed the relevant values to the second form.
-
Using the onFormSubmitted event of the first form, we hid the first form and we showed the second form using the display:block styling.
Of course, this took us some time to figure out and ensure that the solution is solid, but the end result was just loved by the client, as it was really smooth!
As you can see from this post, we really are experts in HubSpot development and can help you achieve the results that you want. If you have a complex task in HubSpot that you think it can’t be done, then we probably can do it, so go ahead, contact us. Note that our affordable fees apply!