Multi-steps WordPress registration : in 4 steps how to?

I saw in several WordPress sites up on registration that the registration process is in 3 or 4 steps.

how can i implement such process to my theme? ie:

1. choose your role + fill in register form—-> if its ok submit then go to step 2
2. profile details : user pic , some usermeta form —-< if its ok submit then go step 3
3. Preview profile before confirm —< go to step 4 or back to step 3 to make changes.
4. registration complete success

UPDATE

hi guys i have figured it out little bit,(i am using jobroller theme which has a normal a one step registration form, but it has a multiple step forms for submting jobs listing)
submit job form.
what i wanted is to use the same (submit job multi-steps forms) for registration form so users are obliged to fill in profile details or whatever within the same process. registration.
so i hacked the original registration of jobroller theme (includes/theme-login.php) and here what it gives.

theme-login.php

here is the function registration steps that replace the original jr_register_form()

function jr_registration_steps() {

// Show registration steps forms

### Prevent Caching
nocache_headers();

jr_load_form_scripts();

//global $post, $posted;
global  $posted;
$submitID = $post->ID;

$posted = array();
$errors = new WP_Error();

if (!is_user_logged_in()) :
    $step = 1; 
else :
    $step = 2;
    if (!current_user_can('can_submit_job')) : //can_submit_listing redirect to my listing
        redirect_myjobs();
    endif;
endif;

if (isset($_POST['register']) && $_POST['register']) {

    $result = jr_process_register_form( get_permalink($submitID) );

    $errors = $result['errors'];
    $posted = $result['posted'];

//}
//elseif (isset($_POST['login']) && $_POST['login']) {

    //$errors = jr_process_login_form();

}
elseif (isset($_POST['job_submit']) && $_POST['job_submit']) {  

    $result = jr_process_submit_job_form();//jr_process_submit_user_registration_form

    $errors = $result['errors'];
    $posted = $result['posted'];

    if ($errors && sizeof($errors)>0 && $errors->get_error_code()) $step = 2; else $step = 3;

}
elseif (isset($_POST['preview_submit']) && $_POST['preview_submit']) {

    $step = 4;

    $posted = json_decode($_POST['posted']);

}
elseif (isset($_POST['confirm']) && $_POST['confirm']) {

    $step = 4;

    jr_process_confirm_job_form();//jr_process_confirm_user_registration_form

}
elseif (isset($_POST['goback']) && $_POST['goback']) {
    $posted = json_decode(stripslashes($_POST['posted']), true);
}

if( isset($_GET['checkemail']) && 'newpass' == $_GET['checkemail'] )    
    $message = __('Thank you for registering! An email has been sent to you containing your password.','appthemes');

   get_template_part('header'); ?>

<div class="section">

    <div class="section_content">

        <h1><?php _e('create an Account', 'appthemes'); ?></h1>

        <?php 
            echo '<ol class="steps">';
            for ($i = 1; $i <= 4; $i++) :
                echo '<li class="';
                if ($step==$i) echo 'current ';
                if (($step-1)==$i) echo 'previous ';
                if ($i<$step) echo 'done';
                echo '"><span class="';
                if ($i==1) echo 'first';
                if ($i==4) echo 'last';
                echo '">';
                switch ($i) :
                    case 1 : _e('Create account', 'appthemes'); break;
                    case 2 : _e('Enter Profile Details', 'appthemes'); break;
                    case 3 : _e('Preview/Profile Options', 'appthemes'); break;
                    case 4 : _e('Confirm', 'appthemes'); break;
                endswitch;
                echo '</span></li>';
            endfor;
            echo '</ol><div class="clear"></div>';

            // show the success message usually because a password has been emailed to new user
            if (isset($message) && !empty($message)) echo '<p class="success">'.$message.'</p>';

            jr_show_errors( $errors ); 

            switch ($step) :

                case 1 :
                    jr_before_step_one(); // do_action hook
                    ?>
                    <p><?php _e('You must login or create an account in order to post a job &mdash; this will enable you to view, remove, or relist your listing in the future.', 'appthemes'); ?></p>

                    <div class="col-1">
                        <?php jr_register_form( get_permalink($submitID), 'job_lister' ); ?> <!-- change job_lister to new role--->
                    </div>
                    <div class="col-2">         
                        <?php jr_login_form( get_permalink($submitID), get_permalink($submitID) ); ?>  <!-- delete--->
                    </div>
                    <div class="clear"></div>
                    <?php                       
                    jr_after_step_one(); // do_action hook                      
                    break;
                case 2 :    
                    jr_before_step_two(); // do_action hook
                    jr_submit_job_form(); //*****jr_submit_user_registration_form();                
                    jr_after_step_two(); // do_action hook  
                    break;
                case 3 :    
                    jr_before_step_three(); // do_action hook
                    jr_preview_job_form();  //*****jr_preview_user_registration_form();
                    jr_after_step_three(); // do_action hook
                    break;
                case 4 :
                    jr_before_step_four(); // do_action hook
                    jr_confirm_job_form();  //*****jr_confirm_user_registration_form();
                    jr_after_step_four(); // do_action hook
                    break;

            endswitch;  
        ?>

    </div><!-- end section_content -->

</div><!-- end section -->

<div class="clear"></div>

 <?php if (get_option('jr_show_sidebar')!=='no') get_sidebar('submit'); ?>

 <?php 

   get_template_part('footer');

  }

here what i have in my includes/forms/register/ register-process.php

register-process.php

please note that i have modified this at the bottom :

// redirect
wp_redirect($success_redirect);
wp_redirect($success_redirect);// redirect user to dashbord when registred
exit();


to this code :

$redirect_to = !empty( $_POST['redirect_to'] ) ? $_POST['redirect_to'] : '?action=register&step=2';
                            wp_safe_redirect( $redirect_to );

                            exit;

in order to add &step=2 to the url, i think you can add similar code to the other form to redirect and show correct step in url after ?action=register

i didn’t finish yet hacking the code to suit it to my needs but what i suggested is a beginin and others can help modifyin or presenting better.

hope its helps you 🙂

The easiest method of doing this would be to use the Gravity Forms plugin, it costs money, but it’s well worth the investment, and quickly pays for itself in saved development time