Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Multipage registration form/questionaire

jdl8422

jdl8422

macrumors 6502
Original poster
Jul 5, 2006
491
0
Louisiana
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?
 
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).
 
do you happen to know where I could read up on doing that in javascript, or do u know what I could search for?
 
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+1 > numPages) {
      document.getElementById('multi').submit;
      return true;
    }
    if (page+1 >= 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; i <= numPages; i++) { pages[i].style.display = 'none'; }
    pages[x].style.display = 'block';
  };
  return {init:init, next:next, prev: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>
 
bootedbear said:
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.
Click to expand...

I've found a pretty interesting jquery plugin for doing this here.
 
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';
}
 
jared_kipe said:
Typically this is done via hidden forms. [/CODE]
Click to expand...
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!)
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back