Multi Step Form with Progress Bar using jQuery and CSS3

View code Play Walkthrough

Description

Got long forms on your website ? Break them up into smaller logical sections and convert it into a multi-step form with a cool progress bar. Could work for lengthy processes like registration, checkout, profile fillups, 2-factor authentication logins, etc.

The demo uses jQuery, CSS3, and jQuery easing plugin.

The form has 3 fieldsets containing the 3 different sections of the form. The fieldsets are absolutely positioned and only the first one is visible by default. Moving to the next section fades out the current fieldset using jQuery .animate() and brings in the next fieldset from the right. The reverse happens if the user moves to the previous section.

Add New Comment

97 Comments

(close)
Ahmad Alfy

Ahmad Alfy

This is really great, A jQuery plugin should be created for that awesomeness :)

David

David

Absolutely fantastic!! THX for sharing!!

Hans Bosch

Hans Bosch

Nice, but how can I make the sumbit button work ?!

Vinod

Vinod

This is a really good one..Will recommend to more people who want to see CSS and html in action :)

nahid

nahid

awesome how this demo download…:)

sapana frike

sapana frike

but its not working properly on internet explorer

kavi

kavi

it isn’t going to next to next steps, its staying on first step please help

Assem Riadh

Assem Riadh

can we have a demo code.
i tried to apply it but next button dose not work
please help

Yuriy

Yuriy

Love that form, but need to have alternative for IE…

Jacob Gelman

Jacob Gelman

I have to say this is really cool!

sharath

sharath

Really fantastic… anyone pls help me in downloading this.. pls pls pls

David Cholariya

David Cholariya

Hello! This plugin is great yeah! But it is not working well in IE 7+.
All fieldsets are shown imidietly!

Tobi

Tobi

It’s not working, please help

java_lady

java_lady

Hi, Do you have validation part for this form? Thanks

varun

varun

how do i validate fieldset before it process to next step

rujata

rujata

It’s not working, please help

muni

muni

Simply superb………

Jacob Gelman

Jacob Gelman

I love the layout!

Emre

Emre

thank you so much! but Javascript effect not working

Diego henao

Diego henao

This is dead on Internet Explorer, it doesn’t work in IE, only in chrome and firefox

onlymaj

onlymaj

thanks for your good demo . i should mention a thing here that you’ve forgot “animation=false” in previous buttons callback .

Leonardo

Leonardo

hello to fix the problem with the (next button)just copy the code above into a JS file like in my example “My JQuery”.

Sorry for my English just i want to help … Greetings from Dominican Republic.

Shruti

Shruti

Hey fantastic layout, but the next button is not working what may be the problem…
Please do reply

Sikosis

Sikosis

Guess I should have read the comments first … doesn’t work.

himanshu

himanshu

how to validate these fields .

Shruti

Shruti

the code works if the JQuery code is kept inside
$(document).ready(function(){
//JQUERY
});

Conor

Conor

Can I add a class to a previous indicator to give it a different style? I would like to show the previous indicator as blue, the current as green, and future as white.

Thanks!

Shinya

Shinya

I added method=”get” inside form tag but the data don’t show up on url bar. I wonder whether it works or not.

harvinder

harvinder

its working ….. yuppiii coolllll

Adem

Adem

Excellent script, thank you,

I have a question,
How do I make controller form?

Thanks

Hanan

Hanan

The two scripts reference in html code should be before placing the jquery code. and jquery code should be in
$(document).ready(function(){
//JQUERY
});

Adem

Adem

I am beginner. Can you show a sample?
Thanks

Adem

Adem

When I fill a multistep form.. (My form has 8 steps.)
If there is a required field and it isn’t filled, it must give an alert on this step (not on the last step -submit)
In my form, it gives alert on the last step (after click submit). I want to give alert on related step. How can I do this?
Can you help me, please?

Adem

Adem

Hello,

Buttons does not work
” buttons ”
How do I use the div?

Best Regards

Trần Tuấn Sơn

Trần Tuấn Sơn

This is Great…
Thank you :)

phung_uii

phung_uii

Hom do Validate?

Iwan

Iwan

Brilliant tutorial, however I am stuck on the same issue that many people seem to be having, the next button does not navigate to the ext field set, I am wondering if you could shed some light on this and possibly provide some much needed assistance.

YUyu

YUyu

A way to validate is needed…

luca

luca

hi there!

is this compatible with IE8?
did you test it for cross-browser compatibility?

Sam

Sam

Is there a license agreement for commercial/non-commercial use.

Sam

Sam

Awesome plugin,
I installed it and it’s works fine.
I implemented also the ValidationEngine plugin based on Jquery
However, when my form is not completely filled and I click on the last button e.g submit,
The last form disappear instead of stay active for showing all errors !!!

bijay

bijay

this NEXT button is not working. Any solution will be appreciated ???

Timothy

Timothy

Awesome tutorial but the next button is not working. How do we solve this? Thanks

uchha

uchha

When I click next it does not go to the next fieldset. Someone help me?

Muthukumar

Muthukumar

Next button is not working..?

Jeroen

Jeroen

Thanks for the tut! Some people here are right, it only shows the last fieldset on IE and can’t play with the prev and next buttons.

Also, in other browsers i’m unable to go from step 3 to step 2. It doesn’t switch the fieldsets, only fades away the buttons..

Any help? :)

Jeroen

Jeroen

Ok never mind i fixed my issue!
IMPORTANT!! Don’t create any divs or so around the next and prev buttons, let the fieldset be the parent and it will turn out fine!

IE FIX? Who even uses IE nowadays? :)

Tim

Tim

Nice. Somebody figured out how to make the steps clickable?? That would be a nice feature

Bernard Sibanda

Bernard Sibanda

help me make the navigation work. i am impressed by this.

regard thank you

Invincible

Invincible

Thank you. Quite helpful. Is there any way to make the progress bar click able? Will be great if it cab be

Designerph

Designerph

ATTENTION:
THE CODE DOESN’T WORK ANYMORE.

Keli

Keli

Is it possible to have multiple fieldsets in one progress bar list item. For example – “create your account” and “social profiles”, in your code, would both be in number 1 “account setup” then the progress bar would change to number 2. ?

harvinder

harvinder

How to validate that forms

Satish

Satish

plz help i created 3file html,css,js but on clicking next button it wont work…any body help plz

Pravin

Pravin

awesome creation..Its really great!!

Faycal

Faycal

Very good work

How to add validate the form when we click to next button ?

Thank’s

Faycal

Faycal

Is it possible to integer Bootstrapvalidator plugin ?

I try to add it, but i must have 3 forms not one for diferentes steps

Vasnth

Vasnth

Awesome JQuery Plugin. Thanks for sharing this plugins. Thanks a lot

Rainy

Rainy

Brilliant! Thank you for sharing :)

Jamie

Jamie

How do you get the submit button to work? I am trying to POST the data to another page

sanjeev

sanjeev

plz put Jquery code below Html code , then it will work fine

Jamie

Jamie

I have the jquery below the html, and the multi step form itself works fine (the next and previous buttons are ok).
However the submit button does nothing and I wondering how you use the POST command to actually send the data the user puts in the form.

Thanks in advance

Phil

Phil

Just want to say thanks, this is a great tutorial, and stylish layout. However, I would like to take this a little further….

Imagine slide 1 had a set of radio buttons. If the user picked one of them the second slide would display different content to when they selected one of the other radio buttons.

Is there a way to hide/show different content on the second panel, dependednt on a radio button selected in the first?

Thanks in advance.

Phil

Phil

No problem, I managed to work out a way to write my own script with functions declaring hidden and other content. The trick I have found when building on this code base is to notice that this works on a sequential basis through the field sets. field set 1 = 1, field set 2 = 2 etc.

The qay i got round it was to alter the link betwen the fieldsets and give each element its own unique ID and link through that, with a addClass and removeClass declaration on the nav elements, when a click function is declared.

Thanks again for this great code, as it has allowed me to build on it and develop my own skills. :)

Jay Wilson Jr.

Jay Wilson Jr.

Well done, great job! I picked up a few new tricks. Very nice design, Thanks.

Sai Laxman Allu

Sai Laxman Allu

Next and previous is not working when used renderpartial in asp.net mvc. @{Html.RenderPartial(“Index1″);}

michal

michal

Realy nice and easy to implement.
Nice work one again man :)

Navdeep

Navdeep

It was ultimate!!!

SpiegS

SpiegS

If parent container of progress bar has background color, progress bar is not visible.

John Kane

John Kane

I love this. Can someone tell me how i can continue to show the middle fieldset a variable number of times. For example, a person chooses a questionnaire from a list. That questionnaire has 15 questions. I want the middle fieldset to be on screen for 13 passes (next previous). Anyone?

SpiegS

SpiegS

Solution for the problem I mentioned earlier: add
position: relative;
z-index: 0;
to #progress

Gonçalo

Gonçalo

Hello and thanks for the code.
Mine adaptation works fine with a single problemthat I cannot find the reason: the other fielsets are not in the same position as the first one. Can you help me with this?
Thank you. I appreciate it.

alpa

alpa

next step not working in my site

alpa

alpa

i have put js below html code, its work fine thanx…!!

Robert Ramirez

Robert Ramirez

This is an awesome form. I am having some issues. How can I dynamically change the CSS of an li based on current page instead of the counter.

Retik Singh

Retik Singh

the buttons aren`t working help

Nikasemo

Nikasemo

If you want to submit the form, set the onclick submit to true.

$(“.submit”).click(function(){
return true;
})

HIREN

HIREN

This tutorial really good but next button not properly working please help me

Jason

Jason

If not already mentioned, this could be made to work better using ‘flex box’. Flex on the parent and flex-grow:1 on the children (li’s) – saves having to have a defined width…

Ankit

Ankit

How to use this in master-child pages. If i use your code inside content placeholder in asp.net web form, it is displayed as like it is above the background page(which in my case ia having certain headers and footers).

Vivek

Vivek

I am still wondering if this can be used for commercial purposes….and it’s not working for me…the next button is just not workking.

Janine

Janine

Do a search of this website for the word Reincarnation as well as
you will discover a variety of extracts that will answer your question.

Apri

Apri

What is the first comment?

Merlin

Merlin

Initially I just utilized the arbitrary technique until I
found an individual great considering that it’s actually not that expensive to get
a basic reading.

DS

DS

How can I use fade instead of easing? Any help?

vipre internet security install

vipre internet security install

If you are going for best contents like myself, only visit this site everyday for the reason that it
provides feature contents, thanks

friv-friv-friv.com

friv-friv-friv.com

It’s awesome designed for me to have a web site,
which is valuable for my knowledge. thanks admin

Angelina

Angelina

The hack helps any sort of the gadget you would be having and it is efficient who
has any system.

5x 10x 15x 20x

97 Comments

Description