SummArg | Cursos y recursos para webmasters

21/08/2013

Barra de progreso al completar formulario con jQuery Progression

Progression.js es un plugin jQuery destinado a añadir un indicador de progreso a tus formularios, mejorando la experiencia del usuario especialmente cuando se trata de formularios largos y tediosos.

Al clickear en cada campo se muestra una caja con una animación sutil y moderna, que muestra tanto el progreso del formulario como un mensaje personalizado para cada input. El número de progreso se genera automáticamente en virtud de la cantidad de campos que encuentra para completar dentro del formulario activo.

progression

Para utilizarlo primero descargamos el archivo y colocamos las correspondientes llamadas entre etiquetas <head> en nuestro proyecto:

<link href='progression.css' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="progression.js"></script>

Luego procedemos a crear el formulario insertando en cada campo el atributo data-progression y data-helper. Este último nos ayudará a generar tooltips que guiarán al usuario a lo largo del proceso de completar el formulario.

<form id="myform">
    <p>
    	<label for="">Name</label>
    	<input data-progression="" type="text" data-helper="Ayudar a los usuarios en el proceso de completar el formulario" name="name" value="" placeholder="" />
    </p>
  </form>

Y finalmente procedemos a inicializar el plugin. Podemos ver un listado de opciones, orientadas a darle un estilo mas personalizado al box de progreso, en la página oficial.

<script>
$(document).ready(function ($) {
    $("#myform").progression();
});
</script>

Progression.js

Dejar un comentario