Home/ Questions/Q 8289357
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T12:29:26+00:00

I’m looking to make a step by step form for an instant quote type

  • 0

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).

enter image description here

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/)

    • 0