Thread: has anyone ever used / know of a tutorial of how to create a multi step sign up form?

**ljackson** · 26 Jun 2012 @ 22.34

Hi All,

I've spent 2 days looking online for a good tutorial / script for a multi step sign up form which has validation and can be modified. Does anyone know of a good example which i can follow and learn from.

I have created a series of forms and they appear as i want but im not sure how to validate each of the forms and have the current 'step' stay the same if the form has errors?

here is my code

PHP Code:

 <?php
if(!isset($_POST['step']))
{
    $_POST['step'] = '0';
}
else
{
    $_POST['step'] = $_POST['step'];
}
switch ($_POST['step'])
{
    case '0':
    {?>
        Step 1 of 4
        <form name="step1" id="step1" action="<?php $_SERVER['PHP_SELF']?>" method="post">
            <div class="form-field">
                <label>Username:</label>
                <input type="text" size="25" value="" name="username" id="username" autocomplete="off" />
                <div id="status"></div>
               </div>
           
               <div class="form-field">
                <label>Password:</label> 
                <input type="password" size="25" value="" name="password" id="password" autocomplete="off" />
                <div id="status"></div>
              </div>

               <div class="form-field">
                <label>Retype Password:</label> 
                <input type="password" size="25" value="" name="cpassword" id="cpassword" autocomplete="off" />
                <div id="status"></div>
               </div>

               <div class="form-field">
                <label>Email:</label>
                <input type="text" size="25" value="" name="email" id="email" autocomplete="off" />
                <div id="status"></div>
               </div>
           
               <div class="ausu-suggest">
                <label>Town:</label> 
                <input type="text" size="25" value="" name="countries" id="countries" autocomplete="off" />
                <input type="hidden" size="4" value="" name="countriesID" id="countriesid" autocomplete="off" disabled="disabled" />
                <input type="hidden" name="step" id="step" value="1" />
               </div>
           
               <div class="form-field">
                <input type="submit" name="step1" id="step1" value="Continue" />
            </div><?php
    break;
    }
    case '1':
    {?>
        Step 2 of 4: 
        <form name="step2" id="step2" action="<?php $_SERVER['PHP_SELF']?>" method="post">
            <div class="form-field">
                <label>Name:</label>
                <input type="text" size="25" value="" name="username" id="username" autocomplete="off" />
               </div>
           
               <div class="form-field">
                <label>Surname:</label> 
                <input type="password" size="25" value="" name="password" id="password" autocomplete="off" />
              </div>
            
               <div class="form-field">
                <label>Bio:</label> 
                <textarea name="bio" cols="23" rows="5"></textarea>
              </div>

               <div class="form-field">
                <label>Interests:</label> 
                <textarea name="interests" cols="23" rows="5"></textarea>
              </div>
            
               <div class="form-field">
                <label>Gender:</label> 
                <input name="gender" type="radio" value="Male" />Male
                <input name="gender" type="radio" value="Female" />Female
               </div>

               <div class="form-field">
                <label>Year of birth:</label>
                <input type="text" size="25" value="" name="email" id="email" autocomplete="off" />
               </div>
                      
               <div class="form-field">
                <input type="button" value="Back" onclick="" />            
                <input type="button" value="Skip" onclick="" />            
                <input type="submit" name="step2" id="step2" value="Continue" />
                <input type="hidden" name="step" id="step" value="2" />
            </div>
        </form><?php
    break;
    }

    case '2':
    {?>
        Step 3 of 4
        <form name="step3" id="step3" action="<?php $_SERVER['PHP_SELF']?>" method="post">
            Our Reccomendations
               <div class="form-field">
                <input type="button" value="Back" onclick="" />                        
                <input type="button" value="Skip" onclick="" />
                <input type="submit" name="step2" id="step2" value="Continue" />
                <input type="hidden" name="step" id="step" value="3" />
            </div>
        </form>
            <?php
        
    break;
    }
    
    case '3':
    {?>
        Step 4 of 4
        <form name="step3" id="step3" action="<?php $_SERVER['PHP_SELF']?>" method="post">
               <div class="form-field">
                <input type="button" value="Back" onclick="" />                        
                <input type="button" value="Skip" onclick="" />
                <input type="submit" name="step2" id="step2" value="Continue" />
                <input type="hidden" name="step" id="step" value="4" />
            </div>
        </form><?php
        
    break;
    }

    case '4':
    {?>
        Congratulations
        Thank You for signing up you will be re directed to the login page where you will be able to sign in<?php
    break;
    }
    
}?>

as you can see there is no validation but it works as expected (without validation) not sure if this is the best way of creating such a for but its the only way i know.

again if anyone knows of a better method or how i can validate the forms without the step increasing and showing the next form i'd forever be in your debt

th

Tanks
Luke