WEBEXPEDITION18 Never Stop The Exploring

After my tutorial How to Create A Multi-Step Signup Form With CSS3 and jQuery many people have asked how to implement a back button in our form.

Insert the back button is a simple procedure. Read on to find how to do it in easy way.

TN3 Gallery is a full fledged HTML based customizable jQuery image gallery with slideshow, transitions and multiple album options. Compatible with all modern desktop and mobile browsers. Powered by jQuery.

Preview

HTML Code

First we need to include the following HTML code into #second_step, #third_step and #fourth_step divs:

<input class="back" type="button" value="" />

We’re going to include the button just before the submit button, as in the example below:

<input class="back" type="button" value="" />
<input class="submit" type="submit" name="submit_second" id="submit_second" value="" />

Before to save the HTML code, we need to delete the clearfix divs between the steps. Something like this:

Before:

</div>      <!-- clearfix --><div class="clear"></div><!-- /clearfix -->

<!-- #third_step -->
<div id="third_step">

After:

</div>

<!-- #third_step -->
<div id="third_step">

We made this change because the layout will work well without them and, above all, because in this way we can move more easily with jQuery.

CSS Code

There are few changes to be made in the CSS code. We need to find the #container input.submit rule (around row 80) and replace it with the following code:

        #container input.submit, #container input.back {
            background: url('../images/button.png') no-repeat;
            border: none;
            cursor: pointer;
            width: 85px;
            height: 38px;
            position: relative;
            bottom: 2px;
            left: 565px;
        }
            #first_step input.submit { left: 650px; }

        #container input.back{
            background: url('../images/back.png') no-repeat;
            left: 20px;
        }
            #container input.back:focus { border: none; }

jQuery Code

Now it’s time to work with jQuery. Also in this case the step is very simple. We just add the code below:

    //back button
    $('.back').click(function(){
        var container = $(this).parent('div'),
            previous  = container.prev();

        switch(previous.attr('id')) {
            case 'first_step' : $('#progress_text').html('0% Complete');
                                 $('#progress').css('width','0px');
                                 break;
            case 'second_step': $('#progress_text').html('33% Complete');
                                 $('#progress').css('width','113px');
                                 break;

            case 'third_step' : $('#progress_text').html('66% Complete');
                                 $('#progress').css('width','226px');
                                 break;

            default: break;
        }

        $(container).slideUp();
        $(previous).slideDown();
    });

The previous code should be inserted before the close of the last

)};

brackets.

That’s all! We now have a new and powerful back button. ;)

Demo & Download

To see form in action click on the button

and, if you like the final result, download form files using the below button.

Authored by Simone D'Amico

Simone D'Amico is a web designer, web developer and blogger from Italy. Check out his portfolio or his personal blog. You can follow him on Twitter.