[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?


#136

Firstly, I’d like to say that this form is amazing. My conversion rates have been incredible using it over the last couple of months.

I’ve just noticed something weird though and I think (think!) it’s recent developement - I’m thinking maybe it’s do do with browser updates (or something…I’m not sure!). I don’t think this happened before but I’m not sure.

Basically, when using a mobile if someone tries to skip a question but it’s a required field, the error message appears above saying ‘[X] is required’ and highlights the form field they need to fill out.

If I open the page on my mobile, this works as it should on 9 steps of my form, but on the 10th (which is an opt in privacy policy checkbox), if I click the form confirmation button and I haven’t ticked the checkbox above, the error message doesn’t appear. It also looks like nothing is happening (i.e. no button has been pressed, the radio button isn’t shaded etc).

However, if I open the page on a desktop, when I click the form confirmation button the error message does appear as it should.

The error dialogue shows also shows if I open the page on my desktop and resize the screen smaller so that it shows the mobile version of the page. The error dialogue also shows in the mobile preview in Unbounce.

It just seems as if it specifically doesn’t show work on this one step when using a mobile - as 90% of my conversions come through via mobile/tablet this might be a problem!

P.S. If you click the checkbox and click the form confirmation, it works as normal. I get the lead and it all looks normal to the user. If they try and skip this step the form will seem broken.

Would someone take a look - I’m guessing it’s some kind of CSS issue but I have no coding skills whatsoever!

http://unbouncepages.com/opt-in-problem-1/

This is the page I’m playing with so feel free to fill out the form with junk if you like.

Any help would be greatly appreciated!


#137

I’ve come up with a ‘solution’ if this happens to others and you find yourself here.

It’s something to do with the last step of your form and the form button. I’m not sure why or what it is, but tapping that form confirmation button doesn’t cause the final validation error to appear.

What I’ve done is I’ve created one more form field (a checkbox), hidden the field and just put a fullstop as the option to make it as small as possible and unchecked the option to make it required.

I’ve then put the form confirmation button over that last field.

It’s not ideal because you can kind of see it as the form button appears but it pretty much works. It does add an extra step to the counter though:

http://unbouncepages.com/opt-in-problem-2/


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