{"id":1107,"date":"2020-10-29T19:06:10","date_gmt":"2020-10-29T19:06:10","guid":{"rendered":"https:\/\/www.leandroip.com\/?p=1107"},"modified":"2022-09-27T11:34:53","modified_gmt":"2022-09-27T14:34:53","slug":"emails-com-anexo","status":"publish","type":"post","link":"https:\/\/www.leandroip.com\/?p=1107","title":{"rendered":"Enviando E-mails com Anexo Usando BOOTSTRAP, PHP, JQuery e phpmailer"},"content":{"rendered":"\n

O email \u00e9 uma das ferramentas mais importantes para qualquer neg\u00f3cio. Atrav\u00e9s deles neg\u00f3cios s\u00e3o consolidados todos os dias. E, tamb\u00e9m atrav\u00e9s deles, pessoas s\u00e3o lembradas de suas obriga\u00e7\u00f5es como pagamentos a efetuar, compras para concretizar, e ainda s\u00e3o avisadas do estado de suas compras, por exemplo. <\/p>\n\n\n\n

E nesse post, vou deixar pronta uma fun\u00e7\u00e3o chamada sendHtmlEmail<\/code> para voc\u00ea automatizar o envio de emails com phpmailer<\/a> seja no seu site ou sistema em PHP.<\/p>\n\n\n\n

De brinde<\/strong>, vamos fazer nesse exemplo um simples formul\u00e1rio de contato, que voc\u00ea pode at\u00e9 adaptar para o seu site. Ele usar\u00e1 JQuery<\/a> para enviar os dados, o que significa que n\u00e3o precisar\u00e1 recarregar a p\u00e1gina para enviar os dados. Ao inv\u00e9s disso, aparecer\u00e1 um gif animado mostrando que est\u00e1 em processamento.<\/p>\n\n\n\n

O que vou mostrar a seguir serve pra voc\u00ea entender o que est\u00e1 acontecendo, mas n\u00e3o \u00e9 o c\u00f3digo completo. No final desse post coloquei um link para baixar o c\u00f3digo completo para testar.<\/p>\n\n\n\n

Primeiro, vamos ao layout. Bom, essa parte \u00e9 simples e vou usar BOOTSTRAP<\/a> pra voc\u00ea se familiarizar (caso n\u00e3o conhe\u00e7a). A primeira parte fica assim:<\/p>\n\n\n\n

<h1 id="contato">Teste do Formul\u00e1rio de Contato<\/h1>\n<p>Um exemplo de uso do phpmailer<\/p>\n<div id="formResult"><\/div>\n<div id="formDiv">\n   <form id="messageForm" method="POST" action="post_contato.php">\n      <div class="form-group">\n         <label>Nome<\/label>\n         <input type="text" name="nome" class="form-control" placeholder="Seu Nome" required>\n      <\/div>\n      <div class="form-group">\n         <label>Email<\/label>\n         <input type="email" name="email" class="form-control" placeholder="name@example.com" required>\n      <\/div>\n      <div class="form-group">\n         <label>Mensagem<\/label>\n         <textarea name="mensagem" class="form-control" id="txtMensagem" rows="5"><\/textarea>\n      <\/div>\n      <button type="submit" class="btn btn-primary">Enviar<\/button>\n   <\/form>\n<\/div><\/code><\/pre><\/div>\n\n\n\n
E o resultado ser\u00e1 este:<\/p>\n\n\n\n
\"\"
Formul\u00e1rio de Contato<\/figcaption><\/figure>\n\n\n\n
Em seguida, temos que enviar os dados do formul\u00e1rio para o servidor via JQuery (ajax). Ent\u00e3o acrescentamos uma por\u00e7\u00e3o de javascript:<\/p>\n\n\n\n
<script>\n    \/\/ Attach a submit handler to the form\n    $("#messageForm").submit(function(event) {\n      $(document).scrollTop($("#contato").offset().top);\n      $("#formDiv").slideUp();\n      $("#formResult").empty().append("<div style='text-align:center'><img src='images\/ajax-loader.gif'><\/div>");\n      \/\/ Stop form from submitting normally\n      event.preventDefault();\n\n      \/\/ Get some values from elements on the page:\n      var $form = $(this),\n        nome = $form.find("input[name='nome']").val(),\n        email = $form.find("input[name='email']").val(),\n        mensagem = $("#txtMensagem").val(),\n        url = $form.attr("action");\n\n      \/\/ Send the data using post\n      var posting = $.post(url, {\n          nome: nome,\n          email: email,\n          mensagem: mensagem,\n        },\n        function(data) {\n          $("#formResult").empty().append(data);\n        });\n    });\n  <\/script><\/code><\/pre><\/div>\n\n\n\n
Resumindo, a ideia desse trecho \u00e9:<\/p>\n\n\n\n