Formulario con pasos Bootstrap. Esta publicación ayuda a entender el envío de formularios de varios pasos con la barra de progreso usando PHP, jQuery y BootStrap 3.
La forma de varios pasos es una funcionalidad muy útil cuando los datos de entrada del usuario son demasiados y necesitan dividirse en partes. Dividiremos las entradas de los usuarios en pasos y asociaremos estos pasos entre sí usando la navegación como pestaña o pasos.
Formularios con múltiples pasos en PHP
Detallaremos algunas inquietudes, ventajas y pasos que debemos de implementar.
Ventajas de usar este tipo de formularios
- Es muy dinámico a la hora de registrar usuarios
- Logra mayor cantidad de registros porque no satura al usuario
- Disminuye la tasa de rebote por parte del usuario
- No consume muchos recursos del servidor
Recopilaremos todos estos datos de pasos y enviaremos todas las entradas en el paso final del formulario HTML.
Dividir formulario en pasos: Pasos a seguir
- Crearemos varios pasos mediante la interfaz de usuario mediante BootStrap.
- Navegación del formulario de paso siguiente y anterior mediante jQuery.
- Publique todos los pasos de los datos del formulario y entre en el archivo action.php.
Formulario con pasos Bootstrap usando PHP
Lo que haremos es dividir un formulario en pasos usando PHP y nos permitirá crear un formulario de varios pasos mediante la librería de estilos BootStrap. A continuación, veremos 4 pasos segmentados para lograr nuestro objetivo.
a) Paso 1: Crearemos el archivo index.php
Primero necesitamos probar este ejemplo y crearemos un fichero llamado index.php que contendrá la interfaz gráfica y las librerías necesarias. Veamos las librerías.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Como pueden apreciar estamos usando la ruta cdn para jQuery y BootStrap. También podemos usar estas bibliotecas de manera local y reemplazarlas con la ruta de acceso. Sin embargo, usar un CDN nos permitirá optimizar nuestro servidor al no consumir recursos.
b) Paso 2: Creación de la interfaz de usuario HTML5
Aquí, crearemos un DIV con la clase «progress» que será el artífice para la animación del paso a paso. Veamos el código de este paso.
<div class="container"> <h1>Registro de usuarios paso a paso</h1> <div class="progress"> <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div> </div> <form id="regiration_form" novalidate action="action.php" method="post"> <fieldset> <h2>Paso 1: Crear su cuenta</h2> <div class="form-group"> <label for="email">Email</label> <input type="email" class="form-control" id="email" name="data[email]" placeholder="Email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="password" placeholder="Password"> </div> <input type="button" name="data[password]" class="next btn btn-info" value="Siguiente" /> </fieldset> <fieldset> <h2> Paso 2: Agregar detalles personales</h2> <div class="form-group"> <label for="fName">Nombres</label> <input type="text" class="form-control" name="data[fName]" id="fName" placeholder="Nombres"> </div> <div class="form-group"> <label for="lName">Apellidos</label> <input type="text" class="form-control" name="data[lName]" id="lName" placeholder="Apellidos"> </div> <input type="button" name="previous" class="previous btn btn-default" value="Previo" /> <input type="button" name="next" class="next btn btn-info" value="Siguiente" /> </fieldset> <fieldset> <h2>Paso 3: Información de contacto</h2> <div class="form-group"> <label for="mob">Numero Celular</label> <input type="text" class="form-control" id="mob" name="data[mob]" placeholder="Numero Celular"> </div> <div class="form-group"> <label for="address">Direccion</label> <textarea class="form-control" name="data[address]" placeholder="Direccion"></textarea> </div> <input type="button" name="previous" class="previous btn btn-default" value="Previo" /> <input type="submit" name="submit" class="submit btn btn-success" value="Enviar" id="submit_data" /> </fieldset> </form> </div>
Observen, hemos creado 3 pasos usando el control de conjunto de campos HTML para cada paso, por lo que cada vez que el usuario hace clic en el botón siguiente y anterior. Deslizaremos el conjunto de campos en función del paso actual.
Esto convertirá nuestro formulario en un sistema dinámico para el manejo de la información.
c) Paso 3: Agregar la clase CSS
Esta clase es muy importante y debemos de agregarlo en la sección del archivo index.php para ocultar otros pasos excepto el primer paso. Por lo tanto, el código del estilo como pueden apreciar tiene la propiedad «display:none» que quiere decir que está en modo oculto y se activara de acuerdo a los botones previo y siguiente.
<style type="text/css"> #regiration_form fieldset:not(:first-of-type) { display: none; } </style>
d) Paso 4: Usaremos jQuery para ocultar y mostrar
Nos apoyaremos en jQuery para lograr las animaciones, porque este lenguaje será el encargado de cambiar los atributos de las divisiones de la interfaz gráfica. Sin embargo, el conjunto de campos HTML para la navegación entre pasos, necesita agregar código debajo en el pie de página del archivo index.php.
$(document).ready(function(){
var current = 1,current_step,next_step,steps;
steps = $("fieldset").length;
$(".next").click(function(){
current_step = $(this).parent();
next_step = $(this).parent().next();
next_step.show();
current_step.hide();
setProgressBar(++current);
});
$(".previous").click(function(){
current_step = $(this).parent();
next_step = $(this).parent().prev();
next_step.show();
current_step.hide();
setProgressBar(--current);
});
setProgressBar(current);
// Change progress bar action
function setProgressBar(curStep){
var percent = parseFloat(100 / steps) * curStep;
percent = percent.toFixed();
$(".progress-bar")
.css("width",percent+"%")
.html(percent+"%");
}
});
e) Paso 5: Crear el archivo action.php
Este archivo es el final y será el encargado de imprimir los datos del formulario y en todo caso almacenar la información en una base de datos por ejemplo MySQL.
Aquí les dejo el contenido de dicho archivo.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <div class="container" style="padding:50px 50px;"> <div class="alert alert-info" role="alert"> <strong>Resultados:</strong> Mostramos los datos enviados del formulario. </div> <div class="row well alert alert-success"><?php echo "<pre>";print_R($_POST);?></div> </div>
Por último, después de completar todos los pasos el usuario hará clic en el botón Enviar. Publicaremos todos los datos de pasos y enviaremos al archivo action.php usando el atributo de acción de formulario.
En este ejemplo imprimiremos modo array para mostrar resultados y como dijimos líneas arriba, tranquilamente pueden ser almacenados en una base de datos, finalizando con el registro del usuario.
Formulario con pasos Bootstrap: CONCLUSION
Como hemos podido apreciar en este artículo hemos aprendido a separar en varios pasos el registro de usuarios. Sin embargo, el uso de esta estrategia no es por mera casualidad, por estilo o porque se ve muy bonito.
La verdadera estrategia es no cansar al usuario con tremendos formularios que valgan verdadera terminan con el abandono del llenado de información y al final conlleva a la pérdida de clientes si se trata de una página de comercio electrónico.
Como han podido apreciar las grandes compañías como Google, Microsoft, Twitter, Facebook, por alguna razón usan registro de usuarios por pasos. Por lo tanto, ellos ya saben el comportamiento del usuario y tratan en lo más mínimo aburrir al consumidor final (usuario).
Por tal motivo, en esta entrada tocamos este tema para que vean lo sencillo que es implementar un Formulario paso a paso con BootStrap.
Puede visualizar una demostración o descargar el código fuente del artículo en los siguientes vínculos.
Demostración
