[How To] Add A Multi-Step Form 2.0

forms

#21

Noah,

Thank you for your help. I did delete the lines as mentioned and showed on your screencast. Still not working. When I load it shows first the form. Could you please help me?. Thanks Noah.

Max


#22

I just visited http://ar-vida.primerolafamilia.com.ar/seguro_vida1/ and it looks like it’s no longer focusing on load. If you’re still seeing the focus on load you may need to clear your cache to see the most recent version of your page.


#23

Noah,

Thank you very much!. Now it’s working. Thanks for everything.

Max


#24

Quick Update:

The latest version of this script (find it here) now automatically enables inline validation! Here’s an example:

Enjoy :kissing_heart:


#25

Hi Noah,

Thanks for this script, it’s great! We’ve just used it on a page and it’s converting well. I was just wondering if you had any idea of how we could add a progress bar to the form - a few people in the office think visitors might be put off by not knowing how far along they are and abandon the form halfway through if they feel it’s taking too long.

Thanks!
Alice


#26

Hey for some reason this doesn’t work for me. I followed the steps and changed the previous/next button IDs but it just shows all 3 of them at once, along with the entire form.


#27

Nevermind, it works. I was putting it after body tag. It should be included inside the body tag.


#28

Any way to make it so that sometimes it shows a cluster of fields?

For example you have a survey and then at the end you want to pop out the email, name, phone # fields all at once.


#29

Thanks for the form and script. I am having problem with the drop-down menu. the form works up to the drop-down and then it won’t go any further. please advise

thank you


#30

@TheRawr, no solution for that at the moment but will update this post if that changes!


#31

Hey @Samir, it looks like there was a small bug caused by the inline form validation. I’ve updated the script (found here: https://gist.github.com/noahub/b8c6d63abb50048d42ee721c900450df). Could you give it a try and let me know if your issue is resolved?


#32

Brand new to unbounce (not a tech specialist) and wish some clarity around form design. I wish to do a two part form from the landing page. Step 1 would standard information gathering (multiple fields) then once they click on 'next ’ (input data collected at this point) a new form would appear with some options (multiple fields) from which they can choose. Can this be done OR is as I think I have read one form only per landing page? Thanks


#33

Hi all,

I’m trying to achieve this effect, but the actual form isn’t showing?

http://promotions.futurefit.co.uk/bl4nk-p4g3330/

The previous, next and form submission buttons are showing but the actual field isn’t.

Any ideas?

Many thanks,

Jack


#34

Hey Jack, it looks like you may simply need to remove the ‘#’ from the IDs in the back and next ‘getElementById’ methods (lines 3+4 of the js).


#35

Hey guys!

We have seen first hand that multi-step forms are a powerful tactic to increasing conversion rates, especially if you can get the user to invest themselves in the first couple of fields (often asking the user for the less commitment based fields first).

With that in mind, is there anyway to display more than 1 field at a time? As it stands right now I can’t see this feature working for much of our clients as one of the primary reasons for using a multi-step field is to break down the form into manageable chunks. For instance, If we had 9 fields to capture from the user that would require them to click the next button 9 times.

I’m excited to see how this feature develops!


Multi-Step Forms... What's The What?
#36

Hi Noah,
Thanks so much for fixing the bug, the drop down menu is now working as
well. If we get the progress bar and possibility of showing more than one field
at the time, that would be great!


#37

Hey @Noah!

Having some trouble with the next button function.

It’s visible but it doesn’t display the next field or the ‘back’ button.


#38

Hey @Alan_C, feel free to direct message me with a link to your page and I can try to identify what’s going on here!


#39

@Noah have you considered creating a seperate script for inline error messages as the default error messages styling offered by unbounce is pretty old school by now?


#40

@nik_adiko good idea! I’ll let you know if I come up with something :slight_smile: