Formulario

[jeffamoso]

Sou iniciante em html e não manjo muito de php mas gostei deste formulário "http://www.teslabosch.com.br/index.php?p=42" e gostaria de saber como ele funciona, se alguém me ajuda a fazer um igual, se puder me explique como ele funciona, muito obrigado.

[rickayron]

Sou iniciante em html e não manjo muito de php mas gostei deste formulário "http://www.teslabosch.com.br/index.php?p=42" e gostaria de saber como ele funciona, se alguém me ajuda a fazer um igual, se puder me explique como ele funciona, muito obrigado.

é mais ou menos isso

<style type='text/css'>

.InputOver

{

border-bottom:2px solid #D0D0D0;

border-right:2px solid #D0D0D0;

border-left:2px solid #D0D0D0;

border-top:2px solid #0000FF;

border-color:#0000FF;

}

.inputOut

{

border-bottom:2px solid #D0D0D0;

border-right:2px solid #D0D0D0;

border-left:2px solid #D0D0D0;

border-top:2px solid #D0D0D0;

border-color:#D0D0D0;

}

</style>

<form name='form' id='form' action='pagina.php' method='get ou post'>

<label> Nome</label><Br/>

<label> <input type='text' name='nome' class='inputOut'; OnFocus="this.className='InputOver'" Onblur="this.className='inputOut'" id='nome' size='30'></label>

essa duvida está mais direcionada a html e css, aguando mover da moderação pois la você terá melhores respostas até mais

[jeffamoso]

Ok, velew rickayron por dar atenção aos iniciantes.

Consegui copiar o codigo css e js e fazer testes online (mas é para apenas para saber como funciona este formulário) esta validando os campos mas não envia, queria saber o que falta configurar para ele enviar o formulario, obrigado a todos que me ajudarem.

[*FIT*]

Você quer enviar o formulário por email, ou gravar em uma base de dados?

[jeffamoso]

Enviar por email.

[*FIT*]

Da uma lida ;)

http://forum.codigofonte.net/lofiversion/i....php/t6109.html

Abraços

[jeffamoso]

Da uma olhada, já fiz isto: http://www.cftvportoes.com.br/teste/contato.htm , só não envia.

[*FIT*]

Você está usando uma imagem como botão, essa imagem não dá o submit, para enviar o formulário será preciso o submit!

PS: Tem que lembrar de pedir pra mover o tópico!

[jeffamoso]

Você está usando uma imagem como botão, essa imagem não dá o submit, para enviar o formulário será preciso o submit!

Neste caso onde eu insiro o submit?

<a class="enviarcontato"><img src="layout/enviar.gif" alt="" border="0" /></a>

Obrigado.

[*FIT*]

http://scriptbrasil.com.br/forum/index.php?showtopic=35607

[jeffamoso]

Com a imagem que funciona como enviar ele valida os campos mas não envia, com o submit ele cria um novo botão ai sim envia mas não valida.

[*FIT*]

Manteve a mesma class?

[jeffamoso]

Manteve a mesma class?

Sim, mesmo assim não envia. To ficando mais doido ainda... rss...

[*FIT*]

Aonde está configurada essa classe? tem como postar aqui?

[jeffamoso]

Aonde está configurada essa classe? tem como postar aqui?

Verifique se estou certo, ache somente aqui:

../estilo.css

