Note: only working in Firefox at the moment - need to update the javascript to work in IE

This example shows how you can use branching logic within your form to show different parts of the form to different users based on previously entered data.

As it currently stands implementing this requires a good working understanding of javascript, css and the DOM.

Here's how its layed out:

The is only one form being used here, with 4 groups:

group4:     Whats your name
                Next button

group5:     Ok rob, How old are you?
                Next button

group6:    Why aren't you called rob?
                Next button

group7:    Thanks message
               Submit Form button

all groups apart from group4 have their css set to make them invisible on the page:

visibility:collapse;
display:none;

Each "next button" has javascript code associated with it to hide/show the next group div, the most complex being the first button, whos javascript is :

f = document.getElementById('mosform_1').value;
if(f == 'rob'){
    g5 = document.getElementById('group5');
    g5.style.visibility = "visible";
    g5.style.display = "inline";
}else{
    g6 = document.getElementById('group6');
    g6.style.visibility = "visible";
    g5.style.display = "inline";
}
g4 = document.getElementById('group4');
g4.style.visibility = "collapse";
g4.style.display = "none";


This finds out what was entered into the form for the name. If you typed "rob" then you are shown group5, otherwise you get to see group 6 instead.

Below you can see the example of how the form works:

page 1 - enter "rob" below to see a different set of questions displayed:

name

So rob, how old are you?

Ok, so why aren't you called rob?

Thanks for answering this survey - even if you weren't called rob