如何通过HTML和JavaScript发送电子邮件？

Question

我在我的网站上有一个联系表单，我想要添加一个发送按钮。我不希望电脑上的邮件程序启动，我只想通过按下按钮立即将文本发送到我的电子邮件中。我已经在互联网上搜索了几周，但是没有找到解决方案。

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

- Darawan

---

你无法使用JS完成这项任务，你需要一个像PHP这样的后端脚本语言来处理服务器请求并启动电子邮件发送。此外，我不敢相信你已经花了几周时间在互联网上搜索，这是Web开发的第一天。只需在Google上搜索“PHP电子邮件脚本教程”。 - i-CONICA

客户端代码无法做到这一点。您需要使用后端语言来执行此类操作，例如PHP、ASP.NET等。 - haxtbh

如果你使用node.js，我想这可以用js完成。 - NimChimpsky

您能否给我们展示一个例子，是否对PHP代码量过大？非常简单的“php邮件教程”谷歌搜索会呈现无数的例子供您参考。 - asprin

是的，我有一个想法，你也可以使用第三方API来实现。 - Just code

Answer 1

也许如果您不想使用php，可以尝试使用外部API来提供需要发送的电子邮件地址。

Mandrill可以实现这一点。 每月免费发送12k封电子邮件。

在您的页面上，代码应该像这样：

$.ajax({
  type: “POST”,
  url: “https://mandrillapp.com/api/1.0/messages/send.json”,
  data: {
    ‘key’: ‘YOUR API KEY HERE’,
    ‘message’: {
      ‘from_email’: ‘[e-mail]’,
      ‘to’: [
          {
            ‘email’: ‘[e-mail]’,
            ‘name’: ‘RECIPIENT NAME (OPTIONAL)’,
            ‘type’: ‘to’
          },
          {
            ‘email’: ‘[e-mail]’,
            ‘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
 });

这样做：

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

http://www.codecademy.com/tracks/mandrill （CodeCademy可以教你如何使用API）

- edubriguenti

Answer 2

这可能是您正在寻找的内容：http://www.sanwebe.com/2011/12/making-simple-jquery-ajax-contact-form。您只能使用PHP和HTML + AJAX来实现所需功能。在HTML中创建表单，然后使用Jquery POST请求发送请求和数据，如下所示：

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

- Agli Panci

Answer 3

发送邮件的过程发生在服务器端，HTML/JavaScript是客户端。据我所见，您既没有使用Web服务器，也没有将网站托管在某个地方。

新安装的XAMPP中有一个FakeSendMail选项，您可以使用它来模拟PHP的mail()函数。 XAMPP是最知名的本地主机Web服务器之一，您可以使用它来完成您的项目，如果您不需要实际发送邮件。如果您确实需要发送邮件，我建议使用Web托管。

但首先，您需要了解客户端和服务器端之间的区别。就客户端而言，它只是呈现静态数据（HTML/CSS/JS）。但是对于服务器端，它有更多的用途，因为您可以使用数据库，从中获取和插入数据，并最终呈现由浏览器（客户端）处理的数据。

- Eduard

Answer 4

我不认为你也搜索了几个星期的网络 :) 只需要进行一次谷歌搜索，我就找到了以下内容： https://medium.com/design-startups/b53319616782

从技术上讲，仅使用JavaScript无法发送电子邮件。您始终需要后端服务。但是如上面链接中所述，通常有免费（取决于数量）的服务可用（如上文提到的https://mandrill.com/）。

这是上面链接的代码示例：

$.ajax({
  type: 'POST',
  url: 'https://mandrillapp.com/api/1.0/messages/send.json',
  data: {
    'key’: 'YOUR API KEY HERE’,
    'message': {
      'from_email': '[e-mail]',
      'to': [
          {
            'email': '[e-mail]',
            'name': 'RECIPIENT NAME (OPTIONAL)',
            'type': 'to'
          },
          {
            'email': '[e-mail]',
            '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
});

希望这可以帮到你。

最好的祝福， Chris

- Chris

Answer 5

我有点懒，毫不羞耻地从W3Schools上抄袭了（请不要说W3schools有多烂，我知道但这对我的目的很有帮助！）>

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

- Jack_of_All_Trades