In our last e-commerce project we chose to use a multistep form for the checkout process. This decision was made to avoid the visitor to get tired with vast and endless forms with a lot of fields that discourage him of fulfilling them. In addition, the interface is nice and the effect as you go through the steps is also pleasant.
But one of the most important advantages is that the form validation is performed in each step, so that visitors can correct any wrong entered field without having to wait to complete all the steps. This gives flexibility to the process and generates confidence to the visitor.
For the transition effect between steps we use the SlideShow plugin by Ryan Florence. A plugin to make carousels fairly easy to implement and very extensible. The class requires Mootools core and the more Fx.Elements class, also the Loop class that it is downloaded from the same place of the SlideShow. Therefore two new lines are added to the file inclusion:
The next step is to create the structure of the form. To do this we create a DIV container that contains the different stages. Each stage will be a FORM which is contained in a DIV. Resulting in a structure like this:
In this post we do not explain how to validate the different types of fields, for it you can visit the MooFloor documents.
The next step is to instantiate a validator for each step, so that each form has its own instance of the validator. Class options should be changed a little from those of a traditional validation because we do not want to send the form in each step, instead, just go to the next form step.
So the validator instances have the following lines of code:
Instantiating this way each validator, the form is not sent but it performs the checking to verify that each field is correct.
The next step is to give the effect of transition to go to the next form step when the checking in the actual form is valid. To do this we must first instantiate the slideshow class and then tell each form what to do when the its own checking is valid:
We instantiate all the steps of the form until the last, that in our example is the form ‘n’. By validating the form ‘n’ we should send all the data from the different steps/forms, in our example we will send it through an ajax call. We collect information from the various steps to be sent as the DATA parameter in the call:
Or checkout all the code at github
Hope you enjoy the post. Cheers.