Como Criar Formulário Com Barra De Progresso Em jQuery

Hoje, criei um formulário com jQuery com uma barra a indicar o porgresso, dado que se trata dum processo com 2 passos até que o usuário submeta o formulário.

A barra de progresso ajuda o usuário a saber em que estado está o processo de submissão do formulário e quantos passos ainda é necessário completar.

Portanto, trata-se dum script espectacular que estou certo que você vai apreciar.

Eu uso com frequência formulários com jQuery para obter um visual com estilo e atractivo. Espero que você goste do script. Obrigado!

Demo Como Criar Formulário Com Barra De Progresso Em jQuery

Pode efectuar o download do código usado neste tutorial no fim.

Base De Dados MySQL



CREATE TABLE IF NOT EXISTS `jquery_forms` (
  `id` int(11) NOT NULL,
  `name` varchar(200) NOT NULL,
  `email` varchar(200) NOT NULL,
  `url` varchar(200) NOT NULL,
  `message` varchar(250) NOT NULL,
  `phone` varchar(100) NOT NULL,
  `fax` varchar(100) NOT NULL,
  `city` varchar(100) NOT NULL,
  `address` varchar(250) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

Código jQuery

Aqui está o código jQuery:


  $(document).ready(function(){  
  
  $('#Send').click(function() {  
    
    $("#Back").after('<img  src="load.gif" id="loader" />');
    
    // submit
    $.post("posts.php?"+$("#MYFORM").serialize()+'&'+$("#MYFORM").serialize(), {
      
    }, function(response){
    
      $("#loader").hide();
      
      $('#MYFORM_2').fadeOut('fast');
      
      $('#bar').animate( {
        width: '348px',
        opacity: 1,
        left: '0px'
      } );
    
      $("#alert").html('Thanks ! Registration has been completed.').fadeIn('slow');
      
      clear_form();
      
    });
      
    return false;
  });
  
  $('#Next').click(function() {
    
    var nameVal = $("#name").val();
    if(nameVal == '')
    {
      $("#name").css("border-color", '#ff0000');
      return false
    }
    else
    {
      $("#name").css("border-color", '#CCCCCC');
    }
    
    /// email validation
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    var emailaddressVal = $("#email").val();
    
    if(emailaddressVal == '')
    {
      $("#email").css("border-color", '#ff0000');
      return false;
    }
    else if(!emailReg.test(emailaddressVal))
    {
      $("#email").css("border-color", '#ff0000');
      return false;
    }
    else
    {
      $("#email").css("border-color", '#CCCCCC');
    }
    
    /// url validate
    var urlVal= $("#url").val();
    
    if(urlVal != 'http://')
    {
      if(!isUrl(urlVal))
      {
        $("#url").css("border-color", '#ff0000');
        return false;
      }
      else
      {
        $("#url").css("border-color", '#CCCCCC');
      }
    }
    
    $('#MYFORM').fadeOut('fast');
    $('#MYFORM_2').fadeIn('slow');
    
    $('#bar').animate( {
      width: '176px',
      opacity: 1,
      left: '0px'
    } );
    
  });
  
  $('#Back').click(function() {
    
    $('#MYFORM_2').fadeOut('fast');
    $('#MYFORM').fadeIn('slow');
    
    $('#bar').animate( {
      width: '0px',
      opacity: 1,
      left: '0px'
    } );
    
  });
  
  function isUrl(s) {
    var regexp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/
    return regexp.test(s);
  }
  
  function clear_form()
  {
    $("#name").val('');
    $("#email").val('');
    $("#url").val('');
    $("#message").val('');
  }
});

HTML

Aqui está o código HTML:


<div id="wrap">
    
      <label style="width:145px;" class="percentage"> 0% </label> <label style="width:148px;" class="percentage"> 50% </label>
      <label style="width:20px;" class="percentage"> 100% </label>
      
      <br clear="all" />
      
      <div id="barOuter"><div id="bar"></div></div>
      
      <br clear="all" />
      
      <div id="alert" align="center"></div>  
          
      <form action="#" name="MYFORM" id="MYFORM">
        
        <label>Name</label>
        <input name="name" size="33" type="text" id="name" />
        
        <br clear="all" />
        
        <label>Email</label>
        <input name="email" size="33" type="text" id="email" />
        <br clear="all" />
        
        <label>URL</label>
        <input name="url" size="33" type="text" id="url" value="http://" />
        
        <br clear="all" />
        
        <label>Bio</label>
        
        <br clear="all" />
        
        <textarea id="message" name="message"></textarea>
        
        <br clear="all" /><br clear="all" />
        
        <input value="Next Step" type="button" id="Next" />
    
      </form>
      
      <form action="#" name="MYFORM_2" id="MYFORM_2">
        
        <label>Phone</label>
        <input name="phone" size="33" type="text" id="phone" />
        
        <br clear="all" />
        
        <label>Fax</label>
        <input name="fax" size="33" type="text" id="fax" />
        <br clear="all" />
        
        <label>City</label>
        <input name="city" size="33" type="text" id="city">
        
        <br clear="all" />
        
        <label>Address</label>
        
        <br clear="all" />
        
        <textarea id="address" name="address"></textarea>
        
        <br clear="all" /><br clear="all" />
        
        <input value="Submit" type="button" id="Send" />
        <input value="Go Back" type="button" id="Back" />
    
      </form>
      
    </div>
    
    
  </div>

Código CSS

Aqui está o CSS:



body{
  /* Setting default text color, background and a font stack */
  color:#eeeeee;
  font-size:13px;
  background: #1b232a;
  font-family:Arial, Helvetica, sans-serif;
}
#MYFORM {
  background:#f1f1f1;
  border:1px solid #DFDFDF;
  text-align:left;
  overflow:hidden;
  padding:20px 15px 0px;
  width:320px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

#MYFORM_2 {
  background:#f1f1f1;
  border:1px solid #DFDFDF;
  text-align:left;
  overflow:hidden;
  padding:20px 15px 20px;
  display:none;
  width:320px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

#div-comments{width:670px;}
.each-comment{
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  margin-bottom:4px; padding:5px;
  border:1px solid #DFDFDF;
  }

img.avatar_img{ float:left;}
.comments_body a{ color:#CC0000; font-weight:bold;}
.comments_body{ float:left; width:540px; padding:0px 7px 7px 7px; text-align:justify; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#333333}
.comments_body b{ color:#CC0000; font-weight:bold;}

#div-comments{ width:670px; text-align:left}
.comment-date{ font-style:italic; color:#666666}

#heading
{
  font-family:Georgia, "Times New Roman", Times, serif;
  font-size:56px;
  color:#CC0000;        
}

body{ font-family:Georgia, "Times New Roman", Times, serif; font-size:14px}
#wrap{
  background:#f1f1f1;
  border:1px solid #DFDFDF;
  text-align:left;
  overflow:hidden;
  padding:10px 15px 20px;color:#666666;
  width:350px;
  height:380px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
#barOuter{
  height:20px; border:1px solid #DFDFDF;
  
}
.error{ color:#CC0000; font-size:12px; margin:4px; font-style:italic; width:200px;}
img#loader{ margin:4px;}
.success{ color:#009900; height:12px; font-size:12px; margin:4px; font-style:italic; width:200px;}

img#refresh{
  float:left;
  margin-top:30px;
  margin-left:4px;
  cursor:pointer;
}

#name,#email,#url,#city,#phone,#fax{float:left;margin-bottom:3px; margin-left:8px; height:20px; border:#CCCCCC 1px solid;}

#message,#address{ width:300px; height:150px;float:left; margin-left:9px;margin-bottom:3px; border:#CCCCCC 1px solid;}

label.percentage{font-size:10px; padding-top:3px;}

label{ float:left; color:#666666; width:70px; text-align:left; padding-left:8px; padding-bottom:3px;}

#bar{ width:1px; background-color:#c93c0a;height:20px;}

#Send{ border:#0B6FA4 solid 1px; float:right; background:#0B6FA4; margin-left:5px;color:#FFFFFF; padding:5px; margin-right:6px; cursor:pointer;}
#Back{ border:#A3B335 solid 1px; float:right; background:#A3B335; margin-left:5px;color:#FFFFFF; padding:5px; margin-right:6px; cursor:pointer;}
#Next{border:#0B6FA4 solid 1px; float:right; background:#0B6FA4; margin-left:5px;color:#FFFFFF; padding:5px; margin-right:6px; cursor:pointer;}

Você vai encontrar um ficheiro dbcon.php onde poderá escrever a query para escrever os dados submetidos na base de dados. Neste tutorial, não adicionei a query para escrever na base de ados, mas você pode fazer isso.

Download do código usado neste tutorial: Como Criar Formulário Com Barra De Progresso Em jQuery

Be Sociable, Share!

1 Comentários

  1. Nuno

    Como ponho a query para escrever na base de dados?

Participa! Comenta...