Formulário de contato com validação dos campos

Olá, neste post eu vou ensinar como criar um formulário de contato.

No código abaixo estão os campos que serão preenchidos, Nome, Email e Mensagem, na tag FORM temos a action que direciona para o arquivo PHP responsável pelo envio do email, o method será POST, para que possamos pegar as variáveis ocultamente.
<form action="enviar.php" method="post" enctype="multipart/form-data" name="form">

Nome: <input type="text" name="nome"/><br/>
Email: <input type="text" name="email"/><br/>
Mensagem: <textarea name="mensagem"/><br/>
<input type="submit" value="enviar"/>

</form> Aqui abaixo está o código do arquivo PHP.
<?php
//pega as variáveis via POST
$nome = $_POST["nome"];
$email = $_POST["email"];
$mensagem = $_POST["mensagem"];

//esta função serve para para validar a variável $email no script todo
global $email;

$data      = date("d/m/y");                     //função para pegar a data de envio do e-mail
$hora      = date("H:i");                       //para pegar a hora com a função date

// Proibindo que os campos fiquem em branco
if (($nome == "") || ($email == "") || ($mensagem == ""))
  {
    echo "<script>alert('Todos os campos devem ser preenchidos!');</script>";
    echo "<script>history.go(-1);</script>";
  }

// Validando o campo com E-mail
if (substr_count($email,"@") == 0 || substr_count($email,".") == 0)
  {
   echo "<script>alert('Por favor, utilize um e-mail válido');</script>";
   echo "<script>history.go(-1);</script>";
   } else {

//Aqui exibe o conteúdo das variáveis
$mens .= "<b>Nome:</b> $nome<br>\n";
$mens .= "<b>Email:</b> $email<br>\n";
$mens .= "<b>Mensagem:</b> $mensagem<br>\n";
$mens .= "<b>Data enviada:</b> $data<br>\n";
$mens .= "<b>Hora:</b> $hora\n";

$assunto = "Formulario de contato do meu site";
$conteudo = "$mens";
$remetente = "$email";
$destinatario = "seu@email.com.br"; //aqui é o endereço para onde será enviado o email
$headers = "From: ".$remetente."\nContent-type: text/html; charset=utf-8"; //o ‘text/html’ é o tipo mime da mensagem
if(!mail($destinatario,$assunto,$conteudo,$headers)){
echo "<script>alert('Ocorreu um erro, por favor preencha o formulario novamente.');</script>";
echo "<script>history.go(-1);</script>";
} else {
echo "<script>alert('Obrigado por enviar seus dados!');</script>";
echo "<script>history.go(-1);</script>";
}
}
?>
Para testar o formulário é necessário hospedar os arquivos em um servidor FTP para que o email possa ser enviado.

É isso, espero que gostem, até mais!

Hacks CSS

Olá, aqui eu vou deixar uns exemplos de Hacks CSS. Nem sempre os códigos irão funcionar perfeitamente em todos os navegadores, é ai que entram os Hacks, com eles é possível corrigir o erro deixando seu site com a mesma visualização na maioria dos navegadores.

Seguem aqui alguns Hacks:

/* Hack para Firefox 3 */
.nomedaclasse, x:default {
color: red;
}>

/* Hack para Firefox 2 */
.nomedaclasse, x:-moz-any-link {
color: red;
}

/* Hack para Internet Explorer 7 */
.nomedaclasse {
*color: red;
}

/* Hack para Internet Explorer 6 */
.nomedaclasse {
 _color: red;
}

/* Hack para Opera */
@media all and (min-width: 0px){
.nomedaclasse { color: red; }
}

