Multiple step/page order form - implementation ideas requested

[darrenc]

Lets say you wanted to make a 6 step order form where a user stepped through it entering various data, making choices, having those choices calculate or be error corrected before moving on to the next pages... how would you accomplish that? Simple example... lets say, in order, the process is the something like the following:

1. enter a fruit
   
2. enter a quantity
   
3. enter a vegetable
   
4. enter a different quantity
   
5. Provide your home address
   
6. Thank you / Order review
   

 

Obviously think much more complex than this, but in rough theory do you think that you'd be making individual, unique, templates for each step of this process? Each each step would need some kind of error checking or another - each page "submit" would post back to itself and then have code in the template file top top to check that the data is valid and move on to the next step or, if not, repeat. If someone enters "laser beam" on step 3, you want to be able to make sure they are prompted to actually enter a vegetable. In addition you'd want to allow the user to go back at any point and change something while retaining all the previously entered data -- $session object?

Perhaps that's not the best way? And as the form gets more complex or adds additional steps (bad UX aside) it would require more unique templates and code?

Or maybe there's a way to create one "order-stage" template which somehow gracefully handles the unique data needs and error checking for each page? Hanna code maybe?

I wonder if anyone has insights as to what might be a good approach. Thanks in advance.

[DaveP]

Just off the top of my head, I think I would look at using url segments (well a url segment), with one template dealing with all the steps by way of the form submitting to itself. So the page would be example.com/order/ and each step would be denoted by example.com/order/step2/, example.com/order/step3/ etc.

I agree that $session would probably be a good way to store the data as you build it up, and you would need to check that, at any given step, you have all the data you would expect at that point.

A progress indicator (working like a breadcrumb trail, but including 'greyed out' future steps) would help usability, both allowing the user to back up and showing them where they are in the process.

Smarter people than I will surely come up with better ideas (ajax, anyone?), but, as with almost everything in PW, there are almost as many solutions to every problem as there are people attempting to solve that problem. 

[netcarver]

Could the JS-driven form-to-wizard approach mentioned here work in your case?

[darrenc]

DaveP, yeah I've been looking at URL segments as a way to implement some A/B testing as well. I'll explore that more today since your suggestion seems so well received!

netcarver, the form I'm dealing with involves doing calculations, and checking, and logic between steps, which I suppose could be all done via AJAX. Either way it's a bit more involved and that js won't solve my issues, thanks though.

[mr-fan]

i don't setup something like this before but i think you could do this via a pagesetup, too and save the entries for each step...like

- frontendpage where the form is shown - get the current step via url segments or navigate with the pagestructure /myform/client-one/step1/

  -cliententry-one (as parent for the steps and maybe save the final result/calculations)

    -step1 (process step one and save entries)

    -step2 ^^

    -step3 ^^

   -cliententry-two(as parent for the steps)

    -step1 (process step one and save entries)

    -step2 ^^

    -step3 ^^

so all is saved in PW fields and could easy checked via PHP the form frontedpage shows via URL segment like DaveP wrotes or with the given pagetree the steps - with such a setup it should be even possible to navigate a step back or something....

just some newbee thoughts on this interesting usecase....maybe there is a way with the FormBuilder module from Ryan, too?

[darrenc]

mr-fan, are you responding to the A/B testing aspect of it? "cliententry-[one|two]" being one process or another randomly given to the user when they visit?

[darrenc]

Just to follow up to conclude the thread for someone who might search in the future, I've set it up in the following hierarchy:

• order
  • order form A
    • step1
    • step2
    • step3
  • order form B
    • step1
    • step2
    • step3
    • step4
    • step5
  • ​order form N
    • ​stepN

"order" is the master page (and template) that handles everything via URL segments, and lots of error checking. All of the sub-structure is simply data and organization, no template files for any of the pages and they cannot be accessed directly via the front end.

A/B testing is handled through a page-reference field in the order template which allows the client to pick one, or many, order forms to be tested. If there are multiple, a new user is silently assigned a random order form based on that field and stored in $session. Using urlSegments, if a user goes to /order/step2/ the proper page is shown based on that session variable which dictates whether the user should get "step2" of order form A or B.

Beyond that all the tracking is handled via analytics JS using flags. Set by variables output by PHP, they reveal which path the user was on, and how far they got. eg: 

{
    path : 'order-form-a',
    distance : 'step4'
}

I think it's a good solution, so hopefully the design withstands the test of time. Thanks for the guidance!