Skip to main content
4 de 5
Adição de tag
Sam
  • 80,8mil
  • 22
  • 73
  • 128

Enviar dados do formulário por e-mail

Olá,

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 em envar 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);

   });

})();
user99005