Multipage registration form/questionaire

Discussion in 'Web Design and Development' started by jdl8422, May 22, 2008.

  1. jdl8422 macrumors 6502

    jdl8422

    Joined:
    Jul 5, 2006
    Location:
    Louisiana
    #1
    I am developing a registration page for a website. The process is 4 steps, or 4 pages. The first page is going to have a video and a form to enter your name, number...... The second page is going to be a list of check boxes that are going to be checked according to the customers needs, essentially a survey. The the third page is going to be simillar to the first two in that we are going to gather information from the customer. The last page is going to be a page to enter in information to send to friends.

    I have done some simple PHP stuff like contact forms. I am pretty confident I can do each one of these pages individually and have the information emailed to a particular email address, because I have done contact forms in the past. My problem is we want all the information to be collected throughout the pages, and then submitted all at once. The goal of this is not to register users or create logins, the goal is to gather information about clients or potential clients. Any suggestions on how to do this?
     
  2. bootedbear macrumors 6502

    bootedbear

    Joined:
    Sep 13, 2004
    Location:
    Austin, TX
    #2
    Two ways are rather common:

    1) Gather the info on the server as the pages are submitted. I don't know what capabilities PHP has with regards to session management, but it's pretty easy with Java web apps and I would think that PHP had similar mechanisms.

    2) Make it all one page with the four "pages" overlaid only showing the current "page" at a time. This is straight-forward with JavaScript and CSS. From the point of view of the server, it's still all in one form on one page.

    (I'd do 2).
     
  3. jdl8422 thread starter macrumors 6502

    jdl8422

    Joined:
    Jul 5, 2006
    Location:
    Louisiana
    #3
    do you happen to know where I could read up on doing that in javascript, or do u know what I could search for?
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    I put together a solution template of sorts. It divides up pages into fieldsets in a form then has buttons for stepping through it and only shows the submit button on the last page. The way I put it together it will work for those without JavaScript, though will show all pages at once, but will at least be accessible and that's what's important.

    Let me know if you have any issues with it.

    JavaScript
    PHP:
    var multi = function() {
      var 
    page 0;     // current page
      
    var pages;        // each 'page' (fieldset)
      
    var numPages 0// number of pages
      
      
    var init = function() {
        
    pages document.getElementsByTagName('fieldset');
        
    document.getElementById("formSubmit").style.display 'none';
        
    numPages pages.length-1;
        
    setPage(page);
      };
      var 
    next = function() {
        if (
    page+numPages) {
          
    document.getElementById('multi').submit;
          return 
    true;
        }
        if (
    page+>= numPages) {
          
    document.getElementById("formNext").style.display 'none';
          
    document.getElementById("formSubmit").style.display '';
          
    setPage(++page);
          return 
    false;
        }
        
    setPage(++page);
      };
      var 
    prev = function() {
        if (
    page <= 0) return;
        
    document.getElementById("formNext").style.display '';
        
    document.getElementById("formSubmit").style.display 'none';
        
    setPage(--page);
      };
      var 
    setPage = function(x) {
        for (var 
    i=0<= numPagesi++) { pages[i].style.display 'none'; }
        
    pages[x].style.display 'block';
      };
      return {
    init:initnext:nextprev:prev};
    }();
    window.onload = function() { multi.init(); };
    HTML
    HTML:
    <?xml version="1.0" encoding="utf-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
    <title>Multi-Page Form</title>
    </head>
    <body>
    <form id="multi" action="submitsomewhere" onsubmit="multi.next();">
    <fieldset>
      <label for="text-1">Page 1</label>
      <input id="text-1" type="text" />
    </fieldset>
    <fieldset>
      <label for="text-2">Page 2</label>
      <input id="text-2" type="text" />
    </fieldset>
    <fieldset>
      <label for="text-3">Page 3</label>
      <input id="text-3" type="text" />
    </fieldset>
    <p>
      <input id="formPrev" type="button" value="Back" onclick="multi.prev();" />
      <input id="formNext" type="button" value="Next" onclick="multi.next();" />
      <input id="formSubmit" type="submit" value="Submit" />
    </p>
    </form>
    </body></html>
     
  5. jsm4182 macrumors 6502

    Joined:
    Apr 3, 2006
    Location:
    Beacon, NY
    #5
    I've found a pretty interesting jquery plugin for doing this here.
     
  6. jared_kipe macrumors 68030

    jared_kipe

    Joined:
    Dec 8, 2003
    Location:
    Seattle
    #6
    Typically this is done via hidden forms. Meaning data gathered, say from page1.php, will still be collected on page2.php for submittal but the user will not see it.

    Say that page1.php gathered the users name, the page2.php might contain the following...

    Code:
    <form name="myform" action="page3.php" method="POST">
    <input type="text" name="birthmonth" value="enter birth month!" />
    // this part came from page1.php
    <input type="hidden" name="name" value="<?php echo $_POST['name']; ?>" />
    
    When the form is submitted page3.php's POST array will contain both name and birthmonth values.

    You might also want to include some methods of validation to make sure you got some data such as (hopefully not limited to) this code in page2.php...

    Code:
    if (isset($_POST['name'] && $_POST['name'] != '') {
            echo .... the form stuff .... ;
        } else { echo 'either you didn't put in data or you accessed this page in error';
    }
     
  7. bootedbear macrumors 6502

    bootedbear

    Joined:
    Sep 13, 2004
    Location:
    Austin, TX
    #7
    Ah yes, good call. Lacking server-side sessions, I've seen this done too.

    Though I'd still go for the single-page, JavaScript/CSS solution.

    The jQuery plugin mentioned earlier looks interesting (jQuery rocks by the way!)
     

Share This Page