En este artículo veremos cómo crear un formulario de múltiples pasos con una barra de progreso utilizando PHP, jQuery y Bootstrap. Los formularios de múltiples pasos son muy útiles cuando existen demasiados campos para un solo formulario. Dividiremos los campos input en diferentes pasos y asociaremos dichos pasos a otros utilizando elementos de navegación como los tabs o pills.
Reuniremos todos esos datos que hemos ido recogiendo paso a paso y haremos submit de todos ellos en el paso final de nuestro formulario de múltiples pasos. En este caso no voy a utilizar ningún método de AJAX para hacer submit de los datos, solo utilizaré PHP. Tú puedes utilizar AJAX si quieres mediante jQuery.
Esto es la estructura de lo que haremos en este tutorial
- Crearemos la estructura de nuestro formulario de múltiples pasos utilizando Bootstrap
- Implementaremos la navegación entre pasos utilizando jQuery
- Enviaremos todos los datos de nuestro formulario en el último paso al archivo action.php
Ejemplo de formulario de múltiples pasos utilizando jQuery y Bootstrap
Paso 1: Crearemos el archivo index.php. Aquí incluiremos todo el HTML necesario para que se muestre nuestro formulario. Para ello debemos incluir las librerías de Bootstrap y de jQuery. Sin ellas, nada de esto funcionará.
<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>
Para este tutorial utilizaré las rutas de cdn y googleapi para el jQuery y Boostrap. Si así lo prefieres puedes tener esas librerías en local y reemplazar dichas rutas con las tuyas.
Paso 2: Implementamos el código HTML para todos los pasos de nuestro formulario de múltiples pasos, y lo añadimos al archivo index.php, como te he comentado anteriormente.
<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>Step 1: Create your account</h2>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" name="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="password" class="next btn btn-info" value="Next" />
</fieldset>
<fieldset>
<h2> Step 2: Add Personnel Details</h2>
<div class="form-group">
<label for="fName">First Name</label>
<input type="text" class="form-control" name="fName" id="fName" placeholder="First Name">
</div>
<div class="form-group">
<label for="lName">Last Name</label>
<input type="text" class="form-control" name="lName" id="lName" placeholder="Last Name">
</div>
<input type="button" name="previous" class="previous btn btn-default" value="Previous" />
<input type="button" name="next" class="next btn btn-info" value="Next" />
</fieldset>
<fieldset>
<h2>Step 3: Contact Information</h2>
<div class="form-group">
<label for="mob">Mobile Number</label>
<input type="text" class="form-control" id="mob" placeholder="Mobile Number">
</div>
<div class="form-group">
<label for="address">Address</label>
<textarea class="form-control" name="address" placeholder="Communication Address"></textarea>
</div>
<input type="button" name="previous" class="previous btn btn-default" value="Previous" />
<input type="submit" name="submit" class="submit btn btn-success" value="Submit" />
</fieldset>
</form>
[/pre]
i have created 3 steps using HTML field-set control for each step, so whenever user click next and previous button we will slide fieldset based on current step.
<strong>Step 3:</strong> Add css class in <code><head></code> section of <code>index.php</code> file to hide <code>fieldset</code> except first <code>fieldset</code>.
[code type=php]
<style type="text/css">
#regiration_form fieldset:not(:first-of-type) {
display: none;
}
</style>
Paso 3: Utilizaremos jQuery para esconder y mostrar el fieldset de HTML para la navegación entre pasos. Debes añadir el siguiente código dentro del footer 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+"%");
}
});
Paso 4: Creamos el archivo action.php y le añadimos el snippet de código que puedes ver más abajo.
<div class="row well alert alert-success"><?php echo "<pre>";print_R($_POST);?></div>
Por lo tanto, cuando el usuario finalice todos los pasos y haga clic en el botón submit, se mostrarán todos los datos introducidos por pantalla ya que es el objetivo del archivo action.php. Tu puedes aprovechar el fichero action.php para operaciones más complejas, como por ejemplo, almacenar la información recabada en el formulario en una base de datos.
Fuente: phpflow.com