使用表单数据预填充电子邮件

我正在寻找一种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

使用表单数据预填充电子邮件

回答

相关问题