[How To] Add A Multi-Step Form 2.0

forms

#121

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

Joe


#122

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:


#123

@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


#124

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.


#125

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?


#126

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!


#127

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.


#128

@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’);


#129

@Marissa_Rustici

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

16%20AM


#131

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


#132

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


#133

Hello @Noah
I have downloaded your lastest version of the script and i am still getting stuck at the drop down menu.
http://audibel.it/campaign/batterie-gratis/
Can you please help? What am i doing wrong? Thanks!


#134

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.


#135

Right now the script won’t allow the business email only script at the same time. I have to remove the business script and uncheck “validate as an email address”

It will give this error: https://pasteboard.co/HA4JEpL.png

Any work around for this?


#138

hello,

someone could please share me a template, i have some pb to create a form with several steps
thx


#139

Awesome! Is there by any chance a way to automatically jump to next question without clicking “next” button? sthing like this: https://audimagnet.com/comparador/?v=1&adsid=_19630420300699590 That’d be an extra-awe


#140

Hi All Community Members,
I see that has been an issue for many people using unbounce here. Each and every requirement is different here so we can’t probably jump to a fixed conclusion for now.

I have found a way to alter the script and show as many fields you need in any number of steps.

So if you need any help with the form: you can reach out to me through my email: reckless.sam@gmail.com

with subject: Unbounce Community - Multi Step Form Help

I will get back to you within shortest time possible and update your scripts at a genuine price.

If ii find a solution that could be used for all then i will post it here for all the members surely.

Looking forward to help you out with the forms! :slight_smile:

Thanks!


#141

Hi,

Thanks for this how-to. I implemented it, but stumbled upon a mistake: when testing the ‘Back’ button, the form is submitted, which of course shouldn’t be the case. Anyone else experiencing this problem? Is there a solution for this?

Regards,

Matteo


#142

Have you made sure the back button & the form button are away from each other or are not layered on top of each other?

I would try dragging your back button well away from the form submit button and trying that to see if the problem persists.


#143

Hi,

In the guide I found, nothing was said about creating a back button. This appears to be automatically generated. Can I get you some script screenshots to make this easier?

Regards,