[How To] Add A Multi-Step Form 2.0



@Caroline This is pretty awesome. I’m trying it out with a sandbox form to get a feel for the script etc.

I noticed in the code you have line 14 lp.jQuery('#progress-bar').hide(); when I changed it to show I got 3 numbers. Is there some styling that I’m missing or is this not the kind of progress bar I am thinking about?

I’m going to try and apply some inline validation and error handling to the form… wish me luck!



Hi @Joe_Savitch!

One of my coworkers added that on and used it for one of our clients. I have never personally used it. I can look into it more when I get a chance! :face_with_monocle:


@Noah First I have to say that this form code is amazing and I use it all the time. However, I have recently run into an issue.

Is there any way to hide the form overflow? My current landing page is only one short section and my form is quite a few questions. This creates an enormous white footer below my content section to accommodate the rest of the hidden form questions. So again, is there any way to hide the form overflow so this doesn’t happen? Any help solving this issue would be greatly appreciated.

Thank You


Never mind, I solved the problem. If anyone else is curious to the solution just set a height/max height to the form fields container element. This contained the form within my content area and had no negative effects on its function.


Amazing work with the script @Caroline. I have a question though, is there a way to separate the next button and the submit button in a sense that I want to increase the width and move one of them but not affect the other one?


Hi, @Mysticadder!

Thank you! If you need to style the buttons individually, you can do so in the CSS. Below are the two button elements that you can edit to your liking:

.multistep .lp-pom-button{
  		position: relative !important;
  		top: 0 !important;
  		width: 60% !important;
  		display: inline-block !important;
  		float: right;
      	letter-spacing: 2px !important;
      	font-weight: 700 !important;
    	text-transform: uppercase !important;

.multistep .lp-pom-button.back-button{
 		margin-right: 0;
  		float: left;
  		opacity: 0.7 !important;
  		background-color: #f1f1f1 !important;
      	color: #636363 !important;
  		width: 35% !important;
  		letter-spacing: 2px !important;
      	font-weight: 700 !important;
    	text-transform: uppercase !important;

Hope that helps!


Hi, @Caroline

Sorry I wasn’t clear enough with the question. I have removed the back button from the script since I don’t need it for what I am currently working on. The 2 buttons I want to make changes to are the next button and then the submit form button.

You can see the form here http://unbouncepages.com/king-remodeling-front-door/

So basically when I click the “Next Step” button and get to the second part of the form I want to change the width and position of the “Request a Quote” button to better fit the form since currently it just doesn’t work good.

If you know a quick fix for this I would really appreciate it. Thanks for your time.


@Eliot_Sell, can you point to where I would change the max height? I think it’s in the below section somewhere.

// Replicate Unbounce’s field spacing
var height = parseInt( this.fields.eq(0).css(‘height’), 10);
var top = parseInt( this.fields.eq(1).css(‘top’), 10);
this.fields.css(‘margin-bottom’, (top - height) + ‘px’);
this.progressBar.css(‘margin-bottom’, (top - height) + ‘px’);



You can add it in the CSS. Just pick an appropriate height.



I’m having an issue where it will not let me select radio buttons when it’s live.


Haven’t heard of that one before @ian-idplans - Feel free to message me for more assistance.


Hello @Noah
I have downloaded your lastest version of the script and i am still getting stuck at the drop down menu.
Can you please help? What am i doing wrong? Thanks!


Is it possible to mix and match checkboxes, text-fields and drop-down menus with this code? Because I’m trying to do just that, and I can’t get it to work.