What should I use for these advanced forms?

[modrn]

I want to create some forms on my website BUT they aren’t super basic and I have about 0 knowledge in form creation and want them to be done a particular way and I’m not sure what I should use to create them.

Here’s an explanation of what I mean..

SO say you have 5 forms on ur page or steps. SO..

STEP 1
( selectable options)

STEP 2
( selectable options)

STEP 3
( selectable options)

STEP 4
( selectable options)

STEP 5
( selectable options)

But you don’t want step 2 to appear until step one has been completed, and you want the remaining options in Step 1 to disappear leaving only the selected.. or even Grey out. How would you go about doing that ?? Picture is attached to explain better.

Example

PICTURE:
1. – First step showing option 1 has been selected.

2a. – showing other options fading out showing.

2b. – showing STEP 2 Fading in once STEP 1 completed.

3. – Completed process with STEP 1 having only the selected option and STEP 2 ready for use.

[noahgelman]

I believe you have to do it with javascript if statements. Like, ‘if ‘select one’ has the value of ‘option one’, display ‘select two”. I’d write out a specific example of how to do it but its almost one in the morning and I’m too tired to think. If tomorrow you don’t know how to do it in java, I’ll write it out for you.

[ImpInaBox]

I’d start by having all form elements except those in step 1 hidden by CSS – display:none;

Then, having finished step 1 your visitor would hit a ‘next’ button or something with an onclick event that runs a piece of javascript to hide step 1 and make step 2 visible instead.

You could probably ease the programming burden by putting all the fields in step1 into their own div (or table or whatever) with the id ‘step1’ or ‘step2’ etc. Then the javascript boils down to something like…

function nextStep(nStep)

{

elStepLast = document.getElementById("step" + nStep - 1);

elStepNext = document.getElementById("step" + nStep);

elStepLast.style.display = "none";

elStepNext.style.display = "block";

}

Doing it in javascript rather than using separate forms on their own pages will make the form processing MUCH easier at the end.

[modrn]

Alright, thanks for the great feedback.. I actually think throwing a next button in there would make life a million times easier so ill go ahead and do that.

And noahgelman I would appreciate it if you did, if you cant get the time its totally cool, I just have 0 form experience so its a new thing for me all together.

Ill let you guys know how it goes for sure, and thanks again!

[Author]

Posts