2

Baixei os códigos de uma página no https://html5up.net/ para utilizar como uma página temporária enquanto o site de um evento que organizo não fica pronto. A página possui apenas um campo onde a pessoa coloca o e-mail e clica em enviar.

Preciso que quando ela clique no botão Enviar, o e-mail que ela digitou seja enviado para mim via e-mail para que eu possa cadastra-lo.

No head do HTML há uma linha lincando o index.html à página com o JS (linha abaixo):

head do index.html

<link rel="stylesheet" href="assets/css/main.css" />

index.html

<!-- Signup Form -->
<form id="signup-form" method="post" action="#">
   <input type="email" name="email" id="email" placeholder="E-mail" />
   <input type="submit" value="Enviar" />
</form>

main.js

// Signup Form.

(function() {

   // Vars.
   var $form = document.querySelectorAll('#signup-form')[0],
   $submit = document.querySelectorAll('#signup-form input[type="submit"]')[0],
   $message;

   // Bail if addEventListener isn't supported.
   if (!('addEventListener' in $form))
   return;

   // Message.
   $message = document.createElement('span');
   $message.classList.add('message');
   $form.appendChild($message);

   $message._show = function(type, text) {

      $message.innerHTML = text;
      $message.classList.add(type);
      $message.classList.add('visible');

      window.setTimeout(function() {
         $message._hide();
      }, 3000);
   };

   $message._hide = function() {
      $message.classList.remove('visible');
   };

   // Events.
   // Note: If you're *not* using AJAX, get rid of this event listener.
   $form.addEventListener('submit', function(event) {

      event.stopPropagation();
      event.preventDefault();

      // Hide message.
      $message._hide();

      // Disable submit.
      $submit.disabled = true;

      // Process form.
      // Note: Doesn't actually do anything yet (other than report back with a "thank you"),
      // but there's enough here to piece together a working AJAX submission call that does.
      window.setTimeout(function() {

         // Reset form.
         $form.reset();

         // Enable submit.
         $submit.disabled = false;

         // Show message.
         $message._show('success', 'Obrigado! Nos vemos em breve ; )');
         //$message._show('failure', 'Something went wrong. Please try again.');

      }, 750);

   });

})();
5
  • Se seu servidor tem suporte a PHP pode usar PHPMailer pt.stackoverflow.com/questions/251300/…
    – user60252
    Commented 3/12/2017 às 14:24
  • Você só quer o email para cadastrar em um emails marketing? Se for, é só usar o código direto da plataforma. Conta pra gente o que de fato você precisa para enviarmos o código pronto, ou dar uma solução mais gráfica possível.
    – Mr Genesis
    Commented 3/12/2017 às 14:52
  • @GenesisR. preciso somente receber os e-mail para cadastrar na plataforma de e-mail mkt sim, só que não queria perder o layout do site. Quando alguém clica em enviar aparece uma mensagem de "obrigado", por exemplo. Quero que isso se mantenha.
    – user99005
    Commented 3/12/2017 às 14:56
  • Qual linguagem de servidor vc usa, php?
    – Sam
    Commented 3/12/2017 às 15:46
  • @ÐvÐ Sim, é php!
    – user99005
    Commented 3/12/2017 às 15:55

2 Respostas 2

0

Você pode inserir o Ajax nesse seu código, mas você vai precisar criar um arquivo PHP que irá receber o e-mail enviado pelo formulário e que irá fazer o envio do e-mail a ser cadastrado para o seu e-mail. No exemplo abaixo, eu nomeei o arquivo PHP como enviar_email.php.

Fiz também uma pequena alteração nestas linhas:

var $form = document.querySelectorAll('#signup-form')[0],
$submit = document.querySelectorAll('#signup-form input[type="submit"]')[0],

Para:

var $form = document.querySelector('#signup-form'),
$submit = document.querySelector('#signup-form input[type="submit"]'),

Como só há um formulário na página, não é necessário usar querySelectorAll.

Outra sugestão é colocar required="required" no campo email, para que o próprio HTML valide o campo, caso contrário o formulário será submetido vazio ou com um email inválido:

<input required="required" type="email" name="email" id="email" placeholder="E-mail" />

Vamos ao que interessa:

No arquivo PHP você pode criar um código de envio com a função mail() do PHP:

