Enlace

Divide un formulario en varios pasos

Stepy Form es un plugin para Jquery que permite dividir formularios largos, en pasos más pequeños.

Muchas veces en nuestras aplicaciones web, necesitamos pedir cierta información de los usuarios para que se registren en nuestro sitio, para que publiquen contenido y muchas otras situaciones.

Sin embargo, el problema viene cuando la cantidad de información que necesitamos pedirle al usuario es considerablemente alta. Los usuarios muchas veces empezamos a llenar un formulario, pero cuando damos un vistazo y nos damos cuenta de que es bastante largo, hay una alta probabilidad de que abandonemos la página.

Una de las soluciones posibles a esto es mostrarle al usuario grupos de información a llenar más cortos. Hay muchos criterios sobre si es correcto distribuir un formulario en varias páginas (o varios pantallas o como se quiera llamarles), pero no es el objetivo de este post analizar si es correcto o no. Personalmente creo que depende mucho de cada circunstancia y de como lo apliquemos, de hecho grandes y consolidadas empresas en la web echan mano de esta técnica cuando es necesario.

Entrando en materia, si lo que necesitas es dividir tu formulario en varios pasos, pongo a disposición de los interesados un plugin para jQuery para hacerlo de manera fácil. El plugin, llamado Stepy Form, es de mi autoría y pueden encontrarlo en uno de los repositorios de mi cuenta de Github.

Su uso es muy sencillo, debes tener incluido en tu HTML jQuery, Jquery UI y Stepy Form. Una vez que tengas listo tu formulario, solo secciona los campos que quieres mostrar en cada paso, poniéndolos dentro de divs. Cada div debe tener asignada la clase “stepy-step”.

Y finalmente, para que el Stepy Form haga su trabajo debes inicializarlo de la siguiente forma.

Eso es todo! Ahora solo se muestra la primera sección o paso del formulario y podrás ver los links que permiten desplazarse por los pasos del formulario. Más información de opciones y configuración del plugin en el repositorio en Github. Ir a Stepy Form.

One thought on “Divide un formulario en varios pasos

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *