Skip to main content
correções ortográficas, formatação aperfeiçoada.
Fonte Link
NoobSaibot
  • 9,8mil
  • 6
  • 29
  • 53

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 envarno botão Enviar, o e-mail que ela digitou seja enviado para mim via e-mail para que eu possa cadastra-lo.

No headhead do htmlHTML há uma linha lincando o index.htmlindex.html à página com o js JS (linha abaixo):

// Signup Form.

// 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);

   });

})();

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):

// 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);

   });

})();

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):

// 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);

   });

})();
Adição de tag
Link
Sam
  • 80,8mil
  • 22
  • 73
  • 128
Ajuste no código
Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 128
(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);

   });

})();
(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);

   });

})();
(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);

   });

})();
Ajuste no código para melhor visualização
Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 128
Carregando
Fonte Link
user99005
user99005
Carregando