Formulário de contato em php

Guia do PHP: Aprenda a fazer um formulário em PHP que envia via SMTP autenticado o e-mail para um destinatário.

Comentários Nícolas Müller -

Depois de um (muito) tempo parado, estou de volta com o Guia do PHP, desde o último post quando falei sobre insert, update e delete no MySQL, já havia mencionado que agora vou produzir algumas coisas que serão úteis em seu dia-a-dia como programador.

O que mais foi pedido para ser feito é o Formulário de contato em PHP. Então, vamos elaborar ele para que você consiga entender cada passo que é preciso fazer para criar o form e o que será produzido para ele disparar o email.

Formulário de contato em PHP

Para criarmos o formulário em PHP, vamos precisar de quatro linguagens de programação. HTML para elaborar o formulário visual, CSS para estilizar este formulário, JavaScript para validar campos se estão preenchidos e PHP para disparar a mensagem para o destinatário.

Para iniciar vamos criar o formulário com Nome, email e mensagem. Mostraremos também como adicionar mais campos no form, e ele ficará parecido com este abaixo:

 

HTML do formulário:

Para começar, vamos criar o HTML deste formulário, que é relativamente básico, onde teremos um arquivo chamado index.php, com a tag FORM, para o formulário como um todo, usaremos também a tag INPUT, para os campos nome, e-mail e para o botão enviar, e por fim, a tag TEXTAREA, para o campo de mensagem. O HTML do arquivo está abaixo:

<!DOCTYPE html>
<html>
<head>
    <title>Oficina da Net Formulário de Contato em PHP</title>
    <meta charset="iso-8859-1">
    <link rel="stylesheet" href="style.css" media="all" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
    <h2>Formulário de contato - <a href="https://www.oficinadanet.com.br">Oficina da Net</a></h2>
    <form method="post" onsubmit="validaForm(); return false;" class="form">
    <p class="name">
        <label for="name">Nome</label>
        <input type="text" placeholder="Seu Nome" />
    </p>
    <p class="email">
        <label for="email">E-mail</label>
        <input type="text" placeholder="mail@exemplo.com.br" />
    </p>
    <p class="text">
        <label for="mensagem">Mensagem</label>
        <textarea placeholder="Escreva sua mensagem" /></textarea>
    </p>
    <p class="submit">
        <input type="submit" value="Enviar" />
    </p>
    </form>
</body>
</html>

CSS:

Como podem ter visto, usamos um arquivo chamado style.css para deixar o formulário com a aparência da imagem acima, o CSS usado foi este:

body {
    padding: 50px 100px;
    font-size: 13px;
    font-family: arial, Tahoma, sans-serif;
}

