[How To] Add A Multi-Step Form 2.0



@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!


Thanks very much, that did the trick!!

(P.S. Wondering if anyone else is seeing varying results with the multistep form on desktop vs mobile? We’ve found that it helps on mobile but hurts on desktop.)


Hi All,

I love, love, love this form. This is exactly what we have been after, the multiple page approach has been painful on mobile due to having to load pages but i’m sure this will fix that.

Apologies if this has already been mentioned but i’m struggling to figure out how to put multiple fields in each stage. i.e. First Name and Last Name in the same stage rather than one after the other. Any guidance?

Also, is it possible to make the first button stretch the length of the form?



@Noah is there any possible way to combine your awesome script with your other script, the Form Glow Script? They are both awesome, and I’d love to use them simultaneously.

On another note, I saw @Samir talk about drop-down menu’s. I haven’t been able to fix this for myself yet, the drop-downs won’t allow me to continue filling in the multi-step form. Is there a solution for this yet?

Kind regards,



Isn’t the first button all by your own design? You can make it as long as you’d like, or am I seeing this wrong?


It seems like previous code was a bit more simple with being able to decide which fields go into each section as below.

function multistepForm() { **var pages = {** ** 1: '#container_type',** ** 2: '#container_first_name, #container_last_name',** ** 3: '#container_email_address, #container_phone_home'** }; var headers = { 1: '#lp-pom-text-1095, #lp-pom-text-1100', 2: '#lp-pom-text-1096, #lp-pom-text-1098', 3: '#lp-pom-text-1097, #lp-pom-text-1099' I cant seem to find the equivalent in the new code.


Hi community-members,
I am running into the following problem: I want to integrate the multistep-form into a convertable. This works perfectly fine for desktop. However, for mobile I got a very cluttered view on Chrome browser and no view at all on Safari.

Has anybody an idea to solve this?

The biggest part of our traffic is mobile.

Best regards,
Nicol from OneFit


For the Safari issue I think this may have been related to the use of an arrow function, which is not fully supported by all browsers. I’ve replaced this with a regular function and it appears to have resolved the issue I was seeing in my testing. Give the latest script a try and let me know how it goes: https://gist.github.com/noahub/b8c6d63abb50048d42ee721c900450df3


Hey Nicole!

Could you share a link/screenshot?

Cheers :slight_smile:


Hi Noah,

I’m having an issue with the pages that have this script on them opening straight to the form rather than the top of the page. I can work around it by adding the ID of the top most section to the URL, but I was wondering if you knew why this was happening? I can send you a link to one of the pages this happens on if you want.




Hey @aclayton this should address the issue you’re having:


Thanks Noah, should’ve read the comments first!


Awesome. Thanks so much for this service!!


@Noah I’m trying to get this script to perform with a couple of drop-down fields in the form but it doesn’t seem to work… any ideas?