Formulário de Contato

[LucasFerraz 0]

Segue o código de formulário de contato.

Estou usando ele nos seguintes sites caso queiram testar: aqui, aqui e aqui.

É rápido, simples e não consome muito processamento.

 

HTML

<form class="contact-field" method="POST" id="contact-form">
    <h2 style="text-transform:none;">Entre em contato, responderemos o mais rápido possível</h2>
    <div class="col-md-12 col-sm-12 col-xs-12" style="padding-left:0">
        <div class="single-input-field">
            <input name="name" id="name" class="name" placeholder="Nome" type="text" required=""> </div>
    </div>
    <div class="col-md-6 col-sm-6 col-xs-12">
        <div class="single-input-field">
            <input name="phone" id="phone" class="phone" placeholder="Telefone" type="text" required=""> </div>
    </div>
    <div class="col-md-6 col-sm-6 col-xs-12">
        <div class="single-input-field">
            <input name="email" id="email" class="email" placeholder="E-mail" type="email" required=""> </div>
    </div>
    <div class="col-md-12 message-input">
        <div class="single-input-field">
            <textarea name="message" id="message" class="message" placeholder="Mensagem" required=""></textarea>
        </div>
    </div>
    <div style="display:inline-block">
        <div class="alert alert-success" style="display:none;" role="alert">Contato enviado com sucesso! Responderemos o mais rápido possível.</div>
        <div class="alert alert-danger" style="display:none;" role="alert">Ocorreu um problema, tente novamente.</div>
    </div>
    <div class="single-input-fieldsbtn">
        <input value="Enviar" type="submit"> </div>
</form>

JS

$("#contact-form").submit(function(e) {
    $(".alert-success").hide(), $(".alert-danger").hide(), e.preventDefault(), $.ajax({
        type: "POST",
        url: "/resources/controllers/email/send.php",
        cache: !1,
        async: !0,
        data: $(this).serialize(),
        dataType: "json",
        success: function(e) {
            1 == e ? ($(".alert-success").show(), $("#contact-form")[0].reset()) : $(".alert-danger").show()
        }
    })
});

O código PHP vocês podem usar esse aqui.

[Fábio Marson 0]

Boa tarde Lucas, tudo bem?

 

Poderia por gentileza detalhar como fez a integração do html, js, php e PHPMailer?

 

Notei que na tag "form" não tem o "action" para chamar o php, não entendi muito bem essa parte, os códigos estão em um único arquivo?

 

Adicionei action="send-contact-form.php" na tag "form" que está no arquivo contact-form.html.

<form class="contact-field" method="POST" action="send-contact-form.php" id="contact-form">

 

Está correta a forma com que estou chamando os names (input/textarea) do html para o php?

Segue abaixo:

// Corpo do email 
//$mail->Body = 'Aqui entra o conteudo texto do email'; 
    $mail->Body   .= "Nome: "    .$_POST['name']."
    ";
    $mail->Body   .= "Telefone: ".$_POST['phone']."
    ";
    $mail->Body   .= "E-mail: "  .$_POST['email']."
    ";
    $mail->Body   .= "Mensagem: ".$_POST['menssage']."
    ";

 

Ficarei grato se puder compartilhar essa integração, ajudará bastante.

 

Abraço.