Blog de sonicbyte
Opinión y tendencias sobre negocios, diseño y avances en Internet
Multistep form using Mootools
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.
To validate the form in the client side, we use the FormCheck’s MooFloor library, to perform the validation each stage is actually a form. This validator has become our favorite throughout the projects. This library requires Mootools ‘core 1.2.4′ and from ‘more 1.2.4.4′ only the Fx.Scroll class. We also include a file with the validator phrases in spanish unless you want tips to appear in English, the default language. You must include a CSS file to correctly display the tips of the validator. This file is downloaded along with the javascript plugin in the same page. Therefore, the inclusion of files to make our multistep form works up to now shall be as follows:
<script type="text/javascript" src="js/mootools-1.2.5.1-more.js"></script>
<script type="text/javascript" src="js/formcheck/lang/es.js"></script>
<script type="text/javascript" src="js/formcheck/formcheck.js"></script>
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:
<script type="text/javascript" src="ruta-archivos-js/slideshow/SlideShow.js"></script>
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:
<div id="etapa_1">
<form id="form_1" action="#">
....
</form>
</div>
<div id="etapa_2">
<form id="form_2" action="#">
....
</form>
</div>
.
.
<div id="etapa_n">
<form id="form_n" action="#">
....
</form>
</div>
</div>
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:
submit: false
});
new FormCheck('form_2', {
submit: false
});
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:
new FormCheck('form_1', {
submit: false,
onValidateSuccess: function () {
slideshow.show($('etapa_2'), {
transition: 'pushLeft'
});
}
});
new FormCheck('form_2', {
submit: false,
onValidateSuccess: function () {
slideshow.show($('etapa_3'), {
transition: 'pushLeft'
});
}
});
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:
new FormCheck('form_1', {
submit: false,
onValidateSuccess: function () {
slideshow.show($('etapa_2'), {
transition: 'pushLeft'
});
}
});
new FormCheck('form_2', {
submit: false,
onValidateSuccess: function () {
slideshow.show($('etapa_3'), {
transition: 'pushLeft'
});
}
});
..
new FormCheck('form_n', {
submit: false,
onValidateSuccess: function () {
var datos = $('form_1').toQueryString() + '&' + $('form_2').toQueryString() + '&'...'&' + $('form_n').toQueryString();
new Request({
url: 'url_de_la_accion',
data: datos,
onSuccess: function (result) {
// acción resultado de el envío
}
}).send();
}
});
Or checkout all the code at github
Hope you enjoy the post. Cheers.
-
ajay
