如何通過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​​）