PHP Formulário de contato de email

[Beorlegui]

Olá. Alguém poderia me dar uma ajudinha por favor?
Tenho um formulário de contato que está funcionando perfeitamente, mas a mensagem de enviado com sucesso está aparecendo em outra página.

Teria como fazer com que esse alert seja dado no próprio index.html e depois que apertasse em "ok", limpar o formulário e permanecer na mesma página?
E teria também como fazer para que esse formulário fosse parar na caixa de entrada do email e não no spam? Obrigada.

 

<form action="mail/contact_me.php" method="POST" name="sentMessage" id="contactForm" novalidate>
          <div class="control-group form-group">
            <div class="controls">
              <label>Nome:</label>
              <input type="text" class="form-control" id="nome" name="nome" required
                data-validation-required-message="Por favor, coloque seu nome.">
              <p class="help-block"></p>
            </div>
          </div>
          <div class="control-group form-group">
            <div class="controls">
              <label>Telefone:</label>
              <input type="tel" class="form-control" name="telefone" id="telefone" required
                data-validation-required-message="Coloque seu telefone.">
            </div>
          </div>
          <div class="control-group form-group">
            <div class="controls">
              <label>Email:</label>
              <input type="email" class="form-control" name="email" id="email" required
                data-validation-required-message="Preencha seu email.">
            </div>
          </div>
          <div class="control-group form-group">
            <div class="controls">
              <label>Mensagem:</label>
              <textarea rows="5" cols="100" class="form-control" id="msg" name="msg" required
                data-validation-required-message="Digite sua mensagem" maxlength="999" style="resize:none"></textarea>
            </div>
          </div>
          <div id="success"></div>
          <!-- For success/fail messages -->
          <button type="submit" class="btn btn-primary float-right" id="sendMessageButton">Enviar Mensagem</button>
        </form>

<?php
// Colocar na tag form os seguintes atributos: <form method="post" action="enviar.php">
$para = "[email protected]"; // Mudar o e-mail para o destinatário
$assunto = "Contato via site | Web Net Informática"; // Assunto do E-mail

$mensagem = "<strong>Nome: </strong>".$_POST['nome']; // Campos do formulário. Colocar o equivalente no atributo name do campo.
$mensagem .= "<br><strong>E-mail: </strong>".$_POST['email']; // Campos do formulário. Colocar o equivalente no atributo name do campo.
$mensagem .= "<br><strong>Telefone: </strong>".$_POST['telefone']; // Campos do formulário. Colocar o equivalente no atributo name do campo.
$mensagem .= "<br><strong>Mensagem: </strong>".$_POST['msg']; // Campos do formulário. Colocar o equivalente no atributo name do campo.

$cabecalho =  "Content-Type:text/html; charset=UTF-8\n";
$cabecalho .= "From:  Web Net Informática <www.webnetinformatica.com.br>\n"; // Mudar o e-mail para o destinatário
$cabecalho .= "X-Sender:  <[email protected]>\n"; // Mudar o e-mail para o destinatário
$cabecalho .= "X-Mailer: PHP  v".phpversion()."\n";
$cabecalho .= "X-IP:  ".$_SERVER['REMOTE_ADDR']."\n";
$cabecalho .= "Return-Path:  <[email protected]>\n"; // Mudar o e-mail para o destinatário
$cabecalho .= "MIME-Version: 1.0\n";

if(mail($para, $assunto, $mensagem, $cabecalho)) { 
     echo "<script type=\"text/javascript\">".
        "alert('Email enviado com sucesso! Entraremos em contato em breve.');". // Mensagem exibida em caso de sucesso
        "window.location = 'index.html';". // URL que será redirecionado em caso de sucesso
        "</script>";
} else { 
     echo "Ocorreu um problema ao enviar seu e-mail. Tente novamente ou entre em contato por telefone."; // Mensagem de Erro
}
?>

 

[GabrielSennaMs]

@Beorlegui Para fazer isso você vai precisar utilizar Ajax, com Ajax você pode fazer a requisição para a página em php que vai enviar o e-mail sem sair dá página atual.

 

Um exemplo de código Ajax que você pode usar na sua aplicação:

<script type="text/javascript">
    	var form = document.forms["sentMessage"];
    	form.addEventListener("submit", function(event)
    	{
    		let xhttp = new XMLHttpRequest();
		    xhttp.onreadystatechange = function() 
		    {
		        if(this.readyState == 4 && this.status == 200)
		        {
		        	alert(this.responseText);
		        }
		    };
		    xhttp.open(form.getAttribute("method"), form.getAttribute("action"), true);
		    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
		    xhttp.send("nome="+form["nome"].value+"&email="+form["email"].value+"&telefone="+form["telefone"].value+"&msg="+form["msg"].value);
  			event.preventDefault();
  			return(false);
		});
</script>

Aqui tem um tutorial de como usar o Ajax

[DiF]

@Beorlegui Se quiser algo mais simples, pode usar a função $.ajax() do jquery. Dessa forma, você pode usar diversos callback e efeitos como fadeout nos campos do form( claro isso é só questão estética que muita gente gosta)