PHP:

<?php
$email = $_GET['email']; // recebe o campo do formulário

if(isset($email)){ // verifica se o valor foi recebido
   $corpo = '
   <html>
   <head>
   </head>
   <body>
   Email: '.$email.'
   </body>
   </html>
   '; 

   $headers = "MIME-Version: 1.1\n";
   $headers .= "Content-type: text/html; charset=iso-8859-1\n";
   $headers .= "From: [email protected]\n";
   $headers .= "Return-Path: [email protected]\n";
   $envio = mail("[email protected]", "Novo email enviado pelo site", $corpo, $headers);
   if($envio){
     echo 'email enviado'; // envio a confirmação pro Ajax
   }
}
?>

Obs.: o email em From geralmente deve ser um email do próprio domínio, ou o provedor irá bloquear o envio. As configurações do $headers podem variar de servidor pra servidor.

No seu código, inseri um Ajax que irá chamar o enviar_email.php. Caso use outro nome, é preciso alterar no Ajax também.

Seu código completo ficará assim:

HTML + JavaScript:

<form id="signup-form" method="post" action="#">
   <input required="required" type="email" name="email" id="email" placeholder="E-mail" />
   <input type="submit" value="Enviar" />
</form>

<script>
(function() {

   // Vars.
   var $form = document.querySelector('#signup-form'),
   $submit = document.querySelector('#signup-form input[type="submit"]'),
   $message;

   // Bail if addEventListener isn't supported.
   if (!('addEventListener' in $form))
   return;

   // Message.
   $message = document.createElement('span');
   $message.classList.add('message');
   $form.appendChild($message);

   $message._show = function(type, text) {

      $message.innerHTML = text;
      $message.classList.add(type);
      $message.classList.add('visible');

      window.setTimeout(function() {
         $message._hide();
      }, 3000);
   };

   $message._hide = function() {
      $message.classList.remove('visible');
   };

   // Events.
   // Note: If you're *not* using AJAX, get rid of this event listener.
   $form.addEventListener('submit', function(event) {

      event.stopPropagation();
      event.preventDefault();

      // Hide message.
      $message._hide();

      // Disable submit.
      $submit.disabled = true;

      var $email = document.querySelector("#email").value;

      //// INÍCIO DO AJAX

      var http = false;
      http = new XMLHttpRequest();
      var url_="http://marcos.lfels.xyz/__testes/erec/assets/js/enviar_email.php?email="+$email;
      http.open("POST",url_,true);
      http.onreadystatechange=function(){

          if(http.readyState==4){
            if(http.responseText.indexOf('email enviado') != -1){
               $message._show('success', 'Obrigado! Nos vemos em breve! ;)');
            }else{
               $message._show('failure', 'Something went wrong. Please try again.');
            }
          }

         // Reset form.
         $form.reset();

         // Enable submit.
         $submit.disabled = false;

      }
      http.send(null);

      //// FIM DO AJAX

   });

})();
</script>
3
  • Ok, funcionou. Estou recebendo os e-mails registrados!!! Obrigado! A mensagem também está correta: "Obrigado! Nos vemos em breve! ;)", mas agora ela está aparecendo com as configurações de css da mensagem de erro, com fonte vermelha e a carinha de erro. Até então, mesmo sem enviar os dados, quando clicávamos em enviar, aparecia a mensagem de sucesso...
    – user99005
    Commented 3/12/2017 às 23:12
  • @MarcosLichtenfels Tinha um pequeno problema ali no Ajax, achei que dava certo mas não dá. Tem que fazer 2 if. Já atualizei na resposta, onde tem if(http.readyState==4){... é só mudar no seu código, são só poucas linhas, umas 7...
    – Sam
    Commented 3/12/2017 às 23:32
  • Funcionou perfeitamente! Super obrigado, @ÐvÐ.
    – user99005
    Commented 4/12/2017 às 0:46
0

Acredito que não exista uma forma de enviar e-mail via JavaScript, já que é uma linguagem client-side, pois qualquer um poderia abrir o console do navegador e injetar algo no seu código causando algum tipo de prejuízo. Você teria que utilizar uma linguagem server-side juntamente com o JavaScript para realizar os envios.

Você deve fazer log-in para responder a esta pergunta.