Cómo crear un formulario de múltiples pasos utilizando jQuery, Bootstrap y PHP

Los formulario de múltiples pasos son cada vez más y más populares debido a que son muy amigables para los usuarios. Mediante este tipo de formularios, el usuario puede completar formularios largos sin cansarse debido a que están segmentados en distintos pasos. Es decir, si el formulario es grande y contiene demasiados campos, podemos dividirlo en varios formularios más pequeños para que a los usuarios no se les atragante. Por eso, en este tutorial veremos cómo implementar un formulario de múltiples pasos con barra de progreso utilizando jQuery. Construiremos el formulario mediante la librería Bootstrap y gestionaremos los distintos pasos utilizando jQuery. Por último, simplemente decir que almacenaremos los datos enviados por los usuarios en una base de datos MySQL.

Habiendo dicho esto, ¡vamos con el proyecto!

Antes de empezar, vamos a echar un vistazo a la estructura de archivos que vamos a utilizar.

  • db_connect.php
  • index.php
  • multi_form_action.php
  • form.js

Crear la tabla de la base de datos

En este ejemplo, crearemos un formulario de registro en el que ir dando de alta usuarios en una base de datos. Logicamente, para ello necesitaremos una tabla. Así que, crearemos la tabla user para almacenar la información acerca de los distintos usuarios en nuestra base de datos MySQL.

CREATE TABLE IF NOT EXISTS `user` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`email` varchar(100) NOT NULL,
`password` varchar(100) NOT NULL,
`first_name` varchar(100) NOT NULL,
`last_name` varchar(100) NOT NULL,
`mobile` int(11) NOT NULL,
`address` text NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

Conectar a la base de datos

Crearemos el fichero db_connect.php para establecer la conexión con la base de datos MySQL y almacenar la información de los usuarios.

<?php
/* Database connection start */
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "demos";
$conn = mysqli_connect($servername, $username, $password, $dbname);
if (mysqli_connect_errno()) {
printf("Connect failed: %sn", mysqli_connect_error());
exit();
}
?>

Diseñando el formulario

Diseñaremos nuestro formulario y la barra de progreso utilizando Bootstrap, en el fichero index.php.

<div class="container">
<h2>Example: Multi Step Form using jQuery, Bootstrap and PHP</h2>
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="alert alert-success hide"></div>
<form id="register_form" novalidate action="form_action.php" method="post">
<fieldset>
<h2>Step 1: Add Account Details</h2>
<div class="form-group">
<label for="email">Email address*</label>
<input type="email" class="form-control" required id="email" name="email" placeholder="Email">
</div>
<div class="form-group">
<label for="password">Password*</label>
<input type="password" class="form-control" name="password" id="password" placeholder="Password">
</div>
<input type="button" class="next-form btn btn-info" value="Next" />
</fieldset>
<fieldset>
<h2> Step 2: Add Personal Details</h2>
<div class="form-group">
<label for="first_name">First Name</label>
<input type="text" class="form-control" name="first_name" id="first_name" placeholder="First Name">
</div>
<div class="form-group">
<label for="last_name">Last Name</label>
<input type="text" class="form-control" name="last_name" id="last_name" placeholder="Last Name">
</div>
<input type="button" name="previous" class="previous-form btn btn-default" value="Previous" />
<input type="button" name="next" class="next-form btn btn-info" value="Next" />
</fieldset>
<fieldset>
<h2>Step 3: Add Contact Information</h2>
<div class="form-group">
<label for="mobile">Mobile*</label>
<input type="text" class="form-control" name="mobile" id="mobile" 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-form btn btn-default" value="Previous" />
<input type="submit" name="submit" class="submit btn btn-success" value="Submit" />
</fieldset>
</form>
</div>

Utilizaremos algo de CSS en el tag head para ocultar formularios dentro de <fieldset> y así mostrarlos a nuestro antojo mediante jQuery.

<style type="text/css">
#register_form fieldset:not(:first-of-type) {
display: none;
}
</style>

Múltiples pasos con jQuery

En el fichero de Javascript form.js, gestionaremos la funcionalidad de avanzar y retroceder en nuestro formulario utilizando botones mediante jQuery. Por supuesto, también controlaremos el envío del formulario, así como la validación de sus campos.

$(document).ready(function(){
var form_count = 1, previous_form, next_form, total_forms;
total_forms = $("fieldset").length;
$(".next-form").click(function(){
previous_form = $(this).parent();
next_form = $(this).parent().next();
next_form.show();
previous_form.hide();
setProgressBarValue(++form_count);
});
$(".previous-form").click(function(){
previous_form = $(this).parent();
next_form = $(this).parent().prev();
next_form.show();
previous_form.hide();
setProgressBarValue(--form_count);
});
setProgressBarValue(form_count);
function setProgressBarValue(value){
var percent = parseFloat(100 / total_forms) * value;
percent = percent.toFixed();
$(".progress-bar")
.css("width",percent+"%")
.html(percent+"%");
}
// Handle form submit and validation
$( "#register_form" ).submit(function(event) {
var error_message = '';
if(!$("#email").val()) {
error_message+="Please Fill Email Address";
}
if(!$("#password").val()) {
error_message+="<br>Please Fill Password";
}
if(!$("#mobile").val()) {
error_message+="<br>Please Fill Mobile Number";
}
// Display error if any else submit form
if(error_message) {
$('.alert-success').removeClass('hide').html(error_message);
return false;
} else {
return true;
}
});
});

Guardar la información en base de datos

Por último, en multi_form_action.php, guardamos los valores enviados en el formulario en la tabla user de nuestra base de datos MySQL.

<?php
if (isset($_POST['submit'])) {
$email = mysqli_real_escape_string($conn, $_POST['email']);
$password = mysqli_real_escape_string($conn, $_POST['password']);
$first_name = mysqli_real_escape_string($conn, $_POST['first_name']);
$last_name = mysqli_real_escape_string($conn, $_POST['last_name']);
$mobile = mysqli_real_escape_string($conn, $_POST['mobile']);
$address = mysqli_real_escape_string($conn, $_POST['address']);
if(mysqli_query($conn, "INSERT INTO user(email, pass, first_name, last_name, mobile, address) VALUES('".$email."', '" . $password . "', '". $first_name."', '".$last_name."', '".$mobile."', '". $address."')")) {
echo "You're Registered Successfully!";
} else {
echo "Error in registering...Please try again later!";
}
}
?>

Fuente: phpzag.com

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP