Send form data by email

Question

Send form data by email

Navigation

#1 by (1 votes)
#2 by (0 votes)

2

I downloaded the codes of a page on the link to use as a temporary page while the site of an event that I organize is not ready. The page has only one field where the person places the email and clicks send.

I need it when I click the Send button, the email it has typed is sent to me via email so I can register it.

In HTML there is a line linking the index.html to the page with JS (line below): < p>

head of 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);

   });

})();

php javascript ajax

asked by anonymous 03.12.2017 / 14:58

2 answers

0

I believe there is no way to send email via JavaScript , since it is a client-side language, since anyone could open console browser and inject something into your code causing some kind of loss. You would have to use server-side language along with JavaScript to perform submissions.

03.12.2017 / 15:53

Div appear once Decrypt MD5 [duplicate]

score 1 · Accepted Answer

You can enter Ajax in this code, but you will need to create a PHP file that will receive the email sent by the form and that will send the email to be registered to your email. In the example below, I have named the PHP file as enviar_email.php .

I also made a small change to these lines:

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

To:

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

Since there is only one form on the page, it is not necessary to use querySelectorAll .

Another suggestion is to put required="required" in the email field, so that the HTML itself validates the field, otherwise the form will be submitted empty or with an invalid email:

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

Let's get down to business:

In the PHP file you can create a submission code with the mail() function of 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
   }
}
?>

Note: The email in From usually must be an email from the domain itself, or the provider will block the sending. The $headers settings may vary from server to server.

In your code, I inserted an Ajax that will call enviar_email.php . If you use a different name, you must change it in Ajax as well.

Your complete code looks like this:

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>