Form does not send messages

Question

I have a bootstrap form that I am using jquery to fire. I am using the following code:

Form

 <form class="contact-form" name="contact-form"  method="post">
                        <div class="col-sm-5 col-sm-offset-1">
                            <div class="form-group">
                                <label>Nome</label>
                                <input type="text" id="Nome" name="Nome" class="form-control" required="required" style="border-color: #f00">
                            </div>
                            <div class="form-group">
                                <label>Email</label>
                                <input type="email" id="Email" name="Email" class="form-control" required="required" style="border-color: #f00">
                            </div>
                            <div class="form-group">
                                <label>Telefone</label>
                                <input type="Telefone" id="Telefone" class="form-control" style="border-color: #245269">
                            </div>
                            <div class="form-group">
                                <label>Empresa</label>
                                <input type="text" id="Empresa" name="Empresa" class="form-control" style="border-color: #245269">
                            </div>                        
                        </div>
                        <div class="col-sm-5">
                            <div class="form-group">
                                <label>Assunto</label>
                                <select name="Assunto" id="Assunto" class="form-control" required="required" style="border-color: #f00">
                                    <option value="selecione">Selecione</option>
                                    <option value="Orçamento">Orçamento</option>
                                    <option value="Dúvidas">Dúvidas</option>
                                    <option value="Financeiro">Financeiro</option>
                                    <option value="Outro Assunto">Outro Assunto</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>Messagem</label>
                                <textarea name="Messagem" id="messagem" required="required" class="form-control" rows="8" style="border-color: #f00"></textarea>
                            </div>                        
                            <div class="form-group">
                                <button type="button" id="enviar" name="submit" class="btn btn-primary btn-lg" required="required">Enviar</button>
                            </div>
                        </div>
                    </form> 

Jquery

$(function() {
        $("#enviar").on("click", function () {
            var Nome = $("#Nome").val();
            var Email = $("#Email").val();
            var Telefone = $("#Telefone").val();
            var Empresa = $("#Empresa").val();
            var Assunto = $("#Assunto").val();
            var Mensagem = $("#Mensagem").val();
            $.post("enviar.php", {
                Nome: Nome,
                Email: Email,
                Telefone: Telefone,
                Empresa: Empresa,
                Assunto: Assunto,
                Mensagem: Mensagem
            }, function () {
                $(document).ready(function () {
                    $('#myModal').modal();
                });
                $("#Nome").val('');
                $("#Email").val('');
                $("#Telefone").val('');
                $("#Empresa").val('');
                $("#Assunto").val('');
                $("#Mensagem").val('');
            });
        });
    });

PHP

    /*    ini_set('display_errors',1);
        ini_set('display_startup_erros',1);
        error_reporting(E_ALL);
      */  
        $nomeUsuario = trim($_POST['Nome']);
        $emailUsuario = trim($_POST['Email']);
        $telefoneUsuario = trim($_POST['Telefone']);
        $empresaUsuario = trim($_POST['Empresa']);
        $assuntoUsuario = trim($_POST['Assunto']);
        $mensagemUsuario = trim($_POST['Mensagem']);    
            $telUsuario = (empty($telefoneUsuario))?('Não informado'):($telefoneUsuario);
            $empUsuario = (empty($empresaUsuario))?('Não informado'):($empresaUsuario);

            include("phpmailer/class.phpmailer.php");
            $mail = new PHPMailer();

          $mail->SMTPAuth = true;
$mail->Host = "smtp.sitecliente.com";
$mail->Port = 587;
$mail->Username = '[email protected]';
$mail->Password = 'senha';
            $mail->AddAddress("[email protected]");
            $mail->From = $emailUsuario;
            $mail->FromName = "Mensagem enviada pelo Fale Conosco";
            $mail->AddReplyTo($emailUsuario, $mail->FromName);
            $mail->IsHTML(true);
            $data = date("d/m/Y");
            $hora = date("H:i");

            $mensagemHTML = "<div align='justify'>";
            $mensagemHTML .= "<div style=\"font-size: 12px; font-family:Tahoma;\">Mensagem enviada <strong> no dia ".$data." &agrave;s ".$hora."</strong> </div><br><br>";
            $mensagemHTML .= "<div color=#000000 style=\"font-size: 12px; font-family:Tahoma;\"><strong>Nome:</strong></font><div color=#000000 style=\"font-size: 12px; font-family:Tahoma;\"> " .utf8_decode($nomeUsuario)."</div><br>";
            $mensagemHTML .= "<div color=#000000 style=\"font-size: 12px; font-family:Tahoma;\"><strong>E-mail:</strong></div><div color=#000000 style=\"font-size: 12px; font-family:Tahoma;\"> " .utf8_decode($emailUsuario)."</div><br>";
            $mensagemHTML .= "<div color=#000000 style=\"font-size: 12px; font-family:Tahoma;\"><strong>Telefone:</strong></div><div color=#000000 style=\"font-size: 12px; font-family:Tahoma;\"> " .utf8_decode($telUsuario)."</div><br>";
            $mensagemHTML .= "<div color=#000000 style=\"font-size: 12px; font-family:Tahoma;\"><strong>Empresa:</strong></div><div color=#000000 style=\"font-size: 12px; font-family:Tahoma;\"> " .utf8_decode($empUsuario)."</div><br>";
            $mensagemHTML .= "<div color=#000000 style=\"font-size: 12px; font-family:Tahoma;\"><strong>Assunto:</strong></div><div color=#000000 style=\"font-size: 12px; font-family:Tahoma;\"> " .utf8_decode($assuntoUsuario)."</div><br>";
            $mensagemHTML .= "<div color=#000000 style=\"font-size: 12px; font-family:Tahoma;\"><strong>Mensagem:</strong></div><div color=#000000 style=\"font-size: 12px; font-family:Tahoma;\"> " .utf8_decode($mensagemUsuario)."</div><br>";
            $mensagemHTML .= "<\div>";

            $mail->Subject = "Mensagem do site";
            $mail->Body = $mensagemHTML;
            $mail->Send();

My goal is that when sending the message, the bootstrap modal appears. Only it does not send. There seems to be some mistake I’m having trouble identifying. Another problem is that before the validation worked, after I put jquery, it shows the modal without validating.

Answer 1

Puts a ID in his form:

<form class="contact-form" name="contact-form" method="post" id="form-contact">

Never again make a list of Javascript fields to send a form. There are more dynamic ways, using the serialize, for example.

$(function() {
    $("#enviar").on("click", function () {
        $.ajax({
            url: 'enviar.php',
            data: $("#form-contact").serialize(),
            type: "POST",
            success: function(data){
                $("#myModal").modal('show');
            }
        });
    });
});

See on Inspect Element if it shows any errors. I think it might be something to do with your URL.