0

Eu estou tentando fazer um formulário utilizando js e php, só que quando eu clico no botão de enviar, permanece sempre com "Enviando e-mail..." e nunca envia, eu chequei console e diz que o erro está no email.php (404 error not found)... Se alguém puder me ajudar, segue abaixo os códigos que eu utilizei:

HTML:

<div class="contact-form">
     <h3>Contate-nos</h3>
          <form id="main-contact-form" name="contact-form" method="post"  action="email.php">
               <div class="form-group">
                    <input type="text" name="name" class="form-control" id="name" placeholder="Nome">
               </div>
               <div class="form-group">
                   <input type="email" name="email" class="form-control" id="email" placeholder="Email">
               </div>
               <div class="form-group">
                   <input type="text" name="subject" class="form-control" id="subject" placeholder="Assunto">
               </div>
               <div class="form-group">
                   <textarea name="message" class="form-control" rows="8" id="message" placeholder="Message"></textarea>
               </div>
               <button type="submit" name="submit" class="btn btn-primary">Enviar Mensagem</button>
         </form>
</div>

JS:

<script>
       var form = $('#main-contact-form');
       form.submit(function(event){
            event.preventDefault();
        var form_status = $('<div class="form_status"></div>');
           var data = {
               name: $('#name').val(),
               email: $('#email').val(),
               subject: $('#subject').val(),
               message: $('#message').val()
           };
           $.ajax({
               url: $(this).attr('action'),
               type: "POST",
               dataType: "json",
               data: {'data': data},
               beforeSend: function(){
                   form.prepend( form_status.html('<p><i class="fa fa-spinner fa-spin"></i> Enviando email...</p>').fadeIn() );
               },
            success: function (data) {
                if(data == 1){
                    form_status.html('<p class="text-success">Sucesso!</p>').delay(3000).fadeOut();
                }
                else{
                    form_status.html('<p class="text-error">Desculpe,
tente novamente!</p>').delay(3000).fadeOut();
                }
            },
            error: function (xhr, status, error) {
                console.log(error);
            }
         });
    });
   </script>

PHP:

<?php
$data = $_POST['data'];
$name       = $data['name'];
$from       = $data['email'];
$subject    = $data['subject'];
$message    = $data['message'];
$to         = '[email protected]';
$headers = "MIME-Version: 1.0";
$headers .= "Content-type: text/plain; charset=iso-8859-1";
$headers .= "From: {$name} <{$from}>";
$headers .= "Reply-To: <{$from}>";
$headers .= "Subject: {$subject}";
$headers .= "X-Mailer: PHP/".phpversion();
if(mail($to, $subject, $message, $headers)){
    echo 1;
}
else{
    echo 0;
}
8
  • O arquivo email.php existe ? Encontra-se no mesmo diretório que esse arquivo HTML ?
    – NoobSaibot
    Commented 29/10/2017 às 3:34
  • fica, este php que coloquei ai é o email.php
    – darknone
    Commented 29/10/2017 às 3:40
  • O nome do arquivo está correto ? Porque erro 404 quer quiser que não existe ou não encontrado, praticamente a mesma coisa. Está usando .htaccess ? Se sim, coloque na pergunta.
    – NoobSaibot
    Commented 29/10/2017 às 3:41
  • pois é, eu já chequei várias vezes e até renomeei, mas está correto sim :c, não estou utilizando htacess
    – darknone
    Commented 29/10/2017 às 3:42
  • Qual o caminha completo que aparece no Console na aba Network ?
    – NoobSaibot
    Commented 29/10/2017 às 3:43

1 Resposta 1

0

Creio que deveria escrever novamente seu código JavaScript, veja esse exemplo:

$( "#formulario" ).submit(function( event ) {
  event.preventDefault();
  $.ajax({
    method: "POST",
    url: $(this).attr('action'),
    data: { nome: $("[name='nome']").val(), msg: $("[name='msg']").val() }
  })
  .done(function( data ) {
    console.log(data.form);
  });
  
});
input[type='text'] {
  letter-spacing: 1px;
  padding: 8px 4px;
  width: 250px;
}

input[type='submit'] {
  background: #069;
  border: 0px;
  color: #fff;
  letter-spacing: 1px;
  padding: 8px 24px;
  text-transform: uppercase;
}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<form id="formulario" action="https://httpbin.org/post">
  <p><input type="text" name="nome" value="Stackoverflow Português :)"></p>
  <p><input type="text" name="msg" value="O script está funcionando :D"></p>
  <p><input type="submit" value="Enviar"></p>
</form>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .