11

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

5
  • Out of curiosity, what was your rationale for choosing Backbone for this project? Jul 19, 2012 at 3:23
  • for now just to practice and get the hang of how it works but future versions of this website will deal with a variety of products and will have a calendar module where customers can see available dates and schedule appointments if they are satisfied with the quote. I guess backbone is overkill for this particular part of the site.
    – parliament
    Jul 19, 2012 at 4:24
  • 1
    @user1267778 the whole point here is do you need client heavy page for registration? It might involve, credit card numbers, phone numbers etc Hence do this as server side pages ex: aspx page, rails forms. After they login you will be fine using js heavy pages. But if you still want to do a try here is how i would have done it. 1. Isn't the form supposed to represent a model ? Yes ! then great 2. This is going to be a view which has several <div> each representing a step of the wizard. On the final <div> include a submit button with click event hooked to it. 3.Click handler instantiates mo Jul 19, 2012 at 4:36
  • payment page involving credit card info will be separate and yes server side. this is just form to be contacted with a quote. I will try what you said, thank you.
    – parliament
    Jul 19, 2012 at 5:13
  • 1
    This gist could help you on your way: gist.github.com/1112194 Jul 19, 2012 at 9:49

2 Answers 2

14

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
5

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.