5 replies to this topic

[chrapm1]

I have a form that has way too many questions without a break and am trying to split it up into multiple pages or tabs. Whichever is easier, I want the user to stay on the current page while completing the form. Also where and how to add the size box in order to fit form cleanly into space where i want.

this is the code for two sections i want to split, also what do i need to add to the start and end of the forms?

<script type="text/javascript">
function validateForm(theForm) {
valid = true;
var fObj = document.forms['rfqForm'];
for (var i=0, len=fObj.elements.length; i < len; i++) {
if (fObj.elements[i].className.match(/required/igm)) {
switch (fObj.elements[i].type) {
case 'checkbox':
case 'radio':
var el = fObj[fObj.elements[i].name], isChecked = false, qp = '';
for (var k=0, klen=el.length; k < klen; k++) {
if (el[k].checked) {
if (el[k].className.match(/other/igm)) {
if (fObj[el[k].name+'_other_text'].value=='') {
qp='qs'+el[k].name.replace(/[-_]/gm,'');
} else {
isChecked=true;
}
} else {
isChecked=true;
}
break;
} else {
qp='qs'+el[k].name.replace(/[-_]/gm,'');
}
}
if (!isChecked) {
alert('Please answer: '+document.getElementById(qp).innerHTML.replace(/<!*[^<>]*>|\[required\]/igm,''));
return false;
}
break;
case 'select-one':
case 'select-multiple':
case 'text':
case 'textarea':
var el = fObj[fObj.elements[i].name], isEmpty = true, qp = '';
if (el.value != '') {
isEmpty = false;
} else {
qp = 'qs' + el.name.replace(/[-_]/gm,'');
}
if (isEmpty) {
alert('Please answer: '+document.getElementById(qp).innerHTML.replace(/<!*[^<>]*>|\[required\]/igm,''));
return false;
}
break;
}
}
}
if (theForm.elements['companyName'] && valid && theForm.elements['companyName'].value == "") {
alert ("Company Name is required.");
valid = false;
}
if (theForm.elements['companyIndustry'] && valid && theForm.elements['companyIndustry'].selectedIndex == 0) {
alert ("Company Industry is required.");
valid = false;
}
return valid;
}


and page 2

</script>
<form name="rfqForm" action="http://xxxxxxxxxxxxx" method="post" onsubmit="return validateForm(this);">
<div>
<div>
<ol>
<li>
<div id="qsmatch0a610698a907829bdeb78b6d3485f563">
<strong> Are you interested in a generator for a commercial or residential location? [Required]</strong>
</div>
<div>
<div>
<input type="radio" name="__match__0a610698-a907-829b-deb7-8b6d3485f563" value="0053a346-b742-a3d9-5c70-26fb44d5b0df" class="required" />
<label for="0053a346-b742-a3d9-5c70-26fb44d5b0df"> Commercial </label>
</div>
<div>
<input type="radio" name="__match__0a610698-a907-829b-deb7-8b6d3485f563" value="a8c0e4ec-7612-5edc-9a8b-af713d2b4f6a" onclick="if(window.bzRD){bzRD.setMessage('http://xxxxxxxxxxxxxxx');}else{document.location='xxxxxxxxxxxxx';}"
/>
<label for="a8c0e4ec-7612-5edc-9a8b-af713d2b4f6a"> Residential (home, RVs, camping, etc.) </label>
</div>
<span>
(By selecting this answer you will be redirected to
home generators
)
</span>
</div>
</li>

[Orjan]

to stay on same page, you need to keep everything in one page as you say, not two.

one form with everything... and a next button instead of a submit, the button actually hides everything on first page and shows the second pages inputs, which has been hidden this far. the button itself would either become a back button or be hidden. this way, you only have one page with one form but the user experience it as parts. it can probably be more generical and have support for n number of pages instead of only 2, if you want to.

[BlackRabbit]

Orjan's Idea will work just fine

and if you are looking for something stylish you might try something like this :


[o] question one
[o] question two
[o] question three
[o] question for
[o] question five
[o] question six
...

so, you present a layout like that, with the questions but not the choices, in between brackets a red for "non answered yet" and a green checked symbol for answered, when the user clicks on the question you show the options, when he answers you hide again the options and mark that question with a green checked,
just an idea

[Orjan]

Like your idea too BlackRabbit, Just wondering if it could confuse the user a little bit too much. I'd rather say it should hide an answered question when user clicks another question to answer, instead of when answering it. your method can be a little bit too abrupt and some users need to think about about the given answers before heading to next question. Otherwise a good idea which gives a good overview of the whole form.

[BlackRabbit]

yes, i know orjan, we all know there is users and .. uuuuusers, hehe, both method works fine, and kinda go with the same hiding concept, even a little more complicated could be to have the questions as rotative while the choices/options frame stays always in the same place, so any time you answer one, is the questions which rotate positions, but as you said ... cool does not work for all the users, i might like also your way if you add at lets say left side, a column with the questions index, which could highlight the current one, while the navigation keeps the same as you said, with previous and back buttons

[Orjan]

yeah, there are many possibilities to do this. the more flashy thing, the more work is it to get it going, usually. but the concept is the same. show/hide or move divs...