Formulário de contato em PHP

Muitas designers tem dificuldade em criar alguns formulários de contato para seus sites, já me deparei com este problema diversas vezes... Por isso, recolhendo algumas informações da internet e fazendo meus ajustes pessoais, desenvolvi um formulário simples e eficiente!

Código HTML

 

    



















      
        
Nome:
        
        
      
      
        
E-mail:
        
      
      
        
Telefone:
        
      
      
Mensagem:
        
      
        
        
 
        
   
           
      
    
    

Código PHP, arquivo formmail.php

$nome = $_POST['nome'];

$contatomail = $_POST['contatomail'];

$telefone = $_POST['telefone'];

$mensagem = $_POST['mensagem'];

//De acordo com o html, o nome dos campos acima

$para = "seu nome";

$assunto = "escreva aqui o assunto";

$mensagem = "$nome

$contatomail

$telefone

$mensagem";

/*aqui foram definidos: o local onde será enviado o e-mail($para)

o assunto do e-mail enviado ($assunto)

e a mensagem enviada ($mensagem) que contém todos os campos preenchido no formulário*/

if (strlen($nome) < 3)

echo "Digite seu nome!
 Voltar";

elseif (strlen($contatomail) <= 3)

echo "e-mail inválido!
 Voltar";

elseif (strlen($telefone) <= 3)

echo "Telefone inválido!
 Voltar";

elseif (strlen($mensagem) <= 3)

echo "Digite uma mensagem!
 Voltar";

else{

mail($para, $assunto, $mensagem);

header("Location: paginadeconfirmação.html");

}
/* Uma confirmação super simples, não muito usual mas funcional em jscript */

?>

Ocultar e exibir conteúdos com jquery

Olá, desenvolvi um tutorial simples e básico, ensinando um recurso muito interessante da biblioteca jquery, de ocultar e exibir algum conteúdo de uma página.
É muito útil para galeria de produtos de um site, ao clicar em determinado produto, podemos exibir a descrição do mesmo que antes estava oculta.

Primeiramente é necessário baixar a biblioteca jquery em seu site oficial, após isso, basta acompanhar a criação desta página simples.

Fiz o efeito, utilizando um menu em lista, após os códigos explicarei os detalhes.

Código html, a ser inserido dentro do body

item 1
item 2
item 3
item 4
item 5


11111


22222


33333


44444


55555

Código CSS

body {
background-color: #FFFFFF;
font: 12px Verdana, Geneva, sans-serif;
}

#conteudo, #conteudo2, #conteudo3 {
border:1px solid #CCCC33;
padding:10px;
margin-top:10px;
width:500px;
}

ul, li{
margin:0; padding:0;
}

Eis o código jquery Comentado

$(document).ready(function(){
 
 $('li').hide(); // Esta linha esconde todos os elementos de lista 

// ao clicar no item1 você esconde todos os blocos, e faz aparecer somente o primeiro item da lista
 
   $('a#item1').click(function(){ 
$('li').hide();
 $('li').eq(0).fadeIn('slow');
});
 
// ao clicar no item2 você esconde todos os blocos, e faz aparecer somente o segundo e o terceiro item da lista, fiz este diferente propositalmente

  $('a#item2').click(function(){ 
  $('li').hide();
 $('li').eq(1).fadeIn('slow');
  $('li').eq(2).fadeIn('slow');
});

// ao clicar no item3 você esconde todos os blocos, e faz aparecer somente o terceiro item da lista
 
  $('a#item3').click(function(){
  $('li').hide();
 $('li').eq(2).fadeIn('slow');
});

// ao clicar no item3 você esconde todos os blocos, e faz aparecer somente o quarto item da lista
 
  $('a#item4').click(function(){
  $('li').hide();
 $('li').eq(3).fadeIn('slow');
});

// ao clicar no item3 você esconde todos os blocos, e faz aparecer somente o quinto item da lista
 
  $('a#item5').click(function(){
  $('li').hide();
 $('li').eq(4).fadeIn('slow');
});
   
});

Comentários e explicações
1 - Ah André, não seria mais fácil sumir com as divs no css? Usando um display none ou algo parecido?
Sim, funcionaria, mas digamos que usuário acesse seu site com o jscript desabilitado... Ele nunca veria este conteúdo escondido, pois foi escondido com css... Então, sempre que queremos fazer algum efeito como este, devemos sempre esconder os itens com jscript, pois assim, se o usuário entrar no site com o jscript desabilitado, ele consegue ver o conteúdo, pois o mesmo estará visível assim que a pessoa entrar no site.

2 - Não entendi esse $('li').eq(1)
Este código significa "o segundo item da lista" (lembrando que a contagem começa do zero em jscript"... Se usarmos eq(2) significaria "o terceiro item da lista" e assim por diante... Você poderia também utilizar uma id, caso queira que o efeito se aplique somente a um elemento da página "$('a#nomeDaDiv')"

3- Esse fadeIn('slow') é o que faz este efeitinho de "sumindo e aparecendo"
Exatamente, se trocarmos o slow por "fast" ou "normal" a velocidade do efeito muda, podemos também inserir um valor numérico para o tempo, em milisegundos.

Futuramente publicarei um artigo sobre os diversos tipos de efeitos interessantes que temos com jquery.

Espero que as dicas tenham sido úteis, qualquer coisa é só comentar!