/*Somente para Safari e Chrome*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
.nomedaclasse { color: red; }
}
é isso, até mais!

Menu Drop Down em Javascript

Olá, estou aqui novamente para mostrar como fazer um menu drop down com Javascript e um pouco de CSS, vamos lá:

Este código você coloca antes de fechar a tag head, ou se preferir pode colocar em uma folha de estilo:

<style type="text/css">
.menu{
border-style:solid;
border-width:1px;
border-color:black;
width:110px;
text-align:center;
background-color: #999999;
}
.submenu{
border-style:solid;
border-width:1px;
border-color:black;
width:110px;
text-align:center;
background-color:gray;
}
</style>
Este é o código em Javascript do menu, que você deve colocar após o CSS:

<script language="javascript" type="text/javascript">

//função que faz aparecer as opções do menu
function aparece(x){
document.getElementById(x).style.display="block";
}

//função que faz sumir as opções do menu
function some(x){
document.getElementById(x).style.display="none";
}

</script>


Agora, esta tabela é colocada dentro do body:

<table border="1">

<tr>

<td onmouseover="aparece('submenu1')" onmouseout="some('submenu1')" class="menu">Menu1

<table id="submenu1" border="1" width="100%" style="display:none;">

<tr><td class="submenu" onmouseover="javascript:style.background='red'" onmouseout="javascript:style.background='gray'">Link1</td></tr>

<tr><td class="submenu" onmouseover="javascript:style.background='red'" onmouseout="javascript:style.background='gray'">Link2</td></tr>

<tr><td class="submenu" onmouseover="javascript:style.background='red'" onmouseout="javascript:style.background='gray'">Link3</td></tr>

<tr><td class="submenu" onmouseover="javascript:style.background='red'" onmouseout="javascript:style.background='gray'">Link4</td></tr>

<tr><td class="submenu" onmouseover="javascript:style.background='red'" onmouseout="javascript:style.background='gray'">Link5</td></tr>

</table>

</td>

</tr>

</table>

O código é bem simples de entender, assim, você pode personalizá-lo mudando a aparência de acordo com o seu gosto. É isso e até mais!

CSS - Propriedades e valores

As propriedades básicas para fontes:

• color:...................cor da fonte
• font-family:..........tipo de fonte
• font-size:..............tamanho de fonte
• font-style:............estilo de fonte
• font-variant:.........fontes maiúsculas de menor altura
• font-weight:.........quanto mais escura a fonte é (negrito)
• font:.....................maneira abreviada para todas as propriedades

#Valores válidos para as propriedades da fonte

• color:
1. código hexadecimal: #FFFFFF
2. código rgb: rgb(255,235,0)
3. nome da cor: red, blue, green...etc

• font-family:
1. family-name: define-se pelo nome da fonte,
p. ex:"verdana", "helvetica", "arial", etc.
2. generic-family: define-se pelo nome genérico,
p. ex:"serif", "sans-serif", "cursive", etc.

• font-size:
1. xx-small
2. x-small
3. small
4. medium
5. large
6. x-large
7. xx-large
8. smaller
9. larger
10. length: uma medida reconhecida pelas CSS (10px, pt, em, cm, ...)
11. %

• font-style:
1. normal: fonte normal na vertical
2. italic: fonte inclinada
3. oblique: fonte obliqua

• font-variant:
1. normal: fonte normal
2. small-caps: transforma em maiúsculas de menor altura

• font-weight:
1. normal
2. bold
3. bolder
4. lighter
5. 100
6. 200
7. 300
8. 400
9. 500
10. 600
11. 700
12. 800
13. 900

As propriedades para textos são as listadas abaixo:

• color:......................cor do texto;
• letter-spacing:........espaçamento entre letras;
• word-spacing:.........espaçamento entre palavras;
• text-align:...............alinhamento do texto;
• text-decoration:......decoração do texto;
• text-indent:.............recuo do texto;
• text-transform:........forma das letras;
• direction:................direção do texto;
• white-space:...........como o browser trata os espaços em branco;

#Valores válidos para as propriedades do texto

• color:
1. código hexadecimal: #FFFFFF
2. código rgb: rgb(255,235,0)
3. nome da cor: red, blue, green...etc

• letter-spacing:
1. normal: é o espaçamento default
2. lenght: uma medida reconhecida pelas CSS (12px, pt, em, cm, ...) São válidos valores negativos

• word-spacing:
1. normal: é o espaçamento default
2. lenght: uma medida reconhecida pelas CSS (12px, pt, em, cm, ...) São válidos valores negativos

• text-align:
1. left: alinha o texto a esquerda
2. right: alinha o texto a direita
3. center: alinha o texto no centro
4. justify: força o texto a ocupar toda a extensão da linha da esquerda a direita

• text-decoration:
1. none: nenhuma decoração
2. underline: coloca sublinhado no texto
3. overline: coloca um sobrelinhado no texto
4. line-through: coloca uma linha em cima do texto
5. blink: faz o texto piscar

• text-indent:
1. lenght: uma medida reconhecida pelas CSS (12px, pt, em, cm, ...)
2. % : porcentagem da largura do elemento pai

• text-transform:
1. none: texto normal
2. capitalize: todas as primeiras letras do texto em maiúsculas
3. uppercase: todas as letras do texto em maiúsculas
4. lowercase: todas as letras do texto em minúsculas

• direction:
1. ltr: texto escrito da esquerda para a direita
2. rtl: texto escrito da direita para a esquerda

• white-space:
1. normal: os espaços em branco serão ignorados pelo browser
2. pre: os espaços em branco serão preservados pelo browser
3. nowrap: o texto será apresentado todo ele numa linha única na tela. Não há quebra de linha até ser encontrada uma tag <br>

As propriedades para margens são as listadas abaixo:

• margin-top:.............define a margem superior;
• margin-right:...........define a margem direita;
• margin-bottom:.......define a margem inferior;
• margin-left:.............define a margem esquerda;
• margin:...................maneira abreviada para todas as margens

#Valores válidos para a propriedade margin

1. auto: valor default da margem
2. length: uma medida reconhecida pelas CSS (12px, pt, em, cm, ...)
3. %: porcentagem da largura do elemento pai

As propriedades para as bordas são as listadas abaixo:

• border-width:................espessura da borda
• border-style:.................estilo da borda
• border-color:.................cor da borda

• border-top-width:............espessura da borda superior
• border-top-style:.............estilo da borda superior
• border-top-color:.............cor da borda superior

• border-right-width:.........espessura da borda direita
• border-right-style:..........estilo da borda direita
• border-right-color:..........cor da borda direita

• border-bottom-width:.....espessura da borda inferior
• border-bottom-style:......estilo da borda inferior
• border-bottom-color:......cor da borda inferior

• border-left-width:...........espessura da borda esquerda
• border-left-style:............estilo da borda esquerda
• border-left-color:............cor da borda esquerda

• border-top:........maneira abreviada para todas as propriedades da borda superior
• border-right:......maneira abreviada para todas as propriedades da borda direita
• border-bottom:..maneira abreviada para todas as propriedades da borda inferior
• border-left:........maneira abreviada para todas as propriedades da borda esquerda
• border:...............maneira abreviada para todas as quatro bordas

#Valores válidos para as propriedades das bordas

• color:
1. código hexadecimal: #FFFFFF
2. código rgb: rgb(255,235,0)
3. nome da cor: red, blue, green...etc

• style:
1. none: nenhuma borda
2. hidden: equivalente a none
3. dotted: borda pontilhada
4. dashed: borda tracejada
5. solid: borda contínua
6. double: borda dupla
7. groove: borda entalhada
8. ridge: borda em ressalto
9. inset: borda em baixo relevo
10. outset: borda em alto relevo

• width:
1. thin: borda fina
2. medium: borda média
3. thick: borda grossa
4. length: uma medida reconhecida pelas CSS (12px, pt, em, cm, ...)

As propriedades para espaçamentos são as listadas abaixo:

• padding-top:.............define a espaçamento superior;
• padding-right:...........define a espaçamento direita;
• padding-bottom:.......define a espaçamento inferior;
• padding-left:.............define a espaçamento esquerda;
• padding:....................maneira abreviada para todas os espaçamentos

1. auto: valor default da margem
2. length: uma medida reconhecida pelas CSS (2px, pt, em, cm, ...)
3. %: porcentagem da largura do elemento pai

As propriedades background são as listadas abaixo:

• background-color:................ cor do fundo;
• background-image:.............. imagem de fundo;
• background-repeat:............. maneira como a imagem de fundo é posicionada;
• background-attachment:.......se a imagem de fundo "rola" ou não com a tela;
• background-position:............como e onde a imagem de fundo é posicionada;
• background:..........................maneira abreviada para todas as propriedades;

#Valores válidos para as propriedades do fundo

• background-color:
1. código hexadecimal: #FFFFFF
2. código rgb: rgb(255,235,0)
3. nome da cor: red, blue, green...etc
4. transparente: transparent

• background-image:
1. URL: url(caminho/imagem.gif)

• background-repeat:
1. não repete: no-repeat
2. repete vertical e horizontal: repeat
3. repete vertical: repeat-y
4. repete horizontal: repeat-x

• background-attachment:
1. imagem fixa na tela: fixed
2. imagem "rola" com a tela: scroll

• background-position:
1. x-pos y-pos
2. x-% y-%
3. top left
4. top center
5. top right
6. center left
7. center center
8. center right
9. bottom left
10. bottom center
11. bottom right

As propriedades list são as listadas abaixo:

• list-style-image:............. imagem como marcador da lista;
• list-style-position:...........onde o marcador da lista é posicionado;
• list-style-type:.................tipo do marcador da lista;
• list-style:.........................maneira abreviada para todas as propriedades;

#Valores válidos para as propriedades do lista

• list-style-image:
1. none
2. URL: url(caminho/marcador.gif)

• list-style-position:
1. outside: marcador fora do alinhamento do texto
2. inside: marcador alinhado com texto

• list-style-type:
1. none: sem marcador
2. disc: círculo (bolinha cheia)
3. circle: circunferência (bolinha vazia)
4. square: quadrado cheio
5. decimal: números 1, 2, 3, 4, ...
6. decimal-leading-zero
7. lower-roman: romano minúsculo i, ii, iii, iv, ...
8. upper-roman: romano maiúsculo I, II, III, IV, ...
9. lower-alpha: letra minúscula a, b, c, d, ...
10. upper-alpha: letra maiúscula A, B, C, D, ...
11. lower-greek
12. lower-latin
13. upper-latin
14. hebrew
15. armenian
16. georgian
17. cjk-ideographic
18. hiragana
19. katakana
20. hiragana-iroha
21. katakana-iroha

Colocando cores na barra de rolagem do navegador:

scrollbar-face-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-highlight-color: #000000;
scrollbar-3dligh-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #000000;
scrollbar-arrow-color: #000000;