Olá pessoal, alguns meses atrás eu estava sofrendo pra pra fazer um formulário de envio de dados de um form para o email de um cliente através de uma area do site, consegui enfim! Então vou compartilhar nesse post o desenvolvimento de um formulário de contato simples para seu site, utilizando a função mail() do php, com validação de campos(inclusive de email), sem spam e com estilização em css.
Irei dividir em 3 partes:
- Construção do form em (X)HTML;
- Implementação do arquivo de envio em PHP.
- Estilização do form com CSS ;
Vamos começar então, com a construção do form em (X)HTML:
contato.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br">
<head>
<meta name="author" content="Marcelo Torres" />
<meta http-equiv="content-type" content="text/html; charset=iso-utf-8" />
<title>Formulário de contato em PHP</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<form action="contato.php" method="post">
<fieldset>
<legend>Entre em contato</legend>
<small>*Campos de Preenchimentos Obrigatório</small><br />
<?php include("enviar.php")?>
<label for="nome"> * Seu nome:</label>
<input id="nome" name="nome" size="31" type="text" value="<?echo $nome ;?>" /><br />
<label for="email">* Seu email:</label>
<input id="email" name="email" size="31" type="text" value="<?echo $email ;?>" /><br />
<label for="assunto">* Assunto:</label>
<input id="assunto" maxlength="50" name="assunto" size="15" type="text" value="<?echo $assunto ;?>" /><br />
<label for="mensagem">* Mensagem:</label><br />
<textarea id="mensagem" cols="53" rows="5" name="mensagem"><?echo $mensagem;?></textarea><br />
<input name="enviar" type="submit" value="Enviar" class="botao"/>
<input name="cancelar" type="reset" value="Limpar" class="botao"/>
<p>Formulário de contato em PHP, por <a title="blog do autor" href="http://www.marcelotorresweb.com">Marcelo Torres</p>
</fieldset>
</form>
</body>
</html> |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br">
<head>
<meta name="author" content="Marcelo Torres" />
<meta http-equiv="content-type" content="text/html; charset=iso-utf-8" />
<title>Formulário de contato em PHP</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<form action="contato.php" method="post">
<fieldset>
<legend>Entre em contato</legend>
<small>*Campos de Preenchimentos Obrigatório</small><br />
<?php include("enviar.php")?>
<label for="nome"> * Seu nome:</label>
<input id="nome" name="nome" size="31" type="text" value="<?echo $nome ;?>" /><br />
<label for="email">* Seu email:</label>
<input id="email" name="email" size="31" type="text" value="<?echo $email ;?>" /><br />
<label for="assunto">* Assunto:</label>
<input id="assunto" maxlength="50" name="assunto" size="15" type="text" value="<?echo $assunto ;?>" /><br />
<label for="mensagem">* Mensagem:</label><br />
<textarea id="mensagem" cols="53" rows="5" name="mensagem"><?echo $mensagem;?></textarea><br />
<input name="enviar" type="submit" value="Enviar" class="botao"/>
<input name="cancelar" type="reset" value="Limpar" class="botao"/>
<p>Formulário de contato em PHP, por <a title="blog do autor" href="http://www.marcelotorresweb.com">Marcelo Torres</p>
</fieldset>
</form>
</body>
</html>
Nota I: o value tem um echo em php com as variáveis( que nós iremos ver ainda), para no caso de um erro na validação do form, os dados digitados continuar nos campos, para que o usuário não tenha que digitar denovo.
Nota II: o comando “<?php include(“enviar.php”)?>”, está incluindo o arquivo
enviar.php, onde estão localizados, as validações dos campos e é claro o script para envio para seu email, vamos fazer este arquivo então.
enviar.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
| <?php
<span style="color: #008000;">/*Variaveis do Formulario*/</span>
$nome = trim($_POST['nome']);<span style="color: #008000;">/*recebe os dados digitados no campo "nome"*/</span>
$email = trim($_POST['email']);<span style="color: #008000;">/*recebe os dados digitados no campo "email"*/</span>
$assunto_user = trim($_POST['assunto']);<span style="color: #008000;">/*recebe os dados digitados no campo "assunto"*/</span>
$mensagem = trim($_POST['mensagem']);/*recebe os dados digitados no campo "mensagem"*/
$enviar = $_POST['enviar'];<span style="color: #008000;">/*Botão enviar*/</span>
<span style="color: #008000;">/*variavel que contará os erros*/</span>
$erros = 1;
<span style="color: #008000;">/*transforma em variavel global, a variã¡vel email*/</span>
global $email;
if($enviar)<span style="color: #008000;">/*Se o botão enviar for pressionado, faça...*/</span>
{
<span style="color: #008000;">/*Verifica campo "nome" vazio*/</span>
if($nome == "")
{
$erros++;
echo "<small class=\"erro\">O Campo nome esta vazio</small><br />";
}
elseif(is_numeric($nome))<span style="color: #008000;">/*verifica se foi digitado número no campo*/</span>
{
$erros++;
echo "<small class=\"erro\">Você digitou numero no campo nome</small><br />";
}
<span style="color: #008000;">/*Verifica campo "email" vazio*/</span>
if($email == "")
{
$erros++;
echo "<small class=\"erro\">O Campo email está vazio</small><br />";
}
<span style="color: #008000;">/*Verifica campo "assunto" vazio*/</span>
if($assunto_user == "")
{
$erros++;
echo "<small class=\"erro\">O Campo assunto esté vazio</small><br />";
}
<span style="color: #008000;">/*Verifica campo mensagem vazio*/</span>
if($mensagem == "")
{
$erros++;
echo "<small class=\"erro\">O Campo mensagem esté vazio</small><br />";
}
<span style="color: #008000;">/*verifica email, se digitado incorretamente*/</span>
$email = str_replace (" ", "", $email);
$email = str_replace ("/", "", $email);
$email = str_replace ("@.", "@", $email);
$email = str_replace (".@", "@", $email);
$email = str_replace (",", ".", $email);
$email = str_replace (";", ".", $email);
if(strlen($email)<8 || substr_count($email, "@")!=1 || substr_count($email, ".")==0)
{
$erros++;
echo "<small class=\"erro\">Por favor, digite seu <b>e-mail</b> corretamente.</small><br />";
}
if($erros <= 1)<span style="color: #008000;">/*se não tiver algum erro continuara abaixo, se tiver é exibido as messagens configuradas acima*/</span>
{
<span style="color: #008000;">/*Configuramos o e-mail para o qual serão enviadas as informações*/</span>
$seuemail = "seuemail@exemplo.com";<span style="color: #008000;">/*email de destino*/</span>
$assunto = "contato do site";<span style="color: #008000;">/*assunto padrão do email(não o digitado pelo úsuario)*/</span>
<span style="color: #008000;">/*Configuramos os cabeçalhos do e-mail*/</span>
$headers = "MIME-Version: 1.0\r\n";
$headers .= "Content-type: text/html; charset=utf-8\r\n";<span style="color: #008000;">/*para o envio com formatação HTML. Charset po ser </span><span style="color: #008000;">iso-8859-1</span><span style="color: #008000;"> também*/</span>
$headers .= "From: $seuemail \r\n";<span style="color: #008000;">/*Para "seu email"*/</span>
<span style="color: #008000;">/*Configuramos o conteúdo do e-mail*/</span>
$conteudo = "<strong>Nome:</strong> $nome<br />";<span style="color: #008000;">/*vai para o seu email o que foi digitado no campo "nome"*/</span>
$conteudo .= "<strong>Email:</strong> $email<br />";<span style="color: #008000;">/*vai para o seu email o que foi digitado no campo "email"*/</span>
$conteudo .= "<strong>Assunto:</strong> $assunto_user<br />";<span style="color: #008000;">/*vai para o seu email o que foi digitado no campo "assunto"*/</span>
$conteudo .= "<strong>Mensagem:</strong> $mensagem<br />";<span style="color: #008000;">/*vai para o seu email o que foi digitado no campo "mensagem"*/</span>
<span style="color: #008000;">/*Enviando o e-mail...*/</span>
$enviando = mail($seuemail, $assunto, $conteudo, $headers);
<span style="color: #008000;">/*verifica se o e-mail foi enviado com sucesso*/</span>
if($enviando) {
echo "Mensagem enviada com sucesso!";
echo "<script>alert(\"Mensagem enviada com sucesso!\")</script>";
echo "<script>window.location = \"index.php\"</script>";
}
else{<span style="color: #008000;">/*seu ouve algum erro...*/</span>
echo "<p><b>$nome</b><br />Ouve um erro no envio, desculpe-nos pelo transtorno!!!</p>";
}
}
}
?> |
<?php
<span style="color: #008000;">/*Variaveis do Formulario*/</span>
$nome = trim($_POST['nome']);<span style="color: #008000;">/*recebe os dados digitados no campo "nome"*/</span>
$email = trim($_POST['email']);<span style="color: #008000;">/*recebe os dados digitados no campo "email"*/</span>
$assunto_user = trim($_POST['assunto']);<span style="color: #008000;">/*recebe os dados digitados no campo "assunto"*/</span>
$mensagem = trim($_POST['mensagem']);/*recebe os dados digitados no campo "mensagem"*/
$enviar = $_POST['enviar'];<span style="color: #008000;">/*Botão enviar*/</span>
<span style="color: #008000;">/*variavel que contará os erros*/</span>
$erros = 1;
<span style="color: #008000;">/*transforma em variavel global, a variã¡vel email*/</span>
global $email;
if($enviar)<span style="color: #008000;">/*Se o botão enviar for pressionado, faça...*/</span>
{
<span style="color: #008000;">/*Verifica campo "nome" vazio*/</span>
if($nome == "")
{
$erros++;
echo "<small class=\"erro\">O Campo nome esta vazio</small><br />";
}
elseif(is_numeric($nome))<span style="color: #008000;">/*verifica se foi digitado número no campo*/</span>
{
$erros++;
echo "<small class=\"erro\">Você digitou numero no campo nome</small><br />";
}
<span style="color: #008000;">/*Verifica campo "email" vazio*/</span>
if($email == "")
{
$erros++;
echo "<small class=\"erro\">O Campo email está vazio</small><br />";
}
<span style="color: #008000;">/*Verifica campo "assunto" vazio*/</span>
if($assunto_user == "")
{
$erros++;
echo "<small class=\"erro\">O Campo assunto esté vazio</small><br />";
}
<span style="color: #008000;">/*Verifica campo mensagem vazio*/</span>
if($mensagem == "")
{
$erros++;
echo "<small class=\"erro\">O Campo mensagem esté vazio</small><br />";
}
<span style="color: #008000;">/*verifica email, se digitado incorretamente*/</span>
$email = str_replace (" ", "", $email);
$email = str_replace ("/", "", $email);
$email = str_replace ("@.", "@", $email);
$email = str_replace (".@", "@", $email);
$email = str_replace (",", ".", $email);
$email = str_replace (";", ".", $email);
if(strlen($email)<8 || substr_count($email, "@")!=1 || substr_count($email, ".")==0)
{
$erros++;
echo "<small class=\"erro\">Por favor, digite seu <b>e-mail</b> corretamente.</small><br />";
}
if($erros <= 1)<span style="color: #008000;">/*se não tiver algum erro continuara abaixo, se tiver é exibido as messagens configuradas acima*/</span>
{
<span style="color: #008000;">/*Configuramos o e-mail para o qual serão enviadas as informações*/</span>
$seuemail = "seuemail@exemplo.com";<span style="color: #008000;">/*email de destino*/</span>
$assunto = "contato do site";<span style="color: #008000;">/*assunto padrão do email(não o digitado pelo úsuario)*/</span>
<span style="color: #008000;">/*Configuramos os cabeçalhos do e-mail*/</span>
$headers = "MIME-Version: 1.0\r\n";
$headers .= "Content-type: text/html; charset=utf-8\r\n";<span style="color: #008000;">/*para o envio com formatação HTML. Charset po ser </span><span style="color: #008000;">iso-8859-1</span><span style="color: #008000;"> também*/</span>
$headers .= "From: $seuemail \r\n";<span style="color: #008000;">/*Para "seu email"*/</span>
<span style="color: #008000;">/*Configuramos o conteúdo do e-mail*/</span>
$conteudo = "<strong>Nome:</strong> $nome<br />";<span style="color: #008000;">/*vai para o seu email o que foi digitado no campo "nome"*/</span>
$conteudo .= "<strong>Email:</strong> $email<br />";<span style="color: #008000;">/*vai para o seu email o que foi digitado no campo "email"*/</span>
$conteudo .= "<strong>Assunto:</strong> $assunto_user<br />";<span style="color: #008000;">/*vai para o seu email o que foi digitado no campo "assunto"*/</span>
$conteudo .= "<strong>Mensagem:</strong> $mensagem<br />";<span style="color: #008000;">/*vai para o seu email o que foi digitado no campo "mensagem"*/</span>
<span style="color: #008000;">/*Enviando o e-mail...*/</span>
$enviando = mail($seuemail, $assunto, $conteudo, $headers);
<span style="color: #008000;">/*verifica se o e-mail foi enviado com sucesso*/</span>
if($enviando) {
echo "Mensagem enviada com sucesso!";
echo "<script>alert(\"Mensagem enviada com sucesso!\")</script>";
echo "<script>window.location = \"index.php\"</script>";
}
else{<span style="color: #008000;">/*seu ouve algum erro...*/</span>
echo "<p><b>$nome</b><br />Ouve um erro no envio, desculpe-nos pelo transtorno!!!</p>";
}
}
}
?>
Sem notas dessa vez, os comentários(em verde) explicam tudo :).
Agora vamos a parte divertida, o CSS, :D
style.css
1
2
3
4
5
6
7
| *{padding:0; margin:0;}/*reset de margem e espaçamento para todos os elementos*/
body{letter-spacing:2px;font-size:13px;color:#333;line-height:36px;}
fieldset{width:500px;padding:20px;margin:50px;}
input{width:350px;font-size:18px;color:#333;border:solid 1px #333;}
input.botao{width:100px;}
small{color:#008800;}
small.erro{color:#f00;} |
*{padding:0; margin:0;}/*reset de margem e espaçamento para todos os elementos*/
body{letter-spacing:2px;font-size:13px;color:#333;line-height:36px;}
fieldset{width:500px;padding:20px;margin:50px;}
input{width:350px;font-size:18px;color:#333;border:solid 1px #333;}
input.botao{width:100px;}
small{color:#008800;}
small.erro{color:#f00;}
baixar arquivos completos:
Formulario de contato em PHP (555)