Javascript Código para cadastro de Newsletter

Fabio O. Martinez · 3 de agosto de 2018

Senhores,

Boa tarde!

Sou relativamente novato em desenvolvimento web e infelizmente não domino muito bem as linguagens PHP e JavaScript.

Aqui no C.H. é a primeira vez que faço uma postagem e desde já peço desculpas se faço em lugar errado. Fiquei em dúvida se seria mesmo em JavaScript ou em PHP ou ainda em HTML. Mas vamos lá...

Recentemente peguei um cliente para desenvolver o site da empresa dele. Optamos pelo uso de um template pronto para facilitar todo o trâmite, tanto por questões de tempo quanto financeiramente para ele.

Neste template existe um campo onde os clientes podem se cadastrar para receber a newsletter da empresa. É justamente aí que está a minha dúvida.

Eu preciso que este campo envie o endereço de e-mail digitado para o e-mail do cliente e que, após a digitação e envio, apareça um texto informando que a mensagem foi enviada com sucesso e que o campo volte a ficar em branco (no caso volte a mensagem solicitando que o usuário insira um endereço de e-mail para se cadastrar).

No código fonte do template há uma indicação apontando para um script que não existia. Então apenas copiei um outro já existente e renomeei para o arquivo indicado. Neste caso gostaria de editá-lo para que ficasse funcional mas como não tenho conhecimento suficiente, busco informações com quem já domina a linguagem.

Vamos aos códigos já existentes:

Trecho do HTML do template onde está o formulário:

…

<div class="col-lg-3 col-md-3 col-sm-6 newletter">

                <h1> Newsletter</h1>

                <div class="line2"></div>

                                <div class="searchform">

                                               <p>Inscreva-se para receber nossa newsletter</p>

                                                <form id="search" method="post" action="js/contact/news-form.js" name="ContactForm">

                                                              <input type="email" class="s" id="s" name="email_newsletter" placeholder="insira seu email......">

                                                               <button type="submit" class="sbtn"><i class="fa fa-chevron-right"></i></button>

                                               </form>

                                </div>

</div>

Código do arquivo JS (news-form.js)

$(function(){

                $("#ContactForm").submit(function(){

                               $("#submitf").value='Please wait...';

                              

                               $.post("process.php?send=comments", $("#ContactForm").serialize(),

                               function(data){

                                               if(data.frm_check == 'error'){

                                              

$("#message_post").html("<div class='errorMessage'>ERROR: " + data.msg + "!</div>");

                                                               document.ContactForm.submitf.value='Resend >>';

                                                               document.ContactForm.submitf.disabled=false;

                } else {

                               $("#message_post").html("<div class='successMessage'>Your message has been sent successfully!</div>");

                               $("#submitf").value='Send >>';

                                                               }

                               }, "json");

                              

                               return false;

                              

                });

});

Resumindo:

No HTML: Preciso que o formulário tenha apenas o campo de email para que meu cliente receba via e-mail e posterior cadastro manual na newsletter e que após o envio surja uma mensagem confirmando o sucesso no envio.

No JS: Preciso que o código do arquivo seja compatível a essas ações.

No PHP: Acredito que para mim seja a melhor forma de manipular esses dados. mas confesso que não tenho certeza de como ou onde devo inserir esses scripts.

Desde já agradeço a ajuda de todos e peço desculpas pela falta de conhecimento e também se este não for o lugar correto para postar este tópico.

Forte abraço,

Programador_30

Will871 · 3 de agosto de 2018

Não entendi muito bem o que você quer, mas pelo que vi pretende fazer uma confirmação de cadastro.

Você poderia usar ajax para realizar a requisição e PHP para o processo do lado do servidor, mas para eu poder te ajudar mais do que isso você precisará detalhar melhor o que quer que seja feito!

Obs: Use a TAG code "<>" quando for adicionar algum código ao conteúdo.

Fabio O. Martinez · 3 de agosto de 2018

Will871,

obrigado pela resposta assim rápida.

Peço desculpas pela TAG, como disse sou novato aqui, mas ficarei mais atento, rs...

Vamos lá. Vou tentar explicar melhor...

Em todas as páginas do template existe um campo onde o usuário pode inserir seu endereço de email e assim se inscrever na lista de newsletter que a empresa fará periodicamente. Esse processo de cadastro, por parte da empresa será manual (opção deles mesmo). Ou seja, o usuário envia o email via form do template, a empresa recebe um email numa conta específica e insere manualmente num arquivo contendo todas as contas de email que querem receber a newsletter.

Com relação às ações vamos a elas:

1º passo: usuário acessa a página do site, digita o email que receberá a newsletter e clica em enviar.

2º passo: após clicar em enviar enviar, o script faz a verificação do formato correto do email inserido, a página limpa o campo do formulário e exibe uma mensagem confirmando o envio. Ex. "Seu endereço de email foi enviado com sucesso! Em breve você receberá nossas newsletter. Aguarde!".

