webmaster

Como Criar Formulário Com Barra De Progresso Em jQuery

Olá, Somos criadores de conteúdo apaixonados por web design, programação, criação de websites e tecnologias digitais. O nosso website está online! Explore a nova versão beta, onde terá acesso a novos recursos e melhorias. A sua experiência e feedback são muito importantes para nós! Novos artigos, todas as semanas! Fique atento.
Artigos SEO

Artigos SEO

Search Engine Optimization

Artigos WordPress

Criação de websites.

Tutoriais

Ensino numa série de passos simples

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('');

// 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 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 4.00 out of 5)

Deixe o seu comentário, participe!

One Response

Leave a Reply

Your email address will not be published. Required fields are marked *


Versão Beta

Estamos a mudar

Olá, Somos criadores de conteúdo apaixonados por web design, programação, criação de websites e tecnologias digitais. Ajudamos os nossos clientes a levar o conteúdo certo às pessoas certas, criando artigos e recursos que facilitam a criação e otimização de websites.

Artigos Populares

Guia Prático Sobre Segurança Do Joomla

Dicas para diminuir substancialmente o número de vetores de ataque ao Joomla! Proteja o seu trabalho!

Os Segredos Do Sucesso Na Internet

A responsabilidade. O querer. O erro e a experimentação. O social. A memória da internet. Ser quem você é.

38 Ideias Espetaculares Para Sites De Empresas

Encontre inspiração nestes 45 exemplos de sites de empresas para criar o site da sua empresa.