managing complex web forms

Question

I work on an application, the core of which is a very complex set of web forms. The source of this complexity

1. scale, some forms contain about 50 pages, which up to 30 questions on each page
2. complex rules, e.g. if the user answers "no" to question 4, then questions 5-15 do not apply, so should be removed from the form

Currently we use Angular Schema Form for the forms, but it doesn't provide a compelling way to manage large number of complex rules among form fields.

I don't have much experience with rules-based programming, but it seems to me that this might provide a better way of managing the rules among form fields. For example, using a rules-based approach we could define the rules associated with each form field, and the rules engine could use these to decide which field(s) to display next. Using our current approach, we achieve this with a massive amount of imperative JavaScript which is almost impossible to test and maintain.

If anyone has experience with developing such complex web forms, I'd be interested to hear about their experience e.g. tools/libraries they could recommend. Our current stack is based on the JDK (Java, Groovy, Grails) and JavaScript (Angular, Node) so tools/libraries/frameworks that run on those platforms would be of particular interest.

Answer 1

I have experience of building a solution for this type of process - admittedly not 50 form pages at a time but my use case did have long technical forms where sets of questions became hidden based on an earlier answer.

I wrote a design-time tool for an expert to set the questions. This tool presented the questions as a tree and allowed questions to be grouped into blocks to make the show/hide rules easier to manage for the author. These rules were encoded as simple 'Q10 > 123' meaning when answer to Q10 is greater than 123 then show this question (or block of questions). The answer required by the questions could be text input, drop down selections, etc.

The result of the design-time activity by the author was an XML definition of the question tree, question details (prompt, mandatory, type, options etc), and visibility rules.

At runtime I fed this to a JavaScript 'player' embedded in a web page. The player consumed the question definitions, set up a model, created the required display elements etc, generating the the HTML required to render the page. This included running a visibility check based on those rules. This check ran again when an answer was given so that any dependent questions could be hidden / come into view based on the given answer.

At the point where the user completed the form we saved the data to the DB by posting a hidden form to the server. This form included an 'isVisible' marker for each question which was also stored in the DB as a means to be able to quickly display the resulting answers and knowing which were hidden on the basis that if they were hidden in the form at the end of the session then they should be hidden when the results were displayed, printed or emailed etc.

I built mine originally in VBScript (IE was THE browser back then!), then moved it to JavaScript, and more recently updated with JQuery. It's been used millions of times and seems to be robust and practical.

In summary, you need a tool to help your experts set the questions for the forms; you need a means to save and transfer that information; you need a way to process the form & question definition for the user; you need a way to store the answers given; and you need a way to quickly re-display the results without needing the re-calculate show/hide on all the questions.