使用表單數據預填充電子郵件

我正在尋找一種HTML表單，它只使用JS/jQuery（不使用PHP）從「主題」和「消息」字段獲取數據，併發送電子郵件。我不希望服務器發送電子郵件，因爲HTML和JS是客戶端，而不是服務器端。再次，沒有PHP。使用表單數據預填充電子郵件

但是，我確實希望它打開用戶郵件客戶端，但主題和正文預先填寫了表單數據，並且字段預填了我的電子郵件地址。實質上，我需要更先進的mailto:[email protected]。

這是我的聯繫方式至今：

<h2>Send a message</h2> 
<form id="sendmsg"> 
    <div class="field"> 
     <label for="subject">Subject</label> 
     <input type="text" name="subject" id="subject" value="" /> 
    </div> 
    <div class="field"> 
     <label for="message">Message</label> 
     <textarea name="body" id="body" rows="6"></textarea> 
    </div> 
    <ul class="actions"> 
     <li><input type="submit" id="submit" value="Submit" /></li> 
    </ul> 
</form>

我已經試過多次嘗試像這樣（jQuery中）：

<script> 
    $(document).ready(function() { 
     $('#submit').click(function() { 
      $('#sendmsg').attr('action', 'mailto:[email protected]?subject=' + $('#subject').val() + '&body=' + $('#body').val()); 
      $('#sendmsg').submit(); 
     }); 
    }); 
</script>

幫助表示讚賞，謝謝！

來源

2017-09-16 user4775991

你不能只有JavaScript，你需要考慮的安全呢！我想你需要使用像Gmail，Mailchimp這樣的服務，通過一個Api Key，然後你可以輕鬆地發送一封電子郵件，而無需php和客戶端的交互， – Kate

@Kate是的，你可以。看到Makyen的答案，我標記爲正確。 – user4775991

您只需要有一個正常的<a>連接href，你不斷更新subject和body的內容。當用戶點擊它時，用戶的默認郵件客戶端將打開，郵件中的「收件人」，「主題」和正文填入輸入內容。請注意，主題和身體需要使用encodeURIComponent()進行編碼。如果您有不同的電子郵件地址，則可能還需要進行編碼。

由於Stack Overflow出於安全原因封裝片段的方式，「發送電子郵件」按鈕在下面的片段中不起作用。它在普通頁面上工作。你可以在this JSFiddle試試。

$(document).ready(function() { 
 
    //Save references to elements. Don't do DOM walks in event handlers when not needed. 
 
    var $sendEmailEl = $('#send-email'); 
 
    var $subjectEl = $('#subject'); 
 
    var $bodyEl = $('#body'); 
 
    function updateEmailLink() { 
 
     $sendEmailEl.attr('href', 'mailto:[email protected]?' + 
 
      'subject=' + encodeURIComponent($subjectEl.val()) + 
 
      '&body=' + encodeURIComponent($bodyEl.val())); 
 
     //console.log($sendEmailEl.attr('href')); 
 
    } 
 
    $('#subject,#body').on('input', updateEmailLink); 
 
    updateEmailLink(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h2>Send a message</h2> 
 
<div id="sendmsg"> 
 
    <div class="field"> 
 
     <label for="subject">Subject</label> 
 
     <input type="text" name="subject" id="subject" value="" /> 
 
    </div> 
 
    <div class="field"> 
 
     <label for="message">Message</label> 
 
     <textarea name="body" id="body" rows="6"></textarea> 
 
    </div> 
 
    <ul class="actions"> 
 
     <li><a id="send-email" href=""><button>Send email</button></a> &lt;--- This doesn't work from within a snippet, but does work on a page.</li> 
 
    </ul> 
 
</div>

來源

2017-09-16 20:36:40 Makyen

我想我會避免使用表單。一個a標籤是什麼，我們知道會工作，所以我會使用（你仍然可以在你的HTML的情況下，形式它需要造型或其他）

<h2>Send a message</h2> 
<form id="sendmsg" onsubmit="return false;"> 
    <div class="field"> 
     <label for="subject">Subject</label> 
     <input type="text" name="subject" id="subject" value="" /> 
    </div> 
    <div class="field"> 
     <label for="message">Message</label> 
     <textarea name="body" id="body" rows="6"></textarea> 
    </div> 
    <ul class="actions"> 
     <li><input type="submit" id="submit" value="Submit" /></li> 
    </ul> 
    <a id="hiddenmailer" style="display: none;"></a> 
</form> 

<script> 
    $(document).ready(function() { 
     $('#submit').click(function() { 
      var mailtotext = "mailto:[email protected]?subject=" + $('#subject').val() + "&body=" + $('#body').val()); 
      $('a#hiddenmailer').attr('href', mailtotext).click(); 
     }); 
    }); 
</script>

這可能是丟失了一些驗證或轉義需要爲主題和身體輸入值，但這是一般的想法。

來源

2017-09-16 20:36:30 arbuthnott

嘗試this.Its簡單

$(document).ready(function(){ 
      $('#submit').click(function(e) { 
      e.preventDefault(); 
      mail_url = 'mailto:[email protected]?Subject=' + $('#subject').val() + '&Body=' + $('#body').val() 
      window.location = mail_url 
     }); 
});

來源

2017-09-16 20:55:38 krishnar

使用表單數據預填充電子郵件

回答

相關問題