[How To] Add A Multi-Step Form 2.0



@Noah wonderful code, it is a beaut and filling a huge gap Unbounce has.

But sadly I had to remove it from my landing pages with more than 3 field forms. I realized I’m missing a good portion of the abandoned data. I’ll implement back on if I manage to find a practical way to access this data.


Hey @nik_adiko good news, a new post is up for inline error messages: [How to] Add Inline Form Error Messages. Take a look and let me know what you think!


Will this work on a convertables? I added it to the exit overlay but the script doesn’t seem to be working. http://lowercholesterolnaturally.futureceuticalsdirect.com/remove-more-cholesterol-sse/


@jsuppes I haven’t seen any issues so far. It looks you may just need to change the placement of your script to ‘Before Body End Tag’


Thanks Noah, that did the trick!


@Noah Noah! Just got this script implemented on a page and it’s working wonderfully, great code.

I have a quick question, though. Is the information submitted step by step as well or only carried through after the form has been submitted?

For example, if they fill out their Email and Name, then back out at the phone number phase, does the email and name carry through so that they can still be contacted, or is no information whatsoever passed until the submit button? If it doesn’t do this naturally, is there an extra snip of code that would? If I am misunderstanding something here, please feel free to enlighten!


@aclayton did you ever figure this out? I read through this thread and don’t think I saw a response. @Noah any help on this? An alternative to a progress bar is maybe to change the button for each step so that we can customize the copy on it? Just a thought for a workaround if progress bar isn’t possible…


Hello, is there anyway to record what people have started filling in, even if they dropped before the end of form ?


Hi @Etienne,

There is no way for you to access the data from an unfinished form.



hello. Trying to implement this -> can’t get past the first ‘next’ button.


Any help greatly appreciated :slight_smile:


it looks like the script didn’t play nicely with hidden form labels :neutral_face: The latest version here should fix this: https://gist.github.com/noahub/b8c6d63abb50048d42ee721c900450df


Awesome, thanks a lot!


Good news! I’ve added a built-in progress bar for the multistep form 2.0!

Get the latest version of the Javascript AND CSS here: https://gist.github.com/noahub/b8c6d63abb50048d42ee721c900450df

All you need to do is change the var showProgressBar to true. Give it a try and let me know what you think!

See it in action here: http://landingpage.noahmatsell.ca/multistep-form/

@aclayton @Andy2 I know you two were interested in this :slight_smile:


Amazing!! Thanks very much @Noah!! Can’t wait to give this a try.


@Noah, Thank you so much for implementing this. I can confirm that it works
and the bar changes color to darker green as we get closer to the finish

Now only if we had the option of displaying multiple fields at once. That
would be a dream come true!



@Samir And capability to use field types other than single line text!


I have other field types such as larger fields and drop down and all works fine. @Andy2


Hmmm, @Noah any thoughts on this? I was working with Kathryn from support on this, she said that you told her only single text lines could work with this script.

(Also, I’m going to get greedy now… any way to change placement of progress bar?? For example, how high it shows above form? Or maybe place it below form?)


Thanks Noah, this is great! Looking forward to trying this :slight_smile:


hey @Andy2, what do you mean by single text line? Are you having issues with a multiline textarea field?

And to change the placement of the progress bar, try adjusting the CSS styling for #container (the margin-top value).