Na prática, tanto faz usar o jquery com ajax ou javascript puro com ajax.

 

A única diferença é a facilidade, menos linhas e benefícios do próprio jquery.

[Beorlegui]

@GabrielSennaMs Obrigada pela ajuda, esse exemplo funcionou perfeitamente. Você poderia me dar mais uma ajudinha se possível? Tem como apagar o formulário depois que confirmar que o email foi enviado com sucesso?

adicionado 1 minuto depois

@DiF Obrigada. Depois vou pesquisar mais sobre Ajax.

[DiF]

@Beorlegui Na verdade, o ajax já é isso que você usou, no código acima do colega.

Você pode colocar um:  

document.getElementById("contactForm").reset();

dentro do evento do click. form.addEventListener

[Beorlegui]

@DiF Obrigada. Agora ficou perfeito! 

[DiF]

@Beorlegui Só um comentário, muita gente não gosta de usar o jQuery, por ser uma biblioteca a mais a se carregar, mas certamente é muito mais fácil e simples de fazer o que você queria e zerar o formulário. Além de deixar mais "elegante"

Exemplo do mesmo código só que em jQuery:

 

$(document).ready(function(){
    var btn = $("#SendMessageButton");
    
    btn.on("click", function(){
         var formulario = $("#contactForm").serialize(); 
 
        $.ajax({
             url: "mail/contact_me.php",
             dataType: "HTML",
             method: "POST",
             data: formulario
        }).done(function(retorno){
              alert(retorno);
              $('#contactForm')[0].reset();
        }).fail(function(retorno){
              alert(retorno);
        }); 
    });
});

Basicamente, a função done()  serve para quando for bem sucedido a requisição. No caso vai mostrar um alert, com o conteúdo da variável retorno.  Esta variável retorno recebe a mensagem do seu 

if(mail($para, $assunto, $mensagem, $cabecalho))

Já a função fail() recebe na variável retorno, a mensagem do bloco do else,  que é a mensagem de erro.

 

Note, que se usar com jquery desta forma, remova a chamada do javascript lá no php, deixando apenas o texto de mensagem, pois aí o alert vai ser chamado pelo jquery e não pelo javascript contido no php.

[Beorlegui]

@DiF Obrigada pela ajuda. Essa parte eu consegui resolver.
Meu problema agora é no formulário mesmo. Não estou conseguindo fazer os campos inputs serem obrigatórios. Já coloquei required, required="required", já tentei validar com javascript, mas nenhum deu certo. Toda vez que eu clico no botão enviar, o formulário envia mesmo os campos estando em brancos. Já não sei mais o que fazer.

[DiF]

@Beorlegui Estranho o atributo required é nativo do HTML 5.

 

   <input type="text" name="teste" required />

 

veja funcionando: https://jsfiddle.net/dife/nL0qxdc4/1/

 

Em tempo, se o atributo nativo não funciona, use o javascript para validar. 

 

 

[Beorlegui]

@DiF Realmente não sei porque não está funcionando o required. Já testei alguns exemplos aqui com javascript e não deram certo também. O formulário envia mesmo vazio.

[DiF]

@Beorlegui Posta aqui seu código javascript que tentou para validar.

 

Basicamente, você tem que testar os campos vazios. Recomendo em jquery que é extremamente mais fácil de desenvolver.

[Beorlegui]

@DiF Desculpa a demora.
Depois de tentar muitos, esse foi o último código que testei para validar o formulário, mas continua não dando certo. Mesmo apertando o submit, o formulário ainda está enviando campos vazios. Estou tentando não usar Jquery porque percebi que está afetando o scroll page (a rolagem suave da página) do meu site.

function validar() {
  var nome = sentMessage.nome.value;
  var email = sentMessage.email.value;
  var telefone = sentMessage.telefone.value;
  var msg = sentMessage.msg.value;
  
  if (nome == "") {
  alert('Preencha o seu nome');
  sentMessage.nome.focus();
  return false;
  }

  if (telefone == "") {
    alert('Preencha o seu telefone');
    sentMessage.telefone.focus();
    return false;
  }
  
  if (email == "") {
  alert('Preencha o seu email');
  sentMessage.email.focus();
  return false;
  }
  
  if (msg == "") {
  alert('Digite sua mensagem');
  sentMessage.msg.focus();
  return false;
  }
  
  if (nome.length < 5) {
  alert('Digite seu nome completo');
  sentMessage.nome.focus();
  return false;
  }
}
                      
                      
NO BOTÃO SUBMIT -> onclick="return validar()"

 

[GabrielSennaMs]

@Beorlegui Cara eu olhei todo o código javascript, e não tem nenhum erro, porém lá no inicio do tropico quando eu copiei seu formulário em html para cria um código em cima eu notei que tinha um espaço em branco no nome do elemento form, esse pode ser seu problema.

 

Vou colocar em anexo o código da sua aplicação com a sua nova funções de validação.

 

Eu testei aqui e funciona de boa!

 

formulario.rar