a { color:#000; }

h2 {
    margin-bottom: 20px;
    color: #133141;
}
input, textarea {
    padding: 10px;
    border: 1px solid #E5E5E5;
    width: 200px;
    color: #999999;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
    -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
}
textarea {
    width: 400px;
    height: 150px;
    max-width: 400px;
    line-height: 18px;
}
input:hover, textarea:hover,
input:focus, textarea:focus {
    border-color: 1px solid #C9C9C9;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
    -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;     
}
.form label {
    margin-bottom: 10px;
    color: #999999;
    display: block;
}
.submit input {
    width: 100px;
    height: 40px;
    background-color: #133141;
    color: #FFF;
    border-radius: 3px;
    moz-border-radius: 3px;
    -webkit-border-radius: 3px;                     
}

Onde definimos apenas algumas características para que fique com uma melhor aparência e mais limpo. Você pode estilizar seu formulário como preferir, basta alterar as características do CSS. Como o intuito do Guia, é mostrar PHP, não entraremos em detalhes do formulário.

Validação de campos com Javascript:

Feito o HTML e o CSS, vamos agora partir para as validações de Javascript, para verificar se o usuário preencheu os campos. Faremos com que todos os campos sejam obrigatórios. Para isto, vamos usar jQuery como framework javascript. Para que o jQuery funcione, precisamos ter a linha de código chamando o framework dentro da tag <head> do HTML, que já incluímos no HTML acima mostrado. Para validar, usaremos o seguinte código abaixo:

<script type="text/javascript">
 function validaForm()
 {
    erro = false;
    if($('#nome').val() == '')
    {
        alert('Você precisa preencher o campo Nome');erro = true;
    }
    if($('#email').val() == '' && !erro)
    {
        alert('Você precisa preencher o campo E-mail');erro = true;
    }
    if($('#mensagem').val() == '' && !erro)
    {
        alert('Você precisa preencher o campo Mensagem');erro = true;
    }

    //se nao tiver erros
    if(!erro)
    {
        $('#formulario_contato').submit();
    }
 }
</script>

Não se preocupe em copiar o código, disponibilizaremos um zip com o projeto. Mas veja que fizemos uma validação bem simples, apenas testando se os campos estão preenchidos. Para o teste funcionar, precisamos que os campos possuam o parâmetro ID para identificarmos eles e tentar a validação.  Assim funcionará caso você deseje adicionar mais um campo no formulário, para validar ele, basta você copiar qualquer validação e trocar o nome, conforme no exemplo abaixo:

$(?#nomedocampo?)...

PHP do formulário

Agora que já temos o HTML, o CSS e o Javascript definidos, precisamos fazer o e-mail cair na caixa de mensagem com os dados preenchidos.

Para que o e-mail seja disparado, vamos usar validação de SMTP para o disparo da mensagem, onde trarei uma classe em PHP pronta que usamos para enviar, chamada PHPMAILER, então, basta passarmos os parâmetros corretos para ela que funcionará perfeitamente.

O código da função:

<?php
function sendMail($de,$para,$mensagem,$assunto)
{
 
   require_once('phpmailer/class.phpmailer.php');
 
   $mail = new PHPMailer(true);
 
   $mail->IsSMTP();
 
   try {
 
     $mail->SMTPAuth   true;
 
     $mail->Host       'smtp.gmail.com';
 
     $mail->SMTPSecure "tls"#remova se nao usar gmail
     $mail->Port       587;                  #remova se nao usar gmail
 
     $mail->Username   'seuemail@gmail.com';
 
     $mail->Password   'suasenha';
 
     $mail->AddAddress($para);
     $mail->AddReplyTo($de);
     $mail->SetFrom($de);
 
     $mail->Subject $assunto;
 
     $mail->MsgHTML($mensagem);
 
     $mail->Send();    
      $envio 
true;
 
   } catch (phpmailerException $e) {
 
     $envio false;
 
   } catch (Exception $e) {
 
     $envio false;
 
   }
 
   return $envio;
}
?>

A função é bem simples de ser usada, testei com meu email do Gmail, você pode configurar com qualquer email que possua SMTP ativo. Basta saber o nome do servidor de SMTP, e trocar na linha:

$mail->Host       = 'mail.outrosmtp.com.br';   

Para emails que não são Gmail, você precisa comentar ou remover as linhas:

$mail->SMTPSecure = "tls"; 
 $mail->Port       = 587;

Estas linhas fazem ser possível enviar com a configuração do Gmail. Lembrando que se você for testar no localhost, é necessário ter ativo openSSL, no wamp, basta clicar sobre ele, depois em PHP -> PHP extensions -> php_openssl, conforme imagem abaixo:

Lembrando que você precisa configurar seu email e senha para ser o disparador do email, são nestas duas linhas:

$mail->Username   = 'seuemail@gmail.com'; 
 $mail->Password   = 'suasenha';

Ao enviar a mensagem, o sistema vai mostrar uma mensagem alertando sobre o envio da mensagem, e o código de envio é o seguinte:

<?
include "funcao.php";
if(
strlen($_POST['nome']))
{
 
   if(sendMail($_POST['email'],'seuemail@gmail.com'$_POST['mensagem'], 'Formulário de contato'))
 
   {
 
       echo "Sua mensagem foi enviada com sucesso!";
 
   }
 
   else
    
{
 
       echo "Ocorreu um erro ao enviar";
 
   }
 
   echo "<br><a href='index.php'>Voltar</a>";
 
   exit();
}
?>

Este código foi adicionado dentro do arquivo index.php, na primeira linha, então como o formulário não tem o parâmetro ACTION, que define para onde será executada a ação, ele enviará então para a mesma página, no caso o index.php.

O uso da função sendMail que está dentro do arquivo funcao.php, é o seguinte:

sendMail($de,$para,$mensagem,$assunto)

Onde:

  • $de: remetente
  • $para: destinatário
  • $mensagem: texto que aparece no corpo do email
  • $assunto: texto do assunto da mensagem

O código é relativamente simples de ser utilizado, você pouco precisará editar ele para funcionar.

O que mais posso fazer?

Você pode adicionar mais campos ao formulário, assim como personalizar a mensagem de aviso de envio do email.

Segue o link para download do projeto para que você teste.

Resumo:

Criamos o arquivo para ver o formulário, o index.php, estilizamos ele com css no arquivo style.css, usamos javascript no index para validar os campos em branco, criamos o arquivo funcao.php para organizar a nossa função de envio e chamar a classe PHPMailer, esta responsável por conectar no SMTP e disparar a nossa mensagem.

Você precisa modificar o arquivo funcao.php com seu email e senha do email para conectar corretamente ao smtp, e precisa no index.php, definir para qual email será disparado o formulário.

Veja abaixo o e-mail em minha caixa de mensagens:

 
Guia do PHP
carregando...

JUNTE-SE À DISCUSSÃO
Faça um comentário sobre este assunto
Enviar
  • Claudio Alves Claudio Alves Nível 1 Perg. 0 Resp. 1
    Há 1 ano
    Ola! Nicolas Muller, estou na busca de um formulário que encaixe no uso para o meu site, porém não achei que pudesse ser tão difícil achar um limpo e fácil de instalar. Encontrei vários, cada um com o seu erro essencial não entendo o porque. Mas tudo bem vamos lá, acredito que quando você ler isso eu já tenha resolvido esse per causo então, segue a minha dúvida.* Por acaso esse (formulário) é obrigatório o uso da senha de usuário? Não entendi o motivo de colocar a senha pra receber mensagem no próprio e-mail.* Outra dúvida estou usando o Google Works para receber as mensagens, logo não efetuei alterações no smtp, pois é o mesmo servidor Google correto?Esse erro foi consertado??** E trocar na linha que envia:if(sendMail($_POST['email'],'seuemail@gmail.com', $_POST['mensagem'], 'Formulário de contato'))Pois eu também pretendo receber o nome da pessoa que me escreve. E eu não estou achando a linha de comando para inserir o código. Achei a linha de código e não tenho certeza se já foi alterado (consertado)..Valeu pelo trampo muito obrigado..
    1 Responder
  • Nicolas Muller Nicolas Muller Nível 1 Perg. 0 Resp. 298
    Há 1 ano
    Olá Claudio Alves, desculpe a demora.A senha é necessária para autenticar o envio via SMTP, para conectar o SMTP, você sempre precisa de um username e senha.Sobre o Google Works, sim, é o mesmo. Uso para receber os emails da empresa que estão no Google também.Não foi alterado o código, mas se quiser receber o nome na mensagem, basta colocar a linha: $mensagem = "NOME: ".$_POST['nome'] . "\n Mensagem:".$_POST['mensagem']; e trocar a linha de envio atual:if(sendMail($_POST['email'],'seuemail@gmail.com', $_POST['mensagem'], 'Formulário de contato')) por esta:if(sendMail($_POST['email'],'seuemail@gmail.com', $mensagem, 'Formulário de contato'))
    1 Responder
  • Rafael Aquino Rafael Aquino Nível 1 Perg. 0 Resp. 3
    Há 1 ano
    poderia me ajudar por favor ?ta dando um erro de sintaxe no javascript na linha 4e para cada um desse js, php, html é uma pagina separada ne ?
    1 Responder
  • Nicolas Muller Nicolas Muller Nível 1 Perg. 0 Resp. 298
    Há 1 ano
    Olá Rafael Aquino, chegou a baixar o código e deu erro de JS isso? Por que testeie ele aqui sem modificar e funcionou.
    0 Responder
  • Rafael Aquino Rafael Aquino Nível 1 Perg. 0 Resp. 3
    Há 1 ano
    sim ! no dreamweaver deu erro de sintaxe na linha 4 do javascript2015-05-13 14:25 GMT-03:00 Disqus <notifications@disqus.net>:
    0 Responder
  • Salomao Salomao Nível 1 Perg. 0 Resp. 3
    Há 1 ano
    Opa gostaria de saber como que faço para efetuar uma quebra de linha na menssagem html
    1 Responder
  • Nicolas Muller Nicolas Muller Nível 1 Perg. 0 Resp. 298
    Há 1 ano
    Olá salomao, você pode dentro da mensagem escrever a tag:< br > (quebra de linha em HTML)2 < br > vão quebrar 2 linhasOBS: junte o menor br e maior, por que os comentários aqui quebram a linha e não mostram o código na tela.
    0 Responder
  • Salomao Salomao Nível 1 Perg. 0 Resp. 3
    Há 1 ano
    muito obrigado pela ajuda ...Gostaria de saber como que eu faço para enviar para dois emails exemplo: bb@gg.com e hh@tt.com. if(sendMail($_POST['email'],'bb@gg.com e hh@tt.com', $_POST['mensagem'], 'Formulário de contato'))abraços
    0 Responder
  • Nicolas Muller Nicolas Muller Nível 1 Perg. 0 Resp. 298
    Há 1 ano
    Para enviar para dois emails você pode duplicar a linha. (é a forma mais fácil)---if(sendMail($_POST['email'],'bb@gg.com', $_POST['mensagem'], 'Formulário de contato')){ sendMail($_POST['email'],'hh@tt.com', $_POST['mensagem'], 'Formulário de contato');
    0 Responder
  • Salomao Salomao Nível 1 Perg. 0 Resp. 3
    Há 1 ano
    if(strlen($_POST['nome'])){ if(sendMail($_POST['email'],'teste@gmail.com', $_POST['mensagem'], 'Formulário de contato')) { echo "Sua mensagem foi enviada com sucesso!"; } else { echo "Ocorreu um erro ao enviar"; } echo "Voltar"; exit();}nao estou conseguindo enviar para dois emails poderia me ajudar?
    0 Responder
  • Thomas Rafael Thomas Rafael Nível 1 Perg. 0 Resp. 1
    Há 1 ano
    Boa tarde gostaria de saber se tem como add um campo para fazer upload de fotos ? obrigado
    1 Responder
  • Nicolas Muller Nicolas Muller Nível 1 Perg. 0 Resp. 298
    Há 1 ano
    Olá Thomas, é um pouco mais complicado. Vou providenciar o próximo post ensinando a fazer o upload, e o bônus vai ser integrar ele neste formulário de contato. Aguarde até a próxima semana que terá um artigo pronto com download.
    0 Responder
  • Epitácio Filho Epitácio Filho Nível 1 Perg. 0 Resp. 1
    Há 1 ano
    Caro Nícolas MüllerGenial e soldário é assim que devemos classificá-lo.Obrigado pelo post do Formulário em PHP - Oficina da net.? Baixei os arquivos do seu Formulário PHP.Todos esses códigos em mãos de um profissional é 'mão na roda'. Porém, nas mãos de um leigo é 'batata quente'. Eu fiz todo meu site (http://epitaciofilho.com.br/) e até agora meu contato não rolou. Seu post é um tutotrial que visa ensinar e eu quero aprender, certo?Como leigo no assunto (sou apens um reles designer*) e sem medo de ser feliz eu o pergunto: O que fazer com com cada código? Onde usar cada código?? Código HTML insiro pelo 'form' do Dw. Certo?? O código CSS? Por onde o aplico?? Oonde inserir, em qual programa, plataforma ou se em provedor ou host devo inserir a validação SMTP?
    1 Responder
  • André Motta André Motta Nível 2 Perg. 0 Resp. 2
    Há 3 semanas
    Ola Nicolas, não consigo fazer o formulário enviar o nome e o email , somente envia a mensagem. Troquei a linha de envio: if(sendMail($_POST['email'],'seuemail@gmail.com', $_POST['mensagem'], 'Formulário de contato')) , mas deu erro de envio, tanto usando a linha: $mensagem = "NOME: ".$_POST['nome'] . "\n Mensagem:".$_POST['mensagem']; ou não. Teria alguma dica para resolver esse erro ? Grato
    1 Responder
  • Nícolas Müller Nícolas Müller Administrador Perg. 85 Resp. 134
    Há 3 semanas
    Verifica se não trocou o nome dos campos. Na mensagem vai o nome e email?
    0 Responder
  • Leticia Leticia Nível 1 Perg. 0 Resp. 3
    Há 1 ano
    Muito bom o seu artigo Nicolas, é exatamente o que eu preciso. Mas estou com um problema... O email nao esta sendo enviando, sempre aparece a mensagem de erro. Voce pode me ajudar?
    0 Responder
  • Nicolas Muller Nicolas Muller Nível 1 Perg. 0 Resp. 298
    Há 1 ano
    Olá Leticia, sim. Qual mensagem de erro aparece? Que não enviou? Qual email está tentando enviar? Seu email disponibiliza conexão smtp?
    0 Responder
  • Leticia Leticia Nível 1 Perg. 0 Resp. 3
    Há 1 ano
    Oi Nicolas. Isso mesmo aparece a mensagem de que nao enviou ("Ocorreu um erro ao enviar"). Estou tentando enviar pro meu email do gmail. So alterei no seu codigo as partes em que tinha que colocar o endereço do meu email. Preciso fazer alguma configuraçao no meu email pra dar certo?
    0 Responder
  • Nicolas Muller Nicolas Muller Nível 1 Perg. 0 Resp. 298
    Há 1 ano
    Olá, você não comentou estas linhas não é?$mail->SMTPSecure = "tls"; #remova se nao usar gmail$mail->Port = 587; #remova se nao usar gmailE já testou o arquivo online para ver se funciona?
    0 Responder
  • Leticia Leticia Nível 1 Perg. 0 Resp. 3
    Há 1 ano
    Oi Nicolas.Nao comentei essas linhas nao. Estou testando com o easyphp. Vou testar online pra ver se funciona...
    0 Responder
  • Nicolas Muller Nicolas Muller Nível 1 Perg. 0 Resp. 298
    Há 1 ano
    Se funcionar avise aqui. ;)
    0 Responder
  • Fábio Tati Fábio Tati Nível 1 Perg. 0 Resp. 1
    Há 1 ano
    Continua não dando certo mesmo estando online.
    0 Responder
  • Carlos Alberto Carlos Fireshops Alberto Nível 1 Perg. 0 Resp. 2
    Há 1 ano
    está dando erro.
    0 Responder
  • Carlos Alberto Carlos Fireshops Alberto Nível 1 Perg. 0 Resp. 2
    Há 1 ano
    está dando erro
    0 Responder
  • João João Nível 1 Perg. 0 Resp. 1
    Há 1 ano
    Olá Nicolas, excelente sua postagem, parabéns. Cara preciso de sua ajuda. Estou tentando usar o form no meu site, mas ele não envia e nem aparece mensagem de erro.Meu email e do gmail e ja alterei tudo que tinha para alterar. O formulário ja esta online e mesmo assim não funciona.Vc pode me ajudar ?
    0 Responder
  • Nicolas Muller Nicolas Muller Nível 1 Perg. 0 Resp. 298
    Há 1 ano
    Olá João, poderia fazer um teste com outro email para ver se funciona? Um email além do gmail. Veja se consegue, depois retorne aqui para continuarmos ;)
    1 Responder
  • carregar mais

O que está acontecendo no fórum

Últimos posts
TOPO