.c .contato .enviarcontato {

MARGIN-TOP: 3px; PADDING-LEFT: 215px; DISPLAY: block

... e em ...

../firesite.mim.js

$(function(){$('.error').hide();$('#erro').hide();$('input').focus(function(){$(this).css({"border":"1px solid #4164B9"})});$('input').blur(function(){$(this).css({"border":"1px solid #CCC"})});$('textarea').focus(function(){$(this).css({"border":"1px solid #4164B9"})});$('textarea').blur(function(){$(this).css({"border":"1px solid #CCC"})});$(".enviarnews").click(function(){var nome=$("#nome").val();if(nome==""){$("#nome").focus();return false;}var email=$("#email").val();if(/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/i.test(email)){}else{$("#email").focus();return false;}var dataString='nome='+nome+'&email='+email;$.ajax({type:"POST",url:"news_ok.php",data:dataString,success:function(){$('#news').html('<p><strong>E-mail cadastrado!<\/strong><\/p><img src="layout/ok.png" alt="" width="64" height="64" />').hide().fadeIn(500);}});return false;});$(".enviarcontato").click(function(){$('.error').hide();var nome=$("#cnome").val();if(nome==""){$("#cnome_erro").show();$("#cnome").focus();return false;}var email=$("#cemail").val();if(/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/i.test(email)){}else{$("#cemail_erro").show();$("#cemail").focus();return false;}var fone=$("#fone").val();if(fone==""){$("#fone_erro").show();$("#fone").focus();return false;}var mensagem=$("#mensagem").val();if(mensagem==""){$("#mensagem_erro").show();$("#mensagem").focus();return false;}var dataString='nome='+nome+'&email='+email+'&fone='+fone+'&mensagem='+mensagem;$.ajax({type:"POST",url:"contato_ok.php",data:dataString,success:function(){$('#formcontato').html('<div id="message"><img src="layout/ok.png"/><strong>Mensagem enviada!</strong><br/>Em breve responderemos.</div>').hide().fadeIn(500);}});return false;});});

Cara estou ficando mais confusi ainda, um formulario simples consigo fazer funcionar mas este não está dando certo...

Obrigado pela ajuda.

[rickayron]

você pode usar a imagem mesmo basta inserir um javascript no evento onclick

onclick='form.submit()'

até mais

post o codigo html o formulario voce colocou o action no form?

Editado Maio 12, 2010 por rickayron

[jeffamoso]

Segue o codigo original, ele está validando (não sei como, rss) mas não envia.

O que preciso mudar pra ele enviar para meu e-mail? Obrigado.

Endereço na web: http://www.cftvportoes.com.br/teste/contato2.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta http-equiv="content-language" content="pt-br" />

<meta name="charset" content="UTF-8" />

<meta name="title" content="" />

<meta name="url" content="www.cftvportoes.com.br" />

<meta name="description" content="" />

<meta name="keywords" content="" />

<meta name="autor" content="SOMBRA Site" />

<meta name="company" content="CFTV Portões Ltda." />

<meta name="revisit-after" content="5" />

<meta name="google-site-verification" content="" />

<link rev="made" href="mailto:sac@cftvportoes.com.br" />

<title>Portoes Auomaticos - Segurança Eletronica</title>

&lt;script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>

&lt;script type="text/javascript" src="js/jquery.swfobject.1-0-5.min.js"></script>

&lt;script type="text/javascript" src="js/facebox.min.js"></script>

&lt;script type="text/javascript" src="js/firesite.min.js"></script>

&lt;script type="text/javascript">

$(document).ready(function(){

$(".thumb").facebox();

});

</script>

<link rel="stylesheet" type="text/css" href="css/estilo.css" media="screen" />

<link rel="stylesheet" type="text/css" href="css/facebox.css" />

<link href="css/hand.css" rel="stylesheet" type="text/css" media="handheld" />

<style type="text/css">

<!--

body {

background-color: #143761;

background-repeat: repeat-x;

background-position: center top;

color: #666;

background-image: url(arquivos/fundo3.jpg);

}

h1 {

margin: 0px;

padding: 0px;

font-size: 18pt;

color: #ED1C24;

}

h2 {

margin: 0px;

padding: 0px;

font-size: 15pt;

color: #143761;

}

h3 {

margin: 0px;

padding: 0px;

font-size: 14pt;

color: #666;

}

.c .menu .menulayout {

background-image: url(arquivos/menu7.png);

}

.c .menu h2 {

border-bottom-color: #1F4B85;

color: #EC1F27;

}

.c .menu .links a {

border-bottom-color: #173863;

color: #FFF;

font-size: 16px;

text-shadow:0 2px 0px rgba(55, 55, 55, 0.2);

}

.c .menu .links a:hover {

background-color: #173863;

}

.c .topo .meio .conteudo {

background-image: url(arquivos/slogan.png);

background-repeat: no-repeat;

background-position: 5px 5px;

height: 160px;

}

.c .topo .meio .conteudo a .logo {

display: none;

}

.c .contato {height:490px;}.c .contato {height:490px;}-->

</style>

<link rel="icon" href="/favicon.ico" type="image/x-icon" />

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

</head>

<body>

<div class="c">

<div class="topo">

<div class="cima"></div>

<div class="meio">

<div class="conteudo">

<a href="."><img src="temp/f_configuracao/logo/1-300x200-1.png" alt="Tesla Eletrotécnica Ltda." border="0" class="logo" /></a>

</div>

</div>

<div class="baixo"></div>

</div>

<div class="menu">

<div class="widgets w1">

<div class="cima menulayout"></div>

<div class="meio menulayout">

<h2>Sobre Nós</h2>

<ul class="links">

<li><a href="http://www.cftvportoes.com.br/alarmes.htm">Alarmes</a></li>

<li><a href="http://www.cftvportoes.com.br/antenas.htm">Antenas</a></li>

<li><a href="http://www.cftvportoes.com.br/acessorios.htm">Acessórios</a></li>

<li><a href="http://www.cftvportoes.com.br/cameras-de-vigilancia.htm">Câmeras de Vigilância</a></li>

<li><a href="http://www.cftvportoes.com.br/cerca-eletrica.htm">Cerca Elétrica</a></li>

<li><a href="http://www.cftvportoes.com.br/controle-acesso.htm">Controle de Acesso</a></li>

<li><a href="http://www.cftvportoes.com.br/dvr-digital.htm">DVR Digital</a></li>

<li><a href="http://www.cftvportoes.com.br/fechaduras-eletricas.htm">Fechaduras Elétricas</a></li>

<li><a href="http://www.cftvportoes.com.br/iluminacao-emergencia.htm">Luz de Emergência</a></li>

<li><a href="http://www.cftvportoes.com.br/interfones.htm">Interfones</a></li>

<li><a href="http://www.cftvportoes.com.br/minuterias-sensores.htm">Minuterias Sensores</a></li>

<li><a href="http://www.cftvportoes.com.br/portoes-automaticos.htm">Portões Automáticos</a></li>

<li><a href="http://www.cftvportoes.com.br/placa-de-captura.htm">Placa de Captura</a></li>

<li><a href="http://www.cftvportoes.com.br/telefonia-PABX.htm">Telefonia e PABX</a></li>

<li><a href="http://www.cftvportoes.com.br/video-porteiro.htm">Vídeos Porteiros</a></li>

<li><a href="http://www.cftvportoes.com.br/pecas.htm">Peças</a></li>

<li><a href="http://www.cftvportoes.com.br/servicos.htm">Serviços</a></li>

<li><a href="http://www.cftvportoes.com.br/servicos.htm">Contrato de Manutenção</a></li>

<br />

</ul>

</div>

<div class="baixo menulayout"></div>

<div class="cima menulayout"></div>

<div class="meio menulayout">

<h2>Sobre Nós</h2>

<ul class="links">

<li><a href="http://www.cftvportoes.com.br/index.html">Página Inicial</a></li>

<li><a href="http://www.cftvportoes.com.br/historico.htm">Histórico</a></li>

<li><a href="http://www.cftvportoes.com.br/galeria-imagens.htm">Galeria de Imagens</a></li>

<li><a href="http://www.cftvportoes.com.br/orcamento.htm">Orçamento</a></li>

<li><a href="http://www.cftvportoes.com.br/contato.htm">Contato</a></li><br />

</ul>

</div>

<div class="baixo menulayout"></div>

</div>

</div>

<div class="corpo">

<div class="cima"></div>

<div class="meio">

<div class="conteudo">

<h1>Contato</h1>

<div class="contato">

<h2>Formulário de Contato</h2>

<form action="" method="post" enctype="application/x-www-form-urlencoded" name="formcontato" id="formcontato">

<fieldset>

<legend>Preencha corretamente os campos abaixo:</legend>

<ol>

<li>

<label class="campo" for="cnome">Nome</label><div id="cnome_erro" class="error">

</div><input type="text" name="cnome" id="cnome" />

</li>

<li>

<label class="campo" for="email">E-Mail</label><div id="cemail_erro" class="error"></div>

<input type="text" name="cemail" id="cemail" />

</li>

<li>

<label class="campo" for="fone">Fone</label><div id="fone_erro" class="error"></div>

<input type="text" name="fone" id="fone" />

</li>

<li>

<label class="campo" for="mensagem">Mensagem</label><div id="mensagem_erro" class="error"></div>

<textarea name="mensagem" rows="5" id="mensagem"></textarea>

</li>

</ol>

<a href="#" class="enviarcontato"><img src="layout/enviar.gif" alt="" border="0" /></a>

</fieldset>

</form>

</div>

<div class="endereco">

<h2>Informações para Contato</h2>

<div class="vcard"><br />

<img class="logo" src="temp/f_configuracao/logo/1-280x200-3.png" alt="CFTV Portões." /> <br /><br />

<a href="http://www.cftvportoes.com.br/" class="fn org url">cftv portoes</a>

<div class="adr">

<br />

<strong>Endereço:</strong><br />

<div class="street-address">Rua ..., 218 - Casa 1</div>

<span class="locality">São Paulo</span> -

<span class="region">SP</span> - <span class="country-name">Brasil</span><br />

<span class="postal-code">00000-000</span>

</div><br />

<strong>Telefone:</strong><br>

<div class="tel">(11)1234-5678</div>

<div><br />

<strong>E-Mail</strong>:<br />

<span class="email">sac@cftvportoes.com.br</span>

</div>

</div>

</div></div>

<div class="widgetscorpo">

</div>

</div>

<div class="baixo"></div>

</div>

</div>

</body>

</html>