Home/ Questions/Q 4082616
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T18:12:35+00:00

this thing is driving me nuts. I’m working on a personal for my own

  • 0

this thing is driving me nuts. I’m working on a personal “for my own fun” project involving a quite long sign up form.

What I want to do is to split the form into sections grouping the fields that are relevant for each step, and the ability to navigate back and forth before pressing Submit, which check marks or something to indicate which step is complete or not. I’ve found some examples around but they don’t really fit into my design and can’t get around to modify them exactly how I want.

I was aiming at something similar to the slide show in forum http://forum.xtreamer.net/, with the progress bar at the bottom and the clickable steps. I would like to do something like that but for the steps in a form.

Any ideas of where should I start? I tried to look at their code to see if they use a public or commercial (but third party) jquery plugin but no dice.

Anyone can recommend a tutorial or some resources?

Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I just designed something similar recently using jCarousel. it is a jquery plugin that allows you to easily scroll to certain positions, or ids on the page.

    What we did was create a long horizontal page with several divs floated to the left. Each div contained a step or two, and had forward and back buttons at the bottom. When you click the next button on a particular step, it would quickly slide away and then next one would slid in

    In addition to this, there were absolutely positioned buttons at the top that could take you to each step individually.

    Here is an example of the individual navigation to go back and forth:

    <div class="nav">
    <a name="1" onclick="$(document).scrollTo('#1',3000);" style="float:left;">&larr; Back</a>
    <a name="3" onclick="$(document).scrollTo('#3',3000);" style="float:right;">Next &rarr;</a>
</div>

    The #1 and #3 are ids of the prev, next steps — this code being taken from step 2. 3000 is the milliseconds to scroll to each particular part of the form. 3 seconds is a bit long, but we had some animated images between the steps to make the form a little more fun!

    Hope this helps 🙂

    • 0