How to send form contact data by email to JS, or HTML5 or PHP

Question

Hello, I have been making the form with Html5 and using a separate PHP code to send the form this way.

php -> { if (isset($_POST['BTEnviar'])) {

//Variaveis de POST, Alterar somente se necessário 
//====================================================
$nome = $_POST['nome'];
$email = $_POST['email'];
$telefone = $_POST['telefone']; 
$mensagem = $_POST['mensagem'];
//====================================================

//REMETENTE --> ESTE EMAIL TEM QUE SER VALIDO DO DOMINIO
//==================================================== 
$email_remetente = "[email protected]"; // deve ser uma conta de email do seu dominio 
//====================================================

//Configurações do email, ajustar conforme necessidade
//==================================================== 
$email_destinatario = "[email protected]"; // pode ser qualquer email que receberá as mensagens
$email_reply = "$email"; 
$email_assunto = "Contato do Site meusite.com.br"; // Este será o assunto da mensagem
//====================================================

//Monta o Corpo da Mensagem
//====================================================
$email_conteudo = "Nome = $nome \n"; 
$email_conteudo .= "Email = $email \n";
$email_conteudo .= "Telefone = $telefone \n"; 
$email_conteudo .= "Mensagem = $mensagem \n"; 
//====================================================

//Seta os Headers (Alterar somente caso necessario) 
//==================================================== 
$email_headers = implode ( "\n",array ( "From: $email_remetente", "Reply-To: $email_reply", "Return-Path: $email_remetente","MIME-Version: 1.0","X-Priority: 3","Content-Type: text/html; charset=UTF-8" ) );
//====================================================

//Enviando o email 
//==================================================== 
if (mail ($email_destinatario, $email_assunto, nl2br($email_conteudo), $email_headers)){ 

                } 
        else{ 
                echo "</b>Falha no envio do E-Mail!</b>"; } 
//====================================================

-> HTML

<section id="contact" style="background-image: url(&quot;assets/img/contato3.jpg&quot;);background-color: #181818;">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2 class="text-uppercase section-heading">Fale conosco&nbsp;<i class="icon-speech"></i></h2>
                <h3 class="section-subheading text-muted" style="color: rgb(255,255,255);font-family: Montserrat, sans-serif;font-style: normal;"><strong>MANDE PELO FORMULÁRIO ABAIXO OU PARA O EMAIL:</strong><br><strong>[email protected]</strong></h3>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <form id="contactForm" name="contactForm" novalidate="novalidate">
                    <div class="form-row">
                        <div class="col col-md-6">
                            <div class="form-group"><input class="form-control" type="text" id="name" name="nome" placeholder="Seu Nome *" required="" autocomplete="on" inputmode="latin-name" minlength="3" autofocus=""><small class="form-text text-danger flex-grow-1 help-block lead"></small></div>
                            <div
                                class="form-group"><input class="form-control" type="email" id="email" name="email" placeholder="Seu Email *" required="" autocomplete="on" inputmode="email" minlength="5"><small class="form-text text-danger help-block lead"></small></div>
                        <div class="form-group"><input class="form-control" type="tel" name="telefone" placeholder="Seu número *" required="" autocomplete="on" inputmode="tel" minlength="9"><small class="form-text text-danger help-block lead"></small></div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group"><textarea class="form-control" id="message" name="mensagem" placeholder="Conte mais sobre seu projeto *" required="" inputmode="latin" minlength="15"></textarea><small class="form-text text-danger help-block lead"></small></div>
                    </div>
                    <div class="col">
                        <div class="clearfix"></div>
                    </div>
                    <div class="col-lg-12 text-center">
                        <div id="success"></div><button class="btn btn-primary btn-xl text-uppercase" type="submit" name="BTEnviar" id="sendMessageButton">Enviar</button></div>
            </div>
            </form>

However it is not working and sending and when I press the confirm button would like a send confirmation message to appear on the screen with the name of input nome something like: [nome], sua mensagem foi enviada com sucesso!

Answer 1

My recommendations are as follows. If your form is in HTML, show, you can send by javascript to php and PHP sends by email.

Come on... Retrieve HTML information and post via javascript.

$.post({
                url: "handle.php", // o arquivo php que vai enviar email. 
                type: "POST", // HTTP verb
                data: {action: "enviar_email", nome: $('#nome').val(), email: $('#email').val(), telefone: $('#telefone').val(), mensagem: $('#mensagem').val()},

                success: function (response) {

                    if(response.trim() == '1'){
                      // se enviou certinho, voce ja pode mostrar a mensagem aqui mesmo
                       // crie sua variavel que vai exibir a mensagem ou utilize um alerta, vc que sabe
                            document.getElementById("mensagem_envio").innerHTML = "Email não foi enviado";

                    }else if (response.trim() == "0") {
                       // se falhou, mostra também - crie sua variavel que vai exibir a mensagem ou utilize um alerta, vc que sabe
                            document.getElementById("mensagem_envio").innerHTML = "Email não foi enviado";

                    }
                }
            });

OK ... javascript ta ready.

Let’s go to php... BUT BEFORE, recommend using PHP MAILER. https://github.com/PHPMailer/PHPMailer

in PHP looks like this.

    // esses includes são do MAILER. 
    include $_SERVER['DOCUMENT_ROOT'].'/PHPmailer/src/PHPMailer.php';
        include $_SERVER['DOCUMENT_ROOT'].'/PHPmailer/src/SMTP.php';
        include $_SERVER['DOCUMENT_ROOT'].'/PHPmailer/src/Exception.php';
        include $_SERVER['DOCUMENT_ROOT'].'/PHPmailer/src/OAuth.php';
    require_once $_SERVER['DOCUMENT_ROOT'].'/PHPmailer/PHPMailerAutoload.php';

    if ($_POST['action'] == 'enviar_email') {

    $mail = new \PHPMailer\PHPMailer\PHPMailer();

// aqui você retorna as informações do javascipt e monta a mensgame do email no seu formato, é que to com preguiça de montar
            $msg = 'nome:'.$_POST['nome'].' Email: ' .$_POST['email'].' Mensagem: '.$_POST['email'];


$assunto = 'assunto do email';


            $mail->IsSMTP();        // Ativar SMTP
            $mail->SMTPDebug = 0;       // Debugar: 1 = erros e mensagens, 2 = mensagens apenas
            $mail->SMTPAuth = true;     // Autenticação ativada
            $mail->SMTPSecure = false;
            $mail->SMTPAutoTLS = true;  // 
            $mail->Host = 'smtp1.example.com';  // SMTP utilizado
            $mail->Port = 587;          // A porta TCP que estiver habilitado
            $mail->Username = '[email protected]'; // login
            $mail->Password = 'senha12344'; // senha
            $mail->SetFrom('[email protected]', 'não responder'); // o email que vai enviar
             $mail->IsHTML(true);
            $mail->Subject = utf8_decode($assunto);
            $mail->Body = utf8_decode($msg);

            $email_log = array();
            //EMAIL que vai enviar, se for array envia p varios senao só envia p um
            if(is_array($email)){
                foreach($email as $e){
                    $mail->AddAddress($e);

                }
            }else{
                $mail->AddAddress($email);

            }
    if(!$mail->Send()) {
                $error = 'Mail error: '.$mail->ErrorInfo; 
    } else {
                $error = 'Mensagem enviada!';
                }
    }

yes, the code is big and it looks boring, but believe me, it’s very simple, just practice.

but use PHP Mailer, which is very useful, to send an attachment.