How to model complex multi page forms with conditional branches? - html

Question

It has occured to me that a large part of my job is really just building the same thing over and over again.
These are fundamentally complex multipage forms e.g. mortgage applications, insurance, etc.
Is there a common / well used model for such things? I don't care what language / technology is used. I'm thinking XML / language neutral ideally.

Answer 1

You can also use http://www.springsource.org/spring-web-flow:
Spring Web Flow is a Spring MVC extension that allows implementing the "flows" of a web application. A flow encapsulates a sequence of steps that guide a user through the execution of some business task. It spans multiple HTTP requests, has state, deals with transactional data, is reusable, and may be dynamic and long-running in nature.
It is perfectly integrated also in Groovy & Grails (Webflow Doc) . Groovy is an script-like extension of Java, whereas Grails is webframework that uses among other things Spring, Hibernate...

Answer 2

Personally I use Django to build my forms. I've done complex multi-step forms, where steps are conditional by using the django.contrib.formtools.FormWizard and using a factoryfunction to create the Form class for the step like this:
class SomeWizard(FormWizard):
def process_step(self, request, form, step):
if form.is_valid() and step == 0:
#compute step 2
Step2 = second_step_factory(form)
self.form_list[1] = Step2
And the step it with a placeholder when instantiating the Wizard object:
def some_form_view(request):
Step1 = first_step_factory(request)
placeholder = second_step_factory()
return SomeWizard([Step1, placeholder])(request)
In Django 1.4 the FormWizard has been replaced by a different implementation, I've not looked at that yet.
If you want a language neutral, more declarative option, you can have a look at XForms. Browser support seems a bit abandoned, but there are XSLTs that will transform your XForms into HTML.

Answer 3

The PFBC (PHP Form Builder Class) project is developed with the following goals in mind:
Promote rapid development of forms through an object-oriented PHP structure.
Eliminate the grunt/repetitive work of writing the html and validation when building forms. human error by using a consistent/tested utility.
A sample code will be:
<?php
//PFBC 2.x PHP 5 >= 5.3
session_start();
include($_SERVER["DOCUMENT_ROOT"] . "/PFBC/Form.php");
$form = new PFBC\Form("GettingStarted", 300);
$form->addElement(new PFBC\Element\Textbox("My Textbox:", "MyTextbox"));
$form->addElement(new PFBC\Element\Select("My Select:", "MySelect", array(
"Option #1",
"Option #2",
"Option #3"
)));
$form->addElement(new PFBC\Element\Button);
$form->render();
//PFBC 2.x PHP 5
session_start();
include($_SERVER["DOCUMENT_ROOT"] . "/PFBC/Form.php");
$form = new Form("GettingStarted", 300);
$form->addElement(new Element_Textbox("My Textbox:", "MyTextbox"));
$form->addElement(new Element_Select("My Select:", "MySelect", array(
"Option #1",
"Option #2",
"Option #3"
)));
$form->addElement(new Element_Button);
$form->render();
?>
Check out PHP Form Builder Class Project. Hope this helps... :)

Answer 4

I wouldn't try to be language neutral. Focus on a language like CFML or PHP which do this sort of thing very well. Eg.
<input type="radio" name="type" value='mortgage' onmouseup='updateForm(this)'> Mortgage
<input type="radio" name="type" value='loan' onmouseup='updateForm(this)'> Loan
<cfif form.type eq 'loan'>
<input name="income" type="text">
</cfif>
A very simple example. You could also use logic based on login details, database values, previous forms, etc. CFML also provides advanced form tags (eg, cfinput) which can take care of some of the messy details of dynamic forms for you.

Answer 5

Well, if you don't mind which language is used, and are interested in learning ROR, then here's a decent complex forms tutorial, although you will need some familiarity with the framework to make this work
Perhaps this answer will help you find a simpler jquery-oriented approach, might be a bit old
Take a look at this jQuery multi-step form tutorial too, but it looks like one I'll end up reading during my lunch-break later on as I'm interested in doing this myself
There's bound to be an idiot-proof plugin out there too

Answer 6

I do assume that you are using some kind of DB to form data. and what you want to do is fill out some data on form page one, submit form get the second page and so on.
Option 1 - Use PHP Yii framework.
It has some good built in CRUD(forms) generation support and it can generate simple forms automatically. What you need to do is customize the action to redirect you on next form (second page) and on the final form save all the data. It also has a good ajax based validation.
All you need to do is connect your app to db select a table generate model then generate CRUD. upto this its a 5-10 min task. Then you need to customize the forms define scenarios for validation and modify already defined actions to support the changes.
You can try their sample app Yii Blog. It can explain the process in detail.
Option 2 - USE JavaScript.
Built simple html forms as per your requirements. Then on submit of each page call a JavaScript (onClick event of submit button) that validates the form and stores the form data in JSON/XML object. You can serialize it or hold it in sessions. On submit of final page send an entire JSON/XML data (including data on final page) to your form processing script/ URL in action tag.