Backbone.js Multi-Step Form

Question

I'm looking to make a step by step form for an "instant quote" type of thing on my website. I made the following image on photoshop, it's pretty self-explanatory that I want the user to enter information at each step of the form and ultimately submit the form at step 3 (going to the next step should be seamless, without a page reload).

Can someone please give me some general pointers how I should go about this? This is my first project using backbone.js and it would really help to have a high level overview of whats the best way to approach this particular widget.

Thanks

Answer 1

I would structure it as follows:

1. Implement model for data to be collected

Have a single model which collects the data across the stages. Implement storage of this model, and allow partially-completed data. (You'll probably want to store this at each stage, so the user can come back at a later date).

2. Implement a generic 'multi-stage' view

This should be responsible for rendering the tabs/stages at the top, rendering navigation elements for backwards/forwards, and for rendering a sub-view.

3. Implement specific sub-views for each stage

These should operate on bits of the above model.

4. Implement routing

You might want different URL routes for each sub-view, or you might want the same URL for the whole multi-stage process. Either way, the router needs to create the outer multi-stage view and the inner sub-view (or views), and connect them together, together with the appropriate model.

5. Hint: make use of pub/sub

Don't couple your views tightly. Use some form of pub/sub to raise and listen to custom events. (For example: http://lostechies.com/derickbailey/2011/07/19/references-routing-and-the-event-aggregator-coordinating-views-in-backbone-js/)

Answer 2

To addition to stusmith, I just made an example of a backbone js multistep form. Feel free to have a look and copy it.

https://github.com/michaelkoper/backbone-multistep-form