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
<!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://marcelowd.wordpress.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
<?php
/*Variaveis do Formulario*/
$nome = trim(@$_POST['nome']);/*recebe os dados digitados no campo "nome"*/
$email = trim(@$_POST['email']);/*recebe os dados digitados no campo "email"*/
$assunto_user = trim(@$_POST['assunto']);/*recebe os dados digitados no campo "assunto"*/
$mensagem = trim(@$_POST['mensagem']);/*recebe os dados digitados no campo "mensagem"*/
$enviar = @$_POST['enviar'];/*Botão enviar*/
/*variavel que contará os erros*/
$erros = 1;
/*transforma em variavel global, a variã¡vel email*/
global $email;
if($enviar)/*Se o botão enviar for pressionado, faça...*/
{
/*Verifica campo "nome" vazio*/
if($nome == "")
{
$erros++;
echo "<small class=\"erro\">O Campo nome esta vazio</small><br />";
}
elseif(is_numeric($nome))/*verifica se foi digitado número no campo*/
{
$erros++;
echo "<small class=\"erro\">Você digitou numero no campo nome</small><br />";
}
/*Verifica campo "email" vazio*/
if($email == "")
{
$erros++;
echo "<small class=\"erro\">O Campo email está vazio</small><br />";
}
/*Verifica campo "assunto" vazio*/
if($assunto_user == "")
{
$erros++;
echo "<small class=\"erro\">O Campo assunto esté vazio</small><br />";
}
/*Verifica campo mensagem vazio*/
if($mensagem == "")
{
$erros++;
echo "<small class=\"erro\">O Campo mensagem esté vazio</small><br />";
}
/*verifica email, se digitado incorretamente*/
$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)/*se não tiver algum erro continuara abaixo, se tiver é exibido as messagens configuradas acima*/
{
/*Configuramos o e-mail para o qual serão enviadas as informações*/
$seuemail = "seuemail@exemplo.com";/*email de destino*/
$assunto = "contato do site";/*assunto padrão do email(não o digitado pelo úsuario)*/
/*Configuramos os cabeçalhos do e-mail*/
$headers = "MIME-Version: 1.0\r\n";
$headers .= "Content-type: text/html; charset=utf-8\r\n";/*para o envio com formatação HTML. Charset po ser iso-8859-1 também*/
$headers .= "From: $seuemail \r\n";/*Para "seu email"*/
/*Configuramos o conteúdo do e-mail*/
$conteudo = "<strong>Nome:</strong> $nome<br />";/*vai para o seu email o que foi digitado no campo "nome"*/
$conteudo .= "<strong>Email:</strong> $email<br />";/*vai para o seu email o que foi digitado no campo "email"*/
$conteudo .= "<strong>Assunto:</strong> $assunto_user<br />";/*vai para o seu email o que foi digitado no campo "assunto"*/
$conteudo .= "<strong>Mensagem:</strong> $mensagem<br />";/*vai para o seu email o que foi digitado no campo "mensagem"*/
/*Enviando o e-mail...*/
$enviando = mail($seuemail, $assunto, $conteudo, $headers);
/*verifica se o e-mail foi enviado com sucesso*/
if($enviando) {
echo "Mensagem enviada com sucesso!";
echo "<script>alert(\"Mensagem enviada com sucesso!\")</script>";
echo "<script>window.location = \"index.php\"</script>";
}
else{/*seu ouve algum erro...*/
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
*{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;}
baixe os arquivos completos aqui!
