SummArg | Cursos y recursos para webmasters

20/03/2011

Cómo convertir cualquier formulario en un formulario por pasos con jQuery?

El plugin FormToWizard nos permite convertir cualquier formulario común y corriente, en un lujoso formulario dividido por pasos para mayor comodidad del usuario.

Descargar | Demo

Implementación

El primer paso es dividir el formulario que actualmente tenemos en varios fieldsets, que serán equivalentes a cada uno de los pasos del form.

<form id="SignupForm" action="">
    <fieldset>
        <-- input fields -->
    </fieldset>
    <fieldset>
        <-- input fields -->
    </fieldset>
    <fieldset>
        <-- input fields -->
    </fieldset>
</form>

Ahora insertamos el plugin entre etiquetas <head> y lo inicializamos. Recuerden hacer la llamada correspondiente a jQuery.

<script type="text/javascript" src="ruta/formToWizard.js"></script>
<script>
$("#SignupForm").formToWizard();
</script>

Nuestro formulario ya quedó listo!

Este plugin es compatible con todos los navegadores populares del mercado, incluyendo IE6, y pesa tan solo 2,3kb sin compresión.

Dejar un comentario