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('
');
// 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:
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
(1 votes, average: 4.00 out of 5)
One Response
Como ponho a query para escrever na base de dados?