[How To] Add A Multi-Step Form 2.0

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).

@Noah I had tried to use a drop-down as one of my steps, and it wasn’t working. Kathryn from support told me that this was a known limitation of this current code, that only single text lines could work. But maybe I misunderstood??

And thanks for tip for placement of progress bar, that worked a treat!

Thanks @Noah. Is there any way we can add 2-3 fields in the first “step”, and THEN go to the next set instead of doing it one by one?


@Noah is it possible to disable the script for multistep form on desktop, and only show on mobile? Or, use two different scripts for desktop and mobile?

Hi @Andy2,

You may have some luck wrapping this code in a conditional statement based on window size:

  if ( lp.jQuery(window).width() <= 600 ) {
    // Your mobile code goes here
    // Your desktop code goes here

Hope this helps point you in the right direction!

Thanks @Noah! I’m testing out now, seems promising. At least one issue I’m encountering with this solution is that validation no longer seems to work.

@Noah I’ve tested this out here: http://unbouncepages.com/multistep-mobile-only/

On desktop, the validation works, but error messages aren’t appearing. On mobile, validation and error messages seem to be working fine.

Any thoughts on how to get error messages to appear on desktop? Thanks!

Hey Andy, you’ll likely have to write a media query that only applies the following CSS to a max-width of 600px:

Here’s a guide on media queries if you need any help: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

I hope that does the trick!