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>

You can't. You need a backend scripting language like PHP to handle the request on the server and initiate the sending of the email. JS cannot do this. Also, I can't believe you've tried for weeks searching the internet, this is day 1 of web development. Just Google "PHP email script tutorial". — i-CONICA
– i-CONICA, Commented May 13, 2014 at 12:24
Client side code cannot do this. You would need to use a backend language to do something like this. i.e. PHP, ASP.NET etc — haxtbh
– haxtbh, Commented May 13, 2014 at 12:25
Well obviously the fact that I have searched for weeks becomes a lot more clear now when you say it can't be done with JS, because I was looking for the answer to be in JS. Thank you for your answer, however, stating that I am lying was not so helpful. Yes, it might be day 1 of web development, but I am no web designer! — Darawan
– Darawan, Commented May 13, 2014 at 12:28
Is it to much php code for you guys to show me an example? - A very simple php email tutorial google search will spawn innumerable examples for you — asprin
– asprin, Commented May 13, 2014 at 12:30

Eduardo Briguenti Vieira · Accepted Answer · 2014-05-13 12:33:59Z

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’: ‘[email protected]’,
      ‘to’: [
          {
            ‘email’: ‘[email protected]’,
            ‘name’: ‘RECIPIENT NAME (OPTIONAL)’,
            ‘type’: ‘to’
          },
          {
            ‘email’: ‘[email protected]’,
            ‘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)

Eduard · Accepted Answer · 2014-05-13 12:34:58Z

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)

Agli Panci · Accepted Answer · 2014-05-13 12:32:00Z

1

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){  ... }

answered May 13, 2014 at 12:32

Agli Panci

5121 gold badge9 silver badges21 bronze badges

Comments

Chris · Accepted Answer · 2014-05-13 12:32:26Z

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': '[email protected]',
      'to': [
          {
            'email': '[email protected]',
            'name': 'RECIPIENT NAME (OPTIONAL)',
            'type': 'to'
          },
          {
            'email': '[email protected]',
            '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

Jack_of_All_Trades · Accepted Answer · 2014-05-13 12:33:14Z

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("[email protected]",$subject,$message,"From: $from\n");
    echo "Thank you for sending us feedback";
  }
}
?>

Collectives™ on Stack Overflow

How do I send email through HTML and JavaScript?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related