Pelo que estou acostumado a usar formulário de contato, sempre uso um script em PHP básico e faço as devidas alterações nele. Neste caso, como é um template pronto, não estou sabendo ajustar o já existente pois faz uma ligação também com JS e se tratar apenas de um campo (email).

Caso queira mais informações ou queira que eu reposte o código usando o CODE, por favor não se acanhe em pedir.

Grato mais uma vez pela atenção e ajuda,

Fábio Martinez

Programador_30

Will871 · 4 de agosto de 2018

Como está em fase de estudos, vou te passar a requisição do ajax pronta e você fará a parte do PHP, vou te dar as recomendações corretas e como você colocará cada conteúdo. Vamos lá!

Essa aqui é a requisição em Ajax:

<script type="text/javascript">
$('#formularioEmail').submit(function(){
  $(this).ajaxSubmit({
    type: 'POST', // Aqui determinamos que a execução será enviada como POST, poderia ser GET ou alguma outra que ninguém usa
    url: this.action, // Aqui ele pegará o conteúdo do formulário que estará em action, por isso precisará passar um action para seu formulário, caso prefira poderá colocar "'pasta/caminho.php'" (sem aspas duplas)
    beforeSubmit: function(){$('#retorno').html('Enviando seus dados!');}, // Aqui será apresentada uma mensagem enquanto a solicitação é executada na div que tenha o id com nome retorno
    success: function(retorno){$('#retorno').html(retorno);}, // Aqui ele receberá o retorno do PHP e apresentará um resultado que será determinado pelo próprio PHP, caso tenha dado erro ou alguma coisa durante a execução do PHP
    error: function(){$('#retorno').html('Erro ao enviar os dados!');}, // Aqui ele apresentará um erro de execução da requisição
  });
  $('#formularioEmail').ajaxStop(function(){ // Aqui ele encerra todas as tarefas
    window.opener.fechar();
    window.close();
  });
  return false; // Aqui ele bloqueia a atualização de página
});
</script>

Insira a requisição AJAX lá em baixo do seu HTML que terá os formulários, pode ser bem em cima da tag que finaliza o body

Essa requisição ajax ai pegará os dados do seu formulário como conteúdo e enviará para o PHP, você poderá verificar o conteúdo usando o seguinte código no PHP:

<?php
var_dump($_POST); // var_dump serve para verificar todo conteúdo que tenha dentro de uma variável, nesse caso estamos vendo a super variável chamada $_POST, poderá verificar qualquer uma que queira com esse código

Vale lembrar que ele pegará a tag action do seu formulário para determinar o caminho e o id para determinar qual o formulário ele está pegando os dados, então lá no seu form, no HTML mesmo, coloque a tag da seguinte forma (Não conheço seu formulário, então eu mesmo determinei que esses seriam os valores, você deverá alterar eles de acordo com sua necessidade):

<form id="formularioEmail" action="caminho.php">
	<!-- CONTEUDO DO SEU FORMULÁRO E BLÁ BLÁ BLÁ -->
</form>

caminho.php será o arquivo que ele enviará os dados, ele será o PHP que irá processar seus dados do email.

Como já foi dito, use o var_dump para verificar o conteúdo e estude a melhor forma para poder enviar o email, segue o link que contém tudo que precisará para criar uma execução básica para email: http://php.net/manual/pt_BR/function.mail.php

Sabe que qualquer dúvida é só repostar aqui mesmo!

Bons estudos!

DiF · 4 de agosto de 2018

@Fabio O. Martinez Só complementando o que já foi dito, quando for receber no PHP os dados, evite de usar a função nativa de envio de email do php. é muito ruim.

Dê uma pesquisada no phpmailer. Que é uma classe bastante robusta.

Fabio O. Martinez · 6 de agosto de 2018

Senhores,

Boa noite!

Antes de mais nada, gostaria de pedir desculpas pela demora em retornar. Precisei me ausentar por motivos de doença na família, mas Graças a Deus já está tudo bem novamente. Vida que segue, rs...

Aos amigos @William Barreto e @DiF ficam meus agradecimentos pela paciência e ajuda.

Confesso que meu conhecimento em PHP é muito raso, praticamente e na gigantesca maioria das vezes, apenas em verificar um arquivo já existente e efetuar as alterações em variáveis de forma que ele funcione no envio de formulários de email nos sites que mexo. Ou seja, acho que precisarei de mais alguma ajuda nesse sentido. Por favor, me desculpem. Como o amigo disse: "estou em fase de estudos". Onde me viro bem de verdade é no HTML e CSS.

De qualquer forma, vou preparar os arquivos como o Will me orientou e, se ainda puder me ajudar no PHP, ficaria imensamente grato.

Forte abraço a todos e muito obrigado, mais uma vez, pela ajuda e paciência!

Fábio O. Martinez