如何通过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>

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’: ‘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
 });

这里如何:

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

http://www.codecademy.com/tracks/mandrill(CodeCademy 可以教授如何使用API​​)

Answer 2

发送邮件的过程发生在服务器端，HTML/JavaScript 发生在客户端。据我所知，您没有使用网络服务器，也没有在某处托管该网站。

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

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