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

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

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

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

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

Answer 3

我不认为你“搜索”的净数周或者:) 一个谷歌搜索后，我得到了如下： 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': '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 
}); 

希望这有助于。

最好的问候， 克里斯

Answer 4

我是懒惰和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("webmaster@example.com",$subject,$message,"From: $from\n"); 
    echo "Thank you for sending us feedback"; 
    } 
} 
?> 

Answer 5

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

山魈可以做到这一点。 它每个月免费收到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​​）