How do I send email through HTML and JavaScript?

Question

I have a contact form on my website and I wanted to make a send button. I would not want an e-mail program on the computer to start, I just want the text to be sent to my e-mail right away by just pressing the button. I have searched for weeks now on the internet and I am giving up.

<form method="post" name="contact" action="#">
    <label for="author">Name:</label>
    <input type="text" id="author" name="author" class="required input_field" />
    <div class="cleaner h10"></div>

    <label for="email">Email:</label>
    <input type="text" class="validate-email required input_field" name="email" id="email" />
    <div class="cleaner h10"></div>

    <label for="subject">Subject:</label>
    <input type="text" class="validate-subject required input_field" name="subject" id="subject"/>                             
    <div class="cleaner h10"></div>

    <label for="text">Message:</label>
    <textarea id="text" name="text" rows="0" cols="0" class="required"></textarea>
    <div class="cleaner h10"></div>             

    <input type="submit" value="Send" id="submit" name="submit" class="submit_btn float_l" />
    <input type="reset" value="Reset" id="reset" name="reset" class="submit_btn float_r" />
</form>

Answer 1

The process of sending a mail happens server-side, HTML/JavaScript is client-side. As far as I can see you're not using a web-server nor are you hosting the website somewhere.

There is a FakeSendMail option with the new install from XAMPP which you could use to emulate the mail() function from PHP. XAMPP is one of the most known localhost web servers , which you could use to finish your project, in case you don't really need that mail to be actually sent. If you do, I recommend using a webhosting.

But first you need to understand the difference between Client-Side and Server-Side. As far as Client Side is concerned, all it does is render your static data. (HTML/CSS/JS). But, as for Server Side, there is a lot more use to it, as you can work with a database, fetch and insert data from or to it, and eventually render data which will be processed by the Browser (client side)

Answer 2

Maybe if you don't want to use php, you may try just use an external API to provide you the email to be sent.

Mandrill can do that. It's free up to 12k emails per month.

In you page the code would be like this:

$.ajax({
  type: “POST”,
  url: “https://mandrillapp.com/api/1.0/messages/send.json”,
  data: {
    ‘key’: ‘YOUR API KEY HERE’,
    ‘message’: {
      ‘from_email’: ‘YOUR@EMAIL.HERE’,
      ‘to’: [
          {
            ‘email’: ‘RECIPIENT_NO_1@EMAIL.HERE’,
            ‘name’: ‘RECIPIENT NAME (OPTIONAL)’,
            ‘type’: ‘to’
          },
          {
            ‘email’: ‘RECIPIENT_NO_2@EMAIL.HERE’,
            ‘name’: ‘ANOTHER RECIPIENT NAME (OPTIONAL)’,
            ‘type’: ‘to’
          }
        ],
      ‘autotext’: ‘true’,
      ‘subject’: ‘YOUR SUBJECT HERE!’,
      ‘html’: ‘YOUR EMAIL CONTENT HERE! YOU CAN USE HTML!’
    }
  }
 }).done(function(response) {
   console.log(response); // if you're into that sorta thing
 });

Here how:

https://medium.com/design-startups/b53319616782

http://www.codecademy.com/tracks/mandrill (CodeCademy can teach how to use the API)

Answer 3

This maybe what are you searching for: http://www.sanwebe.com/2011/12/making-simple-jquery-ajax-contact-form . You can only do what do you want by using PHP and HTML + AJAX. Create the form in HTML and than send the request + data using Jquery POST request like this:

        $.post('sendmail.php', post_data, function(response){  ... }

Answer 4

I don't think you 'searched' the net for weeks either :) After one google search I got the following: https://medium.com/design-startups/b53319616782

Thechnically it is not possible to send emails with javascript alone. You always need a backend service. But as described in the link above, there are mostly free (depends on volume) services available (as mentioned in the article above: https://mandrill.com/).

here is the code example of the link above:

$.ajax({
  type: 'POST',
  url: 'https://mandrillapp.com/api/1.0/messages/send.json',
  data: {
    'key’: 'YOUR API KEY HERE’,
    'message': {
      'from_email': 'YOUR@EMAIL.HERE',
      'to': [
          {
            'email': 'RECIPIENT_NO_1@EMAIL.HERE',
            'name': 'RECIPIENT NAME (OPTIONAL)',
            'type': 'to'
          },
          {
            'email': 'RECIPIENT_NO_2@EMAIL.HERE',
            'name': 'ANOTHER RECIPIENT NAME (OPTIONAL)',
            'type': 'to'
          }
        ],
      'autotext': 'true',
      'subject': 'YOUR SUBJECT HERE!',
      'html': 'YOUR EMAIL CONTENT HERE! YOU CAN USE HTML!'
    }
  }
}).done(function(response) {
    console.log(response); // if you're into that sorta thing
});

Hope this helps.

Best regards, Chris

Answer 5

I am being lazy and copied shamelessly from W3Schools (Please don't go and say how crappy W3schools is, I know but this serves the purpose!)>

<h2>Feedback Form</h2>
<?php
// display form if user has not clicked submit
if (!isset($_POST["submit"])) {
  ?>
  <form method="post" action="<?php echo $_SERVER["PHP_SELF"];?>">
  From: <input type="text" name="from"><br>
  Subject: <input type="text" name="subject"><br>
  Message: <textarea rows="10" cols="40" name="message"></textarea><br>
  <input type="submit" name="submit" value="Submit Feedback">
  </form>
  <?php 
} else {    // the user has submitted the form
  // Check if the "from" input field is filled out
  if (isset($_POST["from"])) {
    $from = $_POST["from"]; // sender
    $subject = $_POST["subject"];
    $message = $_POST["message"];
    // message lines should not exceed 70 characters (PHP rule), so wrap it
    $message = wordwrap($message, 70);
    // send mail
    mail("webmaster@example.com",$subject,$message,"From: $from\n");
    echo "Thank you for sending us feedback";
  }
}
?>