Creating multi step forms

Question

Hi, I have been searching around for a way to create a multi step form such as: http://planner.builtbybuffalo.com/step-1/

I couldnt find any resources, just other examples, the one I am trying to create will be a 3 part process. I am going to be building this in jQuery.

I can understand the way to go from step to step, fadein/out, etc. But having a marker change and say what step.

Thoughts?

Ryan

Answer 1

Try this blog post from Janko

"Turn any webform into a powerful wizard with jQuery (FormToWizard plugin)"

Here is his demo .

I haven't used this plugin from him but I know that he has very good posts that I have used in the past.

I hope this helps. Oran

Answer 2

Looks like the steps on the timeline are evenly spaced. It might be as simple as multiplying the step number by the width and divide by the number of steps to get the distance the marker has to travel. Then use jQuery.animate to animate the position of the marker.

Sandro

Answer 3

The link you provided is making use of MooTools instead of jQuery. Take a look at how they do it (their implementation is a good approach I think).

Their JS file

You could implement nearly the exact same functionality and though your methods and syntax will vary, the idea could reproduced easily.

The neatest thing in here... in my opinion is the use of MooTools' Fx.Morph which takes an element and animates the properties from one class to another. That is a neat idea.