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

Question

我希望有一个 HTML 形式，仅使用 JS/jQuery（没有 PHP），从 "subject" 和 "message" 中获取数据字段，并发送电子邮件。我不希望服务器发送电子邮件，因为 HTML 和 JS 是客户端，而不是服务器端。同样，没有 PHP。

但是，我确实希望它打开用户邮件客户端，但要在主题和正文中预先填写表单数据，并在收件人字段中预先填写我的电子邮件地址。本质上，我需要更高级的 mailto:test@test.com.

到目前为止，这是我的联系表：

<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:contact@test.com?subject=' + $('#subject').val() + '&body=' + $('#body').val());
            $('#sendmsg').submit();
        });
    });
</script>

感谢帮助，谢谢！

Answer 1

我想我会避免使用表格。 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:contact@zane.sh?subject=" + $('#subject').val() + "&body=" + $('#body').val());
            $('a#hiddenmailer').attr('href', mailtotext).click();
        });
    });
</script>

这可能缺少主题和正文输入值所需的一些验证或转义，但这是一般的想法。

Answer 2

你可以只拥有一个普通的 <a> link 和一个 href，你可以用 subject 和 body 的内容更新它。当用户单击它时，将打开用户的默认邮件客户端，其中包含带有 "To"、"Subject" 和正文的电子邮件，其中填充了您输入的内容。注意subject和body需要用encodeURIComponent()编码。如果您有不同的电子邮件地址，则可能还需要对其进行编码。

由于 Stack Overflow 出于安全原因封装片段的方式，"Send email" 按钮在以下片段中不起作用。它确实在普通页面上工作。您可以在 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:contact@zane.sh?' +
            '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>

Answer 3

尝试this.Its简单

$(document).ready(function(){
          $('#submit').click(function(e) {
            e.preventDefault();
            mail_url = 'mailto:contact@zane.sh?Subject=' + $('#subject').val() + '&Body=' + $('#body').val()
            window.location = mail_url
        });
});

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

Pre-fill email with form data

html

javascript

email

jquery

html-email