Multi Step Form with Progress Bar using jQuery and CSS3

Ahmad Alfy

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

David

Absolutely fantastic!! THX for sharing!!

Hans Bosch

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

Vinod

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

Kambam Lakshman

Really Amazing for web developers

nahid

awesome how this demo download…:)

sapana frike

but its not working properly on internet explorer

kavi

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

Assem Riadh

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

Yuriy

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

Jacob Gelman

I have to say this is really cool!

sharath

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

David Cholariya

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

Tobi

It’s not working, please help

java_lady

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

varun

how do i validate fieldset before it process to next step

rujata

It’s not working, please help

Rafael Staib

Very nice design. Would be nice seeing a CSS theme contribution for my jQuery wizard plugin ;-) See here http://www.jquery-steps.com

muni

Simply superb………

Jacob Gelman

I love the layout!

Emre

thank you so much! but Javascript effect not working

Diego henao

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

onlymaj

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

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

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

Sikosis

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

himanshu

how to validate these fields .

Shruti

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

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

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

its working ….. yuppiii coolllll

Riliwan

http://webexpedition18.com/articles/how-to-create-a-multi-step-signup-form-with-css3-and-jquery/

You can mix code up with this

arie

nice…

Adem

Excellent script, thank you,

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

Thanks

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

I am beginner. Can you show a sample?
Thanks

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

Thank you, I’ve solved the problem,
Here: http://forum.ceviz.net/javascript-dhtml-ajax/129217-jquery-form-kontrolu-hakkinda-sorum-var.html
7th message

Adem

Hello,

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

Best Regards

Trần Tuấn Sơn

This is Great…
Thank you :)

phung_uii

Hom do Validate?

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

A way to validate is needed…

luca

hi there!

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

Sam

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

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

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

Timothy

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

uchha

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

Muthukumar

Next button is not working..?

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

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

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

Phạm Anh Tuấn

Thank you, this is best progress bar I’ve see!!!

Bernard Sibanda

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

regard thank you

Invincible

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

Designerph

ATTENTION:
THE CODE DOESN’T WORK ANYMORE.

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

How to validate that forms

Satish

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

Pravin

awesome creation..Its really great!!

Faycal

Very good work

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

Thank’s

Faycal

Is it possible to integer Bootstrapvalidator plugin ?

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

Sanjeev

Hi,

I loved this form design so implemented it with validations and database connectivity. I hope people will be benefited from this. Here’s link of complete tutorial http://www.infotuts.com/multi-step-form-with-progress-bar-using-jquery-css3-php/. Thanks to Thecodeplayer team :)

Regards:
Sanjeev

Vasnth

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

Rainy

Brilliant! Thank you for sharing :)

Jamie

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

sanjeev

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

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

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

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.

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

MD Ashraf Malik

nice demos dear
some of my are here

http://www.w3course.com/experimentswithcss3.php

how can i post my demos on your site

Sai Laxman Allu

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

michal

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

Navdeep

It was ultimate!!!

SpiegS

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

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

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

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

next step not working in my site

alpa

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

Dev

here is one more example
http://www.amitpatil.me/multi-step-form-with-progress-bar-and-validation/

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

the buttons aren`t working help

Nikasemo

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

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

HIREN

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

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

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

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

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

What is the first comment?

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

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

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

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

Angelina

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