[How To] Add A Multi-Step Form 2.0

Hello everyone,

I have dug and dug through this community trying to find a simple solution for a multi-step form that we could implement across multiple client pages. There are some good options, but I kept finding them to be a fit for one specific situation and not very flexible.

So my team and I spent about 15 working hours simplifying the code originally published in v1 of this thread and testing it to make sure it is workable across both pages and popups and fully allows the editing functions that we all love in Unbounce.

I don’t know if I’m allowed to post the blog article here or not, so I’m going to try, no subscription wall or bs, just simple steps to implement. I really hope this helps everyone. (It’s like a 2 minute read.)

How to build a multi-step form in Unbounce, instructions, downloadable docs and Q&A

3 Likes

Hello @ScienceInAdvertising !

Thanks for the time taken to do this !
I’ve been using the Multistep form 2.0 since it appears and then i have switched to Jotform.
Multi step was a game changer in performance for us.
A shame it’s not working with AMP pages.

About your Script, is it different from this one ? Multi-Field, Multi-Step Form 🔥

Hi team,I have created my own code for unbounce multistep form.I have implemented it on 500+ pages.It is very flexible for both mobile and desktop.You can contact me personally through email.Thanks

With this multi-step form is Unbounce (or whatever data repository you have integrated it with) collecting the data from the initial steps if the prospect/ visitor doesn’t complete the last step.

It is not possible in unbounce because we can’t write our own logics for saving leads in unbounce leads database but we can give an option to user to submit form at any step.It may help you I think.Thanks

Have you or anyone else tried to submit steps that were completed to a different source? e.g. post to external data source so when users drop off you have an opportunity to re-market/re-contact assuming contact info is on the initial step? I don’t think getting the user to submit is viable unless its something like save and come back but that comes with a different set of complication with Unbounce.

Yes we can pre fill unbounce form box if we are already filled some value on other source.We don’t need to ask to user again to fill the value twice.I have done this before with many clients.Thanks

How about capturing the data though? There is nothing to pre-fill if you cannot capture. e.g. user fills out step one which includes email and name and goes to step two and leaves the form.

I realize you cannot get step one data to unbounce but has anyone figured out how to post data to some other source so you can send the user an email (now that you have their email address) with a link to the form where email and name is prefilled.

The key is data capture.

Thanks in advance.

yes, but we can save previous step data by using cookies. whenever a user will go to another source, we can get the cookies data…

Hey @Nick_Abramovich,

The key is actually consent. You might get into trouble if you start using data the user hasn’t actually submitted. So be careful.

To answer you question, you have to do an AJAX POST to where you want the data to go.

Best,
Hristian

yes .Ajax is the other way to send data to other source.

thanks for doing this, i found one problem installing it. When I downloaded the zip the JS files are not on Notes so it´s not easy to copy paste them if you dont have a JS reader as I do.

would you send the content of those JS files to try your solutions?

thanks!

https://community.unbounce.com/t/multi-field-multi-step-form/13718

http://unbouncepages.com/multipul-from-testing/

Hello, Noah. Can you help me ? Why the nest button dose not working? Thank you