HTML

Em 08/12/2014 às 16:12h por Leonardo

Criando um formulário de Contato

No artigo de hoje vamos aprender como desenvolver um formulário de contato simples que você encontra em todo site, na qual você se identifica com seu nome, email e o assunto que deseja tratar.

Por se tratar de um formulário simples para iniciantes, não iremos utilizar Ajax, apenas HTML e PHP puro, na qual o HTML será nossa UI (user interface) e o PHP para recebimento e envio dos dados digitados pelo usuário no form.

Começamos criando nossa página index.php em seu projeto.

Obs: Lembrando que o foco nesse artigo é somente no funcionamento do formulário, mas você pode estilizar seu projeto da forma que desejar.

 <!DOCTYPE HTML> <html lang="pt-BR"> <head> <meta charset="UTF-8"/> <title>Formul&aacute;rio de Contato</title> <link rel="stylesheet" type="text/css" href="css/style.css" /> <body> <form name="formulario" id="formulario" method="post" action=""> <fieldset> <legend>Dados de Avalia&ccedil;&atilde;o</legend> <br/> <label>Nome:</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input value="" type="text" name="nome" size="80" tabindex="1" required="required"/><br/><br/> <label>Sobre Nome:</label>&nbsp;&nbsp;&nbsp; <input value="" type="text" name="sobreNome" size="80" tabindex="2" required="required"/><br/><br/> <label>E-mail: </label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input value="" type="email" name="email" size="35" tabindex="3" required="required"/><br/><br/> <label>Telefone:</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input value="" type="text" name="telefone" size="35" tabindex="4" required="required"/><br/><br/> <label>Coment&aacute;rio:</label>&nbsp;&nbsp;&nbsp;&nbsp; <textarea type="text" name="comentario" id="comentario" tabindex="5" required="required"></textarea> <input type="submit" name="bt-enviar" value="Enviar" tabindex="6"/> </fieldset> </form> </html>

Feito isso, vamos adicionar um pequeno trecho de código em PHP, na qual será o responsável por verificar se o botão Enviar foi clicado ou não.

 <?php if(isset($_POST['bt-enviar'])){ extract($_POST); // usando o extract(), todos os campos são extraídos de uma só vez require_once('pages/enviar-email.php'); enviar_email(); } ?>

Nesse trecho acontece o seguinte, ele verifica se o botão enviar está setado, ou seja, com valor, se sim ele entra dentro do if e faz um requerimento de nossa página enviar-email.php, que será a responsável por receber os dados digitados e enviar os dados para o email destinatário que você definirá.

Agora criamos um diretório chamado pages. Dentro desse diretório vamos criar nossa página enviar-email.php.

Obs: Foi separado por diretório os arquivos apenas por questões de organização do projeto, mas você pode deixar da forma que preferir.

 <?php function enviar_email(){ // força o timezone no pais/cidade desejada date_default_timezone_set('America/Sao_Paulo'); //recebe os dados vindos do form $nome = isset($_POST['nome']) ? trim($_POST['nome']) : ''; $sobreNome = isset($_POST['sobreNome']) ? trim($_POST['sobreNome']) : ''; $email = isset($_POST['email']) ? trim($_POST['email']) : ''; $telefone = isset($_POST['telefone']) ? trim($_POST['telefone']) : ''; $comentario = isset($_POST['comentario']) ? trim($_POST['comentario']) : ''; //verifica se email está vazio if ( $email != '' ) { $msg = ""; //começamos a montar nossa estrutura do email em html, pode ser feito da forma vc preferir $msg .= "<br />Mensagem enviada em " . date("d/m/Y") . " &agrave;s ".date("H:i").", os dados seguem abaixo: " . chr(13) . chr(10) . chr(10); $msg .= "<br /><strong>Nome :</strong> " . $nome . chr(13) . chr(10); $msg .= "<br /><strong>Sobre Nome :</strong> " . $sobreNome . chr(13) . chr(10); $msg .= "<br /><strong>Email :</strong> " . $email . chr(13) . chr(10); $msg .= "<br /><strong>Telefone :</strong> " . $telefone . chr(13) . chr(10); $emailsender=strtolower($email); /* Verifica qual é o sistema operacional do servidor para ajustar o cabeçalho de forma correta. */ if(PATH_SEPARATOR == ";") $quebra_linha = "\r\n"; //Se for Windows else $quebra_linha = "\n"; //Se "nao for Windows" // Passando os dados obtidos pelo formulário para as variáveis abaixo $nomeremetente = strtoupper($nome); $emailremetente = $emailsender; //aqui vc denife para onde o email sera enviado $emaildestinatario = 'teste@hotmail.com'; //assunto do email $assunto = "Contato pelo Site Teste"; /* Montando a mensagem a ser enviada no corpo do e-mail. */ $mensagemHTML = '<p><i>'.$comentario.'</i></p> <hr>'; $mensagemHTML .= $msg; /* Montando o cabecalho da mensagem */ $headers = "MIME-Version: 1.1" .$quebra_linha; $headers .= "Content-type: text/html; charset=utf-8" .$quebra_linha; // Perceba que a linha acima contém "text/html", sem essa linha, a mensagem não chegará formatada. $headers .= "From: " . $emailsender.$quebra_linha; $headers .= "Reply-To: " . $emailremetente . $quebra_linha; // Note que o e-mail do remetente será usado no campo Reply-To (Responder Para) /* Enviando a mensagem */ if(!mail($emaildestinatario, $assunto, $mensagemHTML, $headers ,"-r".$emailsender)){ // Se for Postfix $headers .= "Return-Path: " . $emailsender . $quebra_linha; // Se "não for Postfix" mail($emaildestinatario, $assunto, $mensagemHTML, $headers ); } /* Mostrando na tela as informações enviadas por e-mail */ echo "<script type='text/javascript'> alert('E-mail enviado com sussesso para teste@hotmail.com, em breve entraremos em contato!!! '); document.location.replace('/index.php');</script>"; }else{ //caso ocorra erro echo "<script type='text/javascript'> alert('E-mail em branco!!! '); document.location.replace('/index.php');</script>"; } } ?>

Prestar atenção nesse trecho de código, pois ele é o endereço de email que os dados serão enviados e o assunto que aparecerá para identificação do mesmo.

Altere o valor com o endereço de seu email, para que os dados cheguem até sua caixa de entrada com sucesso.

 //aqui vc denife para onde o email sera enviado $emaildestinatario = 'teste@hotmail.com'; //assunto do email $assunto = "Contato pelo Site Teste";

Obs: O envio de e-mail só irá funcionar se você estiver em um servidor Linux, pois em ambiente Windows não funciona, então se você testar e não “funcionar”, não será erro de programação, então não se esqueça de que você deve subir sua aplicação no servidor Linux e depois testa-la, e com certeza funcionará corretamente.

Bom por hoje é isso, dúvidas críticas ou sugestões comentem abaixo.

Download do projeto completo AQUI...

Bons